<template>
  <div class="wrapper">
    <div class="swiper-container" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in menuList" :key="index">
          <template v-if="item.menuType == 'imagetext'">
            <image-text :menuInfo="item.menuInfo"></image-text>
          </template>
          <template v-else-if="item.menuType == 'playlists'">
            <play-lists :listId="item.menuInfo"></play-lists>
          </template>
          <template v-else-if="item.menuType == 'share'">
            <invite-box></invite-box>
          </template>
          <template v-else-if="item.menuType == 'shop'">
            <shop-box :menuId="item.id"></shop-box>
          </template>
          <template v-else-if="item.menuType == 'coupon'">
            <coupon-box></coupon-box>
          </template>
          <template v-else-if="item.menuType == 'report'">
            <report-box :id="item.menuInfo"></report-box>
          </template>
          <template v-else-if="item.menuType == 'chat'">
            <chat-box :isShowChat="isShowChat"></chat-box>
          </template>
          <template v-else-if="item.menuType == 'iframeLine'">
            <iframe-line :menuInfo="item.menuInfo"></iframe-line>
          </template>
          <template v-else>
            <empty404></empty404>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
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);

export default {
  name: 'menu-list',
  components: {
    imageText,
    playLists,
    inviteBox,
    shopBox,
    couponBox,
    reportBox,
    chatBox,
    iframeLine,
    empty404
  },
  props: {
    value: {}
  },
  data() {
    return {
      swiper: null,
      active: this.value
    };
  },
  computed: {
    ...mapGetters({
      menuList: 'menuList'
    }),
    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(() => {
      this._initSwiper();
    });
  },
  methods: {
    _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);
    }
  },
  watch: {
    value(nVal) {
      this.active = nVal;
      this._tabSwitch();
    },
    active(nVal) {
      this.$emit('input', nVal);
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background: var(--menu-bg) no-repeat center center;
  background-size: cover;
  overflow: hidden;

  .swiper-container {
    height: 100%;
    overflow: visible;
    position: static;

    .swiper-wrapper {
      position: static;

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