<template>
  <ui-page-layout title="搜索">
    <template v-slot:search>
      <ui-search :keywordProp="keyword" @search="loadLatestArts"></ui-search>
    </template>
    <div class="pl-22rem pr-22rem pt-22rem">
      <UiMainArticle v-for="art in latestArts" :item="art"></UiMainArticle>
    </div>

    <van-empty v-if="!latestArts.length" description="暂无数据" />



  </ui-page-layout>
</template>

<script>
  export default {
    data() {
      return {
        keyword:'',
        banner1: [
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
        ],
        latestArts: [],
        pageIndex: 1
      };
    },
    methods: {
      async loadLatestArts(keyword) {
        this.keyword = keyword;
        let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify(Object.assign({onPage:false,keywords:this.keyword})));
        if (resp.data.status === 200) {
          this.latestArts = resp.data.data.cmsArticles;
        }
      }
    },
    watch:{
      '$route.query.keyword':{
        immediate:true,
        handler(){
          this.keyword = this.$route.query.keyword;
          this.loadLatestArts(this.keyword);
        }
      }
    },
    async created() {

    }
  };
</script>
<style>
  .swiper-group {
    display: grid;
    grid-template-columns: repeat(2, 290px);
    grid-template-rows: repeat(2, 163px);
    grid-gap: 10px;
  }

  .swiper {
    @apply w-290px;

    /* align-items: end; */
    /* @apply w-290px h-163px; */
  }

  .swiper-title {
    @apply bottom-17px left-17px text-size-16px;
  }
</style>
