<template>
  <div class="answer" v-show="redInfo.rid" @click="_closeRed">
    <div class="box" @click.stop>
      <i class="close" @click="_closeRed"></i>
      <div class="red-info" v-if="!showLuck">
        <div class="header-box">
          <div class="title">竞答红包</div>
          <div class="prompt">奖池{{ redInfo.amount | floatNum }}元</div>
        </div>
        <div class="topic-box" v-if="redInfo.status == 1">
          <div class="subject">
            <span>({{ redInfo.page }}/{{ redInfo.totalNum }})</span>
            <span>{{ redInfo.next.question }}</span>
          </div>
          <div class="option-list">
            <div
              class="item"
              :class="{
                yes: answer != -1 && index == option && answer == option,
                no: answer != -1 && index == option && answer != option
              }"
              v-for="(item, index) in redInfo.next.detail"
              :key="index"
              @click="_subQuestion(index)"
            >
              <span>{{ item }}</span>
            </div>
          </div>
          <div class="revive">
            <i class="icon"></i>
            <span>我的复活卡</span>
            <em class="u-num">{{ redInfo.reviveCard }}</em>
            张
          </div>
        </div>
        <div class="content-box" v-else-if="redInfo.status == 2">
          <div class="rob">
            <span class="num">{{ redInfo.redInfo.amount | floatNum }}</span>
            元
          </div>
          <div class="luck" @click="_getLuck">查看大家手气</div>
          <div class="next" v-if="redIndex" @click="nextRed">
            领下一个红包
          </div>
        </div>
        <div class="content-box" v-else-if="redInfo.status == 3">
          <div class="tip">很遗憾答题失败了，下次努力！</div>
          <div class="luck" @click="_getLuck">查看大家手气</div>
          <div class="next" v-if="redIndex" @click="nextRed">
            领下一个红包
          </div>
        </div>
        <div class="open-box" v-else-if="redInfo.status == 4">
          <div class="tip">立即领取红包</div>
          <div class="open" @click="_openRed"></div>
        </div>
        <div class="content-box" v-else-if="redInfo.status == 5">
          <div class="tip">很遗憾，下次努力！</div>
          <div class="tip">是否复活卡继续答题？</div>
          <div class="revive">
            <i class="icon"></i>
            <span>我的复活卡</span>
            <em class="u-num">{{ redInfo.reviveCard || 0 }}</em>
            张
            <span class="btn" @click="_revive">立即使用</span>
          </div>
        </div>
        <div class="content-box" v-else-if="redInfo.status == 6">
          <div class="tip">很遗憾，下次努力！</div>
          <div class="luck" @click="_getLuck">查看大家手气</div>
          <div class="share" @click="_shareShow">分享获得一张复活卡</div>
          <div class="next" v-if="redIndex" @click="nextRed">领下一个红包</div>
        </div>
        <div class="content-box" v-else-if="redInfo.status == 7">
          <div class="tip">来晚了，红包已被抢完！</div>
          <div class="luck" @click="_getLuck">查看大家手气</div>
          <div class="next" v-if="redIndex" @click="nextRed">
            领下一个红包
          </div>
        </div>
      </div>
      <luck-list v-if="showLuck" :luckInfo="luckInfo" :channelInfo="channelInfo"></luck-list>
    </div>
  </div>
</template>

<script>
const RED_TYPE = 4;
import {
  answerQuestion,
  submitAnswerQuestion,
  userReviveCard,
  openAnswerRedpacket,
  redpacketDetail
} from '@/plugins/API/apiRed';
import { mapGetters, mapMutations } from 'vuex';
import luckList from './luckList';
export default {
  name: 'red-answer',
  components: {
    luckList
  },
  props: {
    answerList: {}
  },
  data() {
    return {
      redInfo: {},
      luckInfo: {},
      showLuck: false,
      isAjax: true,
      option: -1,
      answer: -1
    };
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
      showRedInfo: 'showRedInfo'
    }),
    redIndex() {
      let index = 0;
      for (let i = 0; i < this.answerList.length; i++) {
        if (this.answerList[i].redpacketId === this.showRedInfo.id) {
          index = i;
        }
      }
      return index;
    }
  },
  mounted() {
    this.$Bus.$on('bus-shareSuccess', this.shareSuccess);
  },
  methods: {
    ...mapMutations({
      set_showRed: 'set_showRed',
      set_showRedInfo: 'set_showRedInfo'
    }),
    shareSuccess() {
      if (
        this.showRedInfo.type === RED_TYPE &&
        Number(this.showRedInfo.id) === Number(this.redInfo.rid)
      ) {
        this._getRed();
      }
    },
    nextRed() {
      this.del_answerList();
      const nextInfo = this.answerList[this.redIndex - 1];
      if (nextInfo) {
        const id = nextInfo.redpacketId;
        this.set_showRedInfo({
          type: RED_TYPE,
          id: id
        });
      }
    },
    async _getRed() {
      this.redInfo = {};
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await answerQuestion({
        id: this.showRedInfo.id,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id
      });
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        this.redInfo = res.data;
      }
    },
    async _subQuestion(index) {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      this.option = index;
      const res = await submitAnswerQuestion({
        id: this.redInfo.rid,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id,
        option: this.option
      });
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        this.answer = res.data.answer;
        setTimeout(() => {
          this.option = -1;
          this.answer = -1;
          this.redInfo = res.data;
        }, 500);
      }
    },
    async _revive() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await userReviveCard({
        id: this.redInfo.rid,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id
      });
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        this.redInfo = res.data;
      }
    },
    async _openRed() {
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await openAnswerRedpacket({
        id: this.redInfo.rid,
        uin: this.channelInfo.uin,
        channelId: this.channelInfo.id
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.$layer.msg('获得' + res.data + '元红包');
        this.redInfo.status = 2;
        this.redInfo.redInfo = {
          amount: res.data
        };
      }
      this.$nextTick(() => {
        this.isAjax = true;
      });
    },
    async _getLuck() {
      this.del_answerList();
      if (!this.isAjax) {
        return false;
      }
      this.isAjax = false;
      const res = await redpacketDetail({
        id: this.redInfo.rid,
        uin: this.channelInfo.uin
      });
      this.isAjax = true;
      if (res.code === 200 && res.errorCode === 0) {
        this.showLuck = true;
        this.luckInfo = res.data;
      }
    },
    _closeRed() {
      this.del_answerList();
      this.set_showRed(false);
    },
    _shareShow() {
      this.$Bus.$emit('bus-showShare', true);
    },
    del_answerList() {
      if (this.redInfo.status === 2 || this.redInfo.status === 3 || this.redInfo.status === 7) {
        this.$Bus.$emit('bus-delAnswerList', this.redInfo.rid);
      }
    }
  },
  watch: {
    showRedInfo() {
      if (this.showRedInfo.type === RED_TYPE) {
        this.isAjax = true;
        this.showLuck = false;
        this._getRed();
      }
    }
  },
  beforeDestroy() {
    this.$Bus.$off('bus-shareSuccess', this.shareSuccess);
  }
};
</script>

