<template>
  <div class="wrapper">
    <transition name="fade">
      <div class="svgaPage" v-show="showSVAG">
          <canvas id="svgaBox"></canvas>
      </div>
    </transition>
    <div class="shop-hot-box" v-if="menuList.every(item => item.menuInfo !== 'shop' ) && caseInfo.status">
      <shop-box :showHot="!!caseInfo.status" :isMarket="true"></shop-box>
    </div>
    <div class="swiper-container" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in menuList" :key="index">
          <!-- <div v-if="defer(index)"> -->
            <template v-if="item.menuType == 'imagetext'">
            <image-text :menuInfo="item.menuInfo" :menuId="item.id" v-if="defer(index)"></image-text>
            </template>
            <template v-else-if="item.menuType == 'playlists'">
              <play-lists :listId="item.menuInfo" v-if="defer(index)"></play-lists>
            </template>
            <template v-else-if="item.menuType == 'share'">
              <invite-box v-if="defer(index)"></invite-box>
            </template>
            <template v-else-if="item.menuType == 'shop'">
              <shop-box :menuId="item.id" :showHot="!caseInfo.status" :showList="true" v-if="defer(index)"></shop-box>
            </template>
            <template v-else-if="item.menuType == 'coupon'">
              <coupon-box v-if="defer(index)"></coupon-box>
            </template>
            <template v-else-if="item.menuType == 'report'">
              <report-box :id="item.menuInfo" v-if="defer(index)"></report-box>
            </template>
            <template v-else-if="item.menuType == 'chat'">
              <chat-box :isShowChat="isShowChat" v-if="defer(index)"></chat-box>
            </template>
            <template v-else-if="item.menuType == 'iframeLine'">
              <iframe-line :menuInfo="item.menuInfo" v-if="defer(index)"></iframe-line>
            </template>
            <template v-else>
              <empty404 v-if="defer(index)"></empty404>
            </template>
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { traffic } from '@/plugins/openTraffic';
import Defer from '@/plugins/Mixin/defer.js';
const imageText = resolve => require(['./menuClass/imageText'], resolve);
const playLists = resolve => require(['./menuClass/playLists/index'], resolve);
const inviteBox = resolve => require(['./menuClass/invite'], resolve);
const shopBox = resolve => require(['./menuClass/shop'], resolve);
const couponBox = resolve => require(['./menuClass/coupon'], resolve);
const reportBox = resolve => require(['./menuClass/report'], resolve);
const chatBox = resolve => require(['./menuClass/chat'], resolve);
const iframeLine = resolve => require(['./menuClass/iframeLine'], resolve);
const empty404 = resolve => require(['./menuClass/404'], resolve);
const shopHot = resolve => require(['./menuClass/shop/hot'], resolve);

export default {
  name: 'menu-list',
  serverCacheKey: props => props.value,
  components: {
    imageText,
    playLists,
    inviteBox,
    shopBox,
    couponBox,
    reportBox,
    chatBox,
    iframeLine,
    empty404,
  },
  props: {
    value: {}
  },
  mixins: [Defer()],
  data() {
    return {
      swiper: null,
      active: this.value,
      deferMenuList: [],
      showSVAG: false
    };
  },
  computed: {
    ...mapGetters({
      menuList: 'menuList',
      drainage: 'drainage',
      caseInfo: 'caseInfo',
      giftAni: 'giftAni'
    }),
    isShowChat() {
      let index = -1;
      for (let i = 0; i < this.menuList.length; i++) {
        const item = this.menuList[i];
        if (item.menuType === 'chat') {
          index = i;
        }
      }
      return this.active === index;
    }
  },
  mounted() {
    this.$nextTick(() => {
      const player = require('@gdyfe/svgaplayer-for-live')
       this.SVGAPlayer = player.default({
          target: '#svgaBox'
        });
      this.$Bus.$on('bus-playsvga', this.playsvga);
      this._initSwiper();
      //  setTimeout(() => {
      //   this.playsvga([{
      //     value: '//static-pro.guangdianyun.tv/static/svga/666/666·.svga',
      //     userHeadImg:'https://static-pro.guangdianyun.tv/robot-head/57f8ea050533d96616be29c52729124c.jpeg',
      //     userNick: 'Michael',
      //     filterContent: {
      //       img: '//static-pro.guangdianyun.tv/static/svga/666/666@2x.png',
      //       num: 1,
      //       name: '666'
      //     }
      //   }])
      // }, 1000)
    });
  },
  methods: {
     playsvga(url){
      if (!this.SVGAPlayer) return
      this.showSVAG = true
      this.SVGAPlayer.enqueue(url)
      this.SVGAPlayer.$on('end',(info) => {
        this.$Bus.$emit('bus-setGiftBannerInfo', null);
        this.showSVAG = false
      })
      this.SVGAPlayer.$on('start',(info) => {
        this.$Bus.$emit('bus-setGiftBannerInfo', info);
        this.showSVAG = true
      })
     },
    _initSwiper() {
      const self = this;
      const option = {
        touchRatio: 0.5,
        on: {
          slideChange() {
            self.active = this.activeIndex;
          }
        }
      };
      this.swiper = new this.$swiper(this.$refs.swiper, option);
    },
    _tabSwitch() {
      this.swiper && this.swiper.slideTo(this.active);
    },
    showD() {
      const drainage = this.drainage
      if (drainage.drainage_status === 1){
        if (!(drainage.drainage_model || []).includes('1')) {
          return
        }
        // eslint-disable-next-line no-undef 
        !this.count && traffic(drainage)
      }
    },
  },
  watch: {
    value(newVal, oldVal) {
      const menuType = this.menuList[newVal] ? this.menuList[newVal].menuType : ''
      if ((menuType === 'playlists' || menuType === 'coupon') && (this.drainage.drainage_model || []).includes('1') && this.drainage.drainage_status === 1){
        this.showD()
         // 强制引流 不切换 
        if (this.drainage.drainage_type === 0) {
          if (newVal > oldVal){
            this.swiper.slidePrev()
          } else {
            this.swiper.slideNext()
          }
          return
        }
      }
      this.active = newVal;
      this._tabSwitch();
    },
    active(nVal) {
      this.$emit('input', nVal);
    },
    giftAni(newVal) {
      if (newVal) {
        console.log('初始化svgaplayer')
        const player = require('@gdyfe/svgaplayer-for-live')
        this.SVGAPlayer = player.default({
          target: '#svgaBox'
        });
      } else {
        this.SVGAPlayer.destroyed()
        this.SVGAPlayer = null
        this.showSVAG = false
        this.$Bus.$emit('bus-setGiftBannerInfo', null);
      }
    }
  }
};
</script>

<style lang="less" scoped>

.shop-hot-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  background: var(--menu-bg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  position: relative;

  .svgaPage {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.2);
   z-index: 199;
   padding-bottom: 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   .btn {
    position: absolute;
   }
   #svgaBox {
     width: 320px;
     height: 320px;
   }
}
 
  .swiper-container {
    height: 100%;
    overflow: visible;
    position: static;

    .swiper-wrapper {
      position: static;

      .swiper-slide {
        position: static;
        height: 100%;
      }
    }
  }
}
</style>
