<template>
  <div>
    <div class="w-1200px m-auto mt-20px">
      <div class="flex justify-between">
        <div class="left w-860px">
          <ui-shadow-box class="relative h-50px flex items-center pl-16.5px ">
            <div
              class="w-80px h-3px absolute left-0 top--3px bg-primary rounded-full"
            ></div>

            <div class="font-thin text-[#000] text-size-20px">{{ $route.query.title }}</div>
          </ui-shadow-box>
          <div class="h-20px"></div>
          <div v-for="item in latestArts" :key="item">
            <ui-main-article :item="item"></ui-main-article>
            <div class="h-20px"></div>
          </div>

        </div>
        <div class="right w-320px">
          <ui-hot-article></ui-hot-article>
          <div class="h-20px"></div>
          <ui-vip-magazine></ui-vip-magazine>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      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
    };
  },
  watch:{
     '$route.query.category':{
         immediate:true,
         handler(){
            this.pageIndex = 1;
            this.loadLatestArts(this.pageIndex);
         }
     }
  },
  methods: {
    async loadLatestArts(pageIndex) {
      let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify(Object.assign({refMagazine:this.$route.query.refMagazine},{pageIndex: pageIndex})));
      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.loadLatestArts(this.pageIndex);
  }
};
</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>
