<template>
  <div class="w-screen flex flex-col items-center">
    <div class="w-full h-146px bg-white flex items-center justify-center">
      <ui-input v-model="keywords" :placeholder="$t('请输入关键字')" class="!w-800px ">
        <el-button @click="loadLatestArts(1)" class="!mr-20px" slot="suffix" type="text">{{$t("搜索")}}</el-button>
      </ui-input>
    </div>
    <div class="h-20px"></div>
    <div class="w-860px">
      <ui-main-article class="mt-20px" @choose="handleChoose" v-for="item in latestArts" :item="item"></ui-main-article>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      keywords:'',
      latestArts: [],
      pageIndex: 1
    };
  },
  methods: {
    async loadLatestArts(pageIndex) {
      let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify({pageIndex: pageIndex,keywords:this.keywords}));
      if (resp.data.status === 200) {
        if(pageIndex === 1){
          this.latestArts = resp.data.data.cmsArticles;
        }else{
          this.latestArts.push(...resp.data.data.cmsArticles);
        }
      }
    }
  },
  async created() {
    this.keywords = this.$route.query.keywords;
    this.loadLatestArts(this.pageIndex);
  }

};
</script>

<style></style>
