<template>
  <div class="red-box">
    <div class="suspension-red">
      <answer-box :answerList="answerList"></answer-box>
      <business-box :businessList="businessList"></business-box>
    </div>
    <transition name="fade">
      <div v-show="showRedInfo.type == 1 && showRedInfo.id && showRed">
        <default-box></default-box>
      </div>
    </transition>
    <share-box :shareList="shareList"></share-box>
    <transition name="fade">
      <div v-show="showRedInfo.type == 3 && showRedInfo.id && showRed">
        <password-box></password-box>
      </div>
    </transition>
  </div>
</template>

<script>
import { getSpecialRedList } from '@/plugins/API/apiRed';
import { mapGetters } from 'vuex';
import defaultBox from './default/index';
import passwordBox from './password/index';
import shareBox from './share/index';
import answerBox from './answer/index';
import businessBox from './business/index';

export default {
  name: 'red-box',
  components: {
    defaultBox,
    passwordBox,
    shareBox,
    answerBox,
    businessBox
  },
  data() {
    return {
      shareTimer: [],
      answerList: [],
      businessList: [],
      shareList: []
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      userInfo: 'userInfo',
      showRed: 'showRed',
      showRedInfo: 'showRedInfo'
    })
  },
  mounted() {
    this.$Bus.$on('bus-addAnswerList', this.add_answerList);
    this.$Bus.$on('bus-delAnswerList', this.del_answerList);
    this.$Bus.$on('bus-addBusinessList', this.add_businessList);
    this.$Bus.$on('bus-editBusinessLis', this.edit_businessLis);
    this.$Bus.$on('bus-addShareList', this.add_shareList);
    this.$Bus.$on('bus-delShareList', this.del_shareList);
    this._getSpecialRedList();
  },
  methods: {
    async _getSpecialRedList() {
      const res = await getSpecialRedList({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.answerList = res.data.answerList;
        this.businessList = res.data.businessList;
        this.shareList = res.data.shareList;
      }
    },
    _showRed(type, id) {
      if (this.userInfo.id) {
        this.set_showRedInfo({
          type: type,
          id: id
        });
      } else {
        this.$layer.msg('登陆后才能领取红包哦!~');
        this.$Bus.$emit('bus-showLogin', true);
      }
    },
    add_answerList(obj) {
      this.answerList.push(obj);
    },
    del_answerList(id) {
      this.answerList = this.answerList.filter(x => {
        return Number(x.redpacketId) !== Number(id);
      });
    },
    add_businessList(obj) {
      this.businessList.push(obj);
    },
    edit_businessLis(type) {
      for (let i = 0; i < this.businessList.length; i++) {
        if (this.businessList[i].redpacketId === this.showRedInfo.id) {
          this.businessList[i].isRob = type;
        }
      }
    },
    add_shareList(obj) {
      this.shareList.push(obj);
    },
    del_shareList(id) {
      this.shareList = this.shareList.filter(x => {
        return Number(x.redpacketId) !== Number(id);
      });
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-addAnswerList', this.add_answerList);
    this.$Bus.$off('bus-delAnswerList', this.del_answerList);
    this.$Bus.$off('bus-addBusinessList', this.add_businessList);
    this.$Bus.$off('bus-editBusinessLis', this.edit_businessLis);
    this.$Bus.$off('bus-addShareList', this.add_shareList);
    this.$Bus.$off('bus-delShareList', this.del_shareList);
  }
};
</script>

<style lang="less" scoped>
.red-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  .suspension-red {
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
  }
}
</style>
