<template>
  <div class="suspension" v-if="isShow">
    <div class="suspension-menu" @click.stop>
      <div class="menu-list" v-if="isToggle" v-show="toggle">
        <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>
      <!-- 切换 -->
      <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>
  </div>
</template>
<script>
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/index';
import toggleBtn from '@/components/suspension/toggle/index';
import praiseBox from '@/components/suspension/praise/index';

export default {
  name: 'vertical-suspension-box',
  components: {
    officeBox,
    drawBox,
    voteBox,
    inviteBox,
    walletBox,
    rewardBox,
    toggleBtn,
    praiseBox
  },
  data() {
    return {
      drawInfo: {},
      voteInfo: {},
      toggle: true
    };
  },
  computed: {
    ...mapGetters({
      type: 'type',
      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;
      }
    },
    isToggle() {
      if (
        this.isOffice ||
        this.drawInfo.id ||
        this.voteInfo.id ||
        this.isDraw ||
        this.isInvitation ||
        this.isReward
      ) {
        return true;
      } else {
        return false;
      }
    },
    isShow() {
      return this.isToggle || this.isPraise;
    }
  },
  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 || {});
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-drawInfo', this._setDrawInfo);
    this.$Bus.$off('bus-voteInfo', this._setVoteInfo);
  }
};
</script>

<style lang="less" scoped>
.suspension {
  position: relative;
  width: 0.36rem;
  height: 0.36rem;
}
.suspension-menu {
  position: absolute;
  bottom: 0;
  right: -0.1rem * 0.6;
  font-size: 0.16rem;
  transform: scale(0.6);
  transform-origin: 100% 100%;
  ::v-deep .title {
    color: #fff !important;
  }
  .menu-list {
    margin-bottom: 0.15rem;
    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;
  }
}
</style>
