<template>

  <ui-page-layout :showLeft="false" :title="'杂志期刊'">
    <template v-slot:search>
      <ui-search></ui-search>
    </template>
    <ui-scroll-view>
      <van-tabs v-model="active" background="#FFFFFF" color="#124026" class="h-full">
        <van-tab :title="$t('首页')" class="h-full flex-1">
          <div class="pt-12rem">
            <div class="pl-24rem pr-24rem">
              <ui-banner class="w-full h-390rem" flag="首页"></ui-banner>
            </div>

            <div class="flex justify-around mt-24rem mb-24rem">
              <div @click="$router.push('/recommend')" class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/recommend-type.png" />
                <div>{{$t('首页')}}</div>
              </div>
              <div @click="$router.push('/realtime-news')" class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/news-type.png" />
                <div>{{$t('实时新闻')}}</div>
              </div>
              <div @click="$router.push('/hot')" class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/hot-type.png" />
                <div>{{$t('热榜文章')}}</div>
              </div>
              <div @click="$router.push('/vip')" class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/vip-type.png" />
                <div>{{$t('VIP周刊')}}</div>
              </div>
            </div>
            <div class="home-pics-group mb-32rem px-24rem">


              <ui-mask-picture flag="首页1" class="h-192rem"></ui-mask-picture>
              <ui-mask-picture flag="首页2" class="h-192rem"></ui-mask-picture>
              <ui-mask-picture flag="首页3"  class="h-192rem"></ui-mask-picture>
              <ui-mask-picture flag="首页4" class="h-192rem"></ui-mask-picture>


            </div>
            <div class="pl-24rem pr-24rem">
              <home-new></home-new>
            </div>
            <ui-article-list></ui-article-list>
          </div>
        </van-tab>
        <van-tab :key="category.code" v-for="category in categorys" :title="category.name" class="h-full flex-1">
          <ui-article-list :params="{category:category.code}"></ui-article-list>
        </van-tab>
      </van-tabs>
    </ui-scroll-view>

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

<script>
export default {
  components: {},
  data() {
    return {
      active: 0,
      categorys:[],
      currentLabel:'',
      labelArticles:{}
    };
  },
  async created() {
    let resp = await  this.$http.post(this.$api.cms.categorys);
    if(resp.data.status === 200){
      this.categorys = resp.data.data.cmsCategorys;
    }
  },
  methods:{
    async labelArticles(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);
        }
      }
    }
  },
  watch:{
    active(){
      console.log(this.active);
    }
  }
};
</script>
<style>
.type-item {
  @apply flex flex-col items-center text-size-24rem;
}

.type-item>img {
  @apply mb-16rem;
}

.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;
}

.van-tabs__content {
  @apply h-full;
}

.home-pics-group {
  display: grid;
  grid-row-gap: 10rem;
  grid-column-gap: 10rem;
  grid-template-columns: repeat(2, 1fr);

}
</style>
