<template>
  <div>
    <ui-banner flag="实时新闻"  :showPagination="true" banner-class="w-screen h-350px"></ui-banner>


    <div class="w-1200px m-auto">
      <div class="flex justify-between">
        <div class="left w-860px">
          <div class="h-20px"></div>
          <div v-for="latestArt in latestArts" >
            <ui-main-article :item="latestArt"></ui-main-article>
            <div class="h-20px"></div>
          </div>
        </div>
        <div class="right w-320px">
          <div class="h-20px"></div>
          <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
    };
  },
  methods: {
    async loadLatestArts(pageIndex) {
      let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify(Object.assign(this.$route.query,{pageIndex: pageIndex,type:'2'})));
      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>
