<template>
  <ui-page-layout title="VIP期刊">
    <ui-mask-picture flag="实时新闻" bannerClass="w-full h-136rem"></ui-mask-picture>
    <van-tabs v-model="active" background="#FFFFFF" color="#124026" class="h-full">

      <van-tab key="year"  title="全部" class="h-full flex-1">
      <van-tab :key="year" v-for="year in years" :title="year" class="h-full flex-1">

      </van-tab>

    </van-tabs>
    <div class="px-24rem pt-12rem">
      <ui-vip-article class="mb-24rem" v-for="m in showVipMagazines" :item="m"></ui-vip-article>
    </div>
  </ui-page-layout>
</template>

<script>
  export default {
    data(){
      return {
        vipMagazines:[],
        hideYear:true,
        currentYear:'',
        active:0
      }
    },
    watch:{
      active(){
        if(this.active !== 0){
          this.currentYear = this.years[this.active - 1];
        }else{
          this.currentYear = '';
        }
      }
    },
    computed:{
      years(){
        let years = [];
        this.vipMagazines.forEach((e)=>{
          if(years.indexOf(parseInt(e.dateStr.substr(0,4))) === -1) years.push(parseInt(e.dateStr.substr(0,4)));
        })

        return years.length > 12 && this.hideYear ? years.splice(0,12) : years;
      },
      showVipMagazines(){
        return this.vipMagazines.filter(e=> (parseInt(e.dateStr.substr(0,4)) === this.currentYear || !this.currentYear));
      }
    },
    async created() {

      let resp = await  this.$http.post(this.$api.cms.listVipMagazines);

      if(resp.data.status === 200){
        this.vipMagazines = resp.data.data.vipMagazines;
      }
    }
  }
</script>
<style>

</style>
