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

<script>
import { getSpecialRedList, RainRedpacketInfo, countDownRedpacket } 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';
import rainBox from './rain/index';
import countDownBox from './countDown/index';

export default {
  name: 'red-box',
  components: {
    defaultBox,
    passwordBox,
    shareBox,
    answerBox,
    businessBox,
    rainBox,
    countDownBox
  },
  data() {
    return {
      shareTimer: [],
      answerList: [],
      businessList: [],
      rainInfo: {},
      countDownInfo: {},
      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.$Bus.$on('bus-addRain', this.add_rain);
    this.$Bus.$on('bus-delRain', this.del_rain);
    this.$Bus.$on('bus-getCountDown', this.get_countDown);
    this._getSpecialRedList();
  },
  methods: {
    async _getSpecialRedList() {
      const reqInfo = {
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id
      }
      const redList = [
        getSpecialRedList(reqInfo),
        RainRedpacketInfo(reqInfo),
        countDownRedpacket(reqInfo)
      ]
      const [result1, result2, result3] = await Promise.all(redList)
      if (result1.code === 200 && result1.errorCode === 0) {
        this.answerList = result1.data.answerList;
        this.businessList = result1.data.businessList;
        this.shareList = result1.data.shareList;
      }
      if (result2.code === 200 && result2.errorCode === 0) {
        this.rainInfo = result2.data;
      }
      if (result3.code === 200 && result3.errorCode === 0) {
        this.countDownInfo = result3.data;
      }
    },
    async get_countDown(obj) {
      const res = await countDownRedpacket({
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id
      })
      this.countDownInfo = res.data;
    },
    _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_rain(obj) {
      this.rainInfo = obj
    },
    del_rain() {
      this.rainInfo = {};
    },
    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>