<style lang="less" scoped>
.answer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background-color: rgba(0, 0, 0, 0.3);
  .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    margin: auto;
    width: 3.75rem;
    height: 3.5rem;
    .close {
      position: absolute;
      right: 0.5rem;
      top: -0.4rem;
      z-index: 2;
      width: 0.32rem;
      height: 0.32rem;
      background: url('./img/icon-close.png') no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .red-info {
    padding: 1.5rem 0.5rem 0;
    position: relative;
    width: 100%;
    height: 100%;
    background: url('./img/red-bg.png') no-repeat 0 0;
    background-size: 100% 100%;
    .header-box {
      position: absolute;
      top: 0.1rem;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 0.14rem;
      .title {
        margin-bottom: 0.1rem;
        color: #febe5c;
      }
      .prompt {
        color: #fff;
      }
    }
    .topic-box {
      padding: 0 0.1rem;
      height: 100%;
      overflow: auto;
      .subject {
        color: #fff;
        font-size: 0.14rem;
        margin-bottom: 0.1rem;
        word-break: break-all;
      }
      .option-list {
        padding: 0.1rem;
        min-height: 0.1rem;
        background: #fff;
        border-top-left-radius: 0.05rem;
        border-top-right-radius: 0.05rem;
        .item {
          padding: 0.05rem 0.1rem;
          margin-bottom: 0.05rem;
          min-height: 0.35rem;
          line-height: 0.15rem;
          border: 0.01rem solid #ffd5da;
          border-radius: 0.05rem;
          font-size: 0.14rem;
          color: #dd424b;
          word-break: break-all;
          &.no {
            border-color: #ffcbd5;
            background-color: #ffcbd5;
          }
          &.yes {
            border-color: #b3ebab;
            background-color: #c6e9c1;
            color: #4fab41;
          }
        }
      }
      .revive {
        height: 0.35rem;
        line-height: 0.35rem;
        border-bottom-left-radius: 0.05rem;
        border-bottom-right-radius: 0.05rem;
        background-color: #febe5c;
        color: #ffffff;
        text-align: center;
        font-size: 0.14rem;
        .icon {
          display: inline-block;
          width: 0.2rem;
          height: 0.2rem;
          vertical-align: middle;
          background: url('./img/icon-revive.png') no-repeat center center;
          background-size: 100% auto;
        }
      }
    }
    .open-box {
      text-align: center;
      .tip {
        margin-bottom: 0.15rem;
        color: #febe5c;
        font-size: 0.14rem;
      }
      .open {
        margin: 0 auto 0.1rem;
        width: 0.64rem;
        height: 0.64rem;
        background: url('./img/icon-open.png') no-repeat center center;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
    .content-box {
      padding-top: 0.1rem;
      margin-bottom: 0.2rem;
      font-size: 0.14rem;
      text-align: center;
      .tip {
        margin-bottom: 0.15rem;
        color: #febe5c;
        font-size: 0.14rem;
      }
      .luck {
        margin-bottom: 0.15rem;
        font-size: 0.14rem;
        color: #fff;
      }
      .rob {
        margin-bottom: 0.15rem;
        color: #febe5c;
        .num {
          font-size: 0.2rem;
        }
      }
      .share {
        margin: 0 auto 0.15rem;
        display: block;
        width: 2.1rem;
        height: 0.35rem;
        line-height: 0.35rem;
        border-radius: 0.35rem;
        background: #febe5c;
        color: #dd424b;
        text-align: center;
      }
      .next {
        margin: 0 auto 0.15rem;
        display: block;
        width: 2.1rem;
        height: 0.35rem;
        line-height: 0.35rem;
        border-radius: 0.35rem;
        background: #febe5c;
        color: #dd424b;
        text-align: center;
      }
      .revive {
        margin: auto;
        width: 2.1rem;
        height: 0.35rem;
        line-height: 0.35rem;
        background: #febe5c;
        border-radius: 0.05rem;
        color: #dd424b;
        text-align: center;
        .icon {
          display: inline-block;
          width: 0.2rem;
          height: 0.2rem;
          vertical-align: middle;
          background: url('./img/icon-revive.png') no-repeat center center;
          background-size: 100% auto;
        }
        .btn {
          display: inline-block;
          padding: 0 0.1rem;
          line-height: 0.2rem;
          background: #da3949;
          color: #febe5c;
          border-radius: 0.2rem;
          font-size: 0.14rem;
        }
      }
    }
  }
}
</style>
