<template>
  <div class="suspension-menu" @click.stop>
    <div @click.stop="showD">
      <transition name="fade">
        <div class="menu-list"
            v-if="isToggle"
            v-show="toggle"
            ref="list"
            :style="{pointerEvents: (drainage.drainage_status === 0 || count || !(drainage.drainage_model || []).includes('1')) ? 'all' : 'none'}"
        >
          <div class="menu-item" v-if="isOffice">
            <!-- 文档 -->
            <office-box></office-box>
          </div>
          <div class="menu-item" v-if="drawInfo.id">
            <!-- 抽奖 -->
            <draw-box :info="drawInfo"></draw-box>
          </div>
          <div class="menu-item" v-if="voteInfo.id">
            <!-- 投票 -->
            <vote-box :info="voteInfo"></vote-box>
          </div>
          <div class="menu-item" v-if="isInvitation">
            <!-- 邀请卡 -->
            <invite-box></invite-box>
          </div>
          <div class="menu-item" v-if="isDraw">
            <!--提现-->
            <wallet-box></wallet-box>
          </div>
          <div class="menu-item" v-if="isReward">
            <!-- 打赏 -->
            <reward-box></reward-box>
          </div>
        </div>
      </transition>
    </div>
    <!-- 切换 -->
    <div class="toggle-box" v-if="isToggle">
      <toggle-btn v-model="toggle"></toggle-btn>
    </div>
    <!-- 点赞 -->
    <div class="praise-box" v-if="isPraise">
      <praise-box></praise-box>
    </div>
    <!-- 是否只展示红包 -->
    <div class="see-red-box" v-if="redPacketFilterButton">
      <see-red></see-red>
    </div>
  </div>
</template>
<script>
import { traffic } from '@/plugins/openTraffic';
import { getLiveDraw } from '@/plugins/API/apiDraw';
import { getInfoByInclude } from '@/plugins/API/apiVote';
import { mapGetters } from 'vuex';

import officeBox from '@/components/suspension/office/index';
import drawBox from '@/components/suspension/draw/index';
import voteBox from '@/components/suspension/vote/index';
import inviteBox from '@/components/suspension/invite/index';
import walletBox from '@/components/suspension/wallet/index';
import rewardBox from '@/components/suspension/reward/indexNew';
import toggleBtn from '@/components/suspension/toggle/index';
import praiseBox from '@/components/suspension/praise/index';
import seeRed from './seeRed/index';

export default {
  name: 'suspension-box',
  components: {
    officeBox,
    drawBox,
    voteBox,
    inviteBox,
    walletBox,
    rewardBox,
    toggleBtn,
    praiseBox,
    seeRed
  },
  data() {
    return {
      drawInfo: {},
      voteInfo: {},
      toggle: true,
      count: 0,
    };
  },
  computed: {
    ...mapGetters({
      type: 'type',
      drainage: 'drainage',
      channelInfo: 'channelInfo',
      channelConfig: 'channelConfig',
      userInfo: 'userInfo',
    }),
    isOffice() {
      const info = this.channelConfig.officeLive || {};
      return info.isEnable === 1;
    },
    isDraw() {
      return this.channelInfo.drawStatus === 1;
    },
    isInvitation() {
      const info = this.channelConfig.invitation || {};
      return info.isInvitation === 1;
    },
    isReward() {
      const rewardStatus = this.channelInfo.rewardStatus;
      const rewardGiftStatus = this.channelInfo.rewardGiftStatus;
      return rewardStatus === 1 || rewardGiftStatus === 1
    },
    isPraise() {
      const info = this.channelConfig.praise;
      if (info) {
        return info.isEnable === 1;
      } else {
        return true;
      }
    },
    redPacketFilterButton() {
      const info = this.channelConfig.redPacketFilterButton || {};
      return info.isEnable === 1;
    },
    isToggle() {
      if (
        this.isOffice ||
        this.drawInfo.id ||
        this.voteInfo.id ||
        this.isDraw ||
        this.isInvitation ||
        this.isReward
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.$Bus.$on('bus-drawInfo', this._setDrawInfo);
    this.$Bus.$on('bus-voteInfo', this._setVoteInfo);
    this.getLiveDraw();
    this.getInfoByInclude();
  },
  methods: {
    _setDrawInfo(info) {
      this.drawInfo = info.id ? info : {};
    },
    async getLiveDraw() {
      const res = await getLiveDraw({
        channelId: this.channelInfo.id,
        type: this.type
      });
      if (res.code === 200 && res.errorCode === 0) {
        this._setDrawInfo(res.data || {});
      }
    },
    _setVoteInfo(info) {
      this.voteInfo = info.id ? info : {};
    },
    async getInfoByInclude() {
      const res = await getInfoByInclude({
        include_id: this.channelInfo.id,
        type: this.type
      });
      if (res.code === 200 && res.errorCode === 0) {
        this._setVoteInfo(res.data || {});
      }
    },
    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)
        drainage.drainage_type !== 0 && this.count++
      }
      
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-drawInfo', this._setDrawInfo);
    this.$Bus.$off('bus-voteInfo', this._setVoteInfo);
  }
};
</script>

<style lang="less" scoped>
.fade-enter,.fade-leave-to{
  max-height: 0;
}
.fade-enter-to,.fade-leave{
  max-height: 100vh;
}
.fade-enter-active,.fade-leave-active{
  transition: all .6s cubic-bezier(0,0,0.58,1);
}

.suspension-menu {
  position: absolute;
  bottom: 0.7rem;
  right: 0.1rem;
  z-index: 300;
  font-size: 0.16rem;
  transform: scale(0.6);
  transform-origin: 100% 100%;
  color: var(--suspension-text-color);
  .menu-list {
    margin-bottom: 0.15rem;
    overflow: hidden;
    padding: 0.15rem 0;
    width: 0.8rem;
    background: rgba(101, 101, 101, 0.11);
    border-radius: 0.8rem;
    .menu-item {
      margin: 0.15rem auto;
      &:last-child {
        margin: 0.15rem auto 0;
      }
      &:first-child {
        margin: 0 auto;
      }
    }
  }
  .toggle-box {
    width: 0.8rem;
  }
  .praise-box {
    margin-top: 0.15rem;
    width: 0.8rem;
    ::v-deep #praisBox {
      top: 0;
    }
  }
  .see-red-box {
    margin-top: 0.35rem;
    width: 0.8rem;
  }
}
</style>
