<template>
  <div class="w-1200px">
    <ui-shadow-box class="bg-white mt-30px flex items-center nut-row-flex-wrap " style="flex-wrap: wrap">
      <div
        class="w-100px h-full bg-primary bg-opacity-26 rounded-3px flex justify-center items-center  h-50px"
      >
        年份
      </div>
      <div class="w-1100px flex pt-12px " style="flex-wrap: wrap">
        <div :class="`year-tag ${currentYear === item ? 'selected':''}`" @click="!currentYear || currentYear !== item ? currentYear=item : currentYear = ''" class="mb-12px hover:bg-[#1B3E28] hover:text-[white]"  v-for="(item,index) in years" :key="index">{{item}}</div>
        <div v-if="years.length > 12" :class="`year-tag ${index === 0}`" class="!bg-white mb-12px "   :key="index">
          <img @click="hideYear=!hideYear" src="/imgs/year-arrow-down.png"  class="w-16px h-auto ml-20px cursor-pointer transform" :class="{'rotate-180':!hideYear}"  style="object-fit: contain" />
        </div>
      </div>
    </ui-shadow-box>
    <div class="w-full flex flex-wrap justify-between">
      <ui-shadow-box
        v-for="item in showVipMagazines"
        :key="item"
        class="px-50px pt-30px mt-40px w-390px h-221px transform hover:scale-102 cursor-pointer"
      >
        <ui-vip-article :item="item" class="transform scale-110 "></ui-vip-article>
      </ui-shadow-box>
      <div v-for="i in showVipMagazines.length % 3"  class="px-50px pt-30px mt-40px w-390px h-221px transform hover:scale-102 cursor-pointer"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        vipMagazines:[],
        hideYear:true,
        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>
.year-tag {
  @apply w-60px h-24px bg-[#F7F7F7] flex items-center justify-center rounded-full ml-20px cursor-pointer;
}
.selected {
  @apply bg-primary ;
  color: #ffffff;
}
</style>
