<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="head-box">
                    <div class="title">
                        竞答红包
                        <div class="jackpot">奖池{{redInfo.amount | floatNum}}元</div>
                    </div>
                </div>
                <div class="content">
                    <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">
                            <li
                                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>
                            </li>
                        </div>
                        <div class="revive">
                            <i class="icon"></i>
                            <span>我的复活卡</span>
                            <em class="u-num">{{redInfo.reviveCard}}</em> 张
                        </div>
                    </div>
                    <div class="complete-box" v-else-if="redInfo.status == 2">
                        <div class="complete">
                            <div class="tip">
                                <span>{{redInfo.redInfo.amount | floatNum}}</span>
                                <span>元</span>
                            </div>
                            <div class="luck" @click="_getLuck">查看大家手气</div>
                        </div>
                        <div class="next" v-if="redIndex" @click="nextRed">领下一个红包</div>
                    </div>
                    <div class="complete-box" v-else-if="redInfo.status == 3">
                        <div class="complete">
                            <div class="tip">很遗憾答题失败了，下次努力！</div>
                            <div class="luck" @click="_getLuck">查看大家手气</div>
                        </div>
                        <div class="next" v-if="redIndex" @click="nextRed">领下一个红包</div>
                    </div>
                    <div class="open-box" v-else-if="redInfo.status == 4">
                        <div class="open" @click="_openRed"></div>
                        <div class="tip">立即领取红包</div>
                    </div>
                    <div class="complete-box" v-else-if="redInfo.status == 5">
                        <div class="complete">
                            <div class="tip">很遗憾，下次努力！</div>
                            <div class="tip">是否复活卡继续答题？</div>
                        </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="complete-box" v-else-if="redInfo.status == 6">
                        <div class="complete">
                            <div class="tip">很遗憾，下次努力！</div>
                            <div class="luck" @click="_getLuck">查看大家手气</div>
                        </div>
                        <div class="share" @click="_shareShow">分享获得一张复活卡</div>
                        <div class="next" v-if="redIndex" @click="nextRed">领下一个红包</div>
                    </div>
                    <div class="complete-box" v-else-if="redInfo.status == 7">
                        <div class="complete">
                            <div class="tip">来晚了，红包已被抢完！</div>
                            <div class="luck" @click="_getLuck">查看大家手气</div>
                        </div>
                        <div class="next" v-if="redIndex" @click="nextRed">领下一个红包</div>
                    </div>
                </div>
            </div>
            <luck-list
                v-if="showLuck"
                :luckInfo="luckInfo"
                :redInfo="redInfo"
                :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 {
    components: {
        luckList
    },
    props: {
        agentType: {},
        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 &&
                this.showRedInfo.id == this.redInfo.rid
            ) {
                this._getRed();
            }
        },
        nextRed() {
            this.del_answerList();
            let nextInfo = this.answerList[this.redIndex - 1];
            if (nextInfo) {
                let 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,
                agentType: this.agentType
            });
            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,
                agentType: this.agentType
            });
            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,
                agentType: this.agentType
            });
            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,
                agentType: this.agentType
            });
            this.isAjax = true;
            if (res.code == 200 && res.errorCode == 0) {
                this.$layer.msg("获得" + res.data + "元红包");
                this.redInfo.status = 2;
                this.redInfo.redInfo = {
                    amount: res.data
                };
            }
        },
        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: 90%;
        max-height: 80%;
        max-width: 400px;
        .close {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 2;
            width: 20px;
            height: 20px;
            background: url("../img/red-close.png") no-repeat center center;
            background-size: 100% 100%;
        }
    }
    .red-info {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("../img/red-bg.png") no-repeat 0 0;
        background-size: 100% 100%;
        .head-box {
            display: table;
            width: 100%;
            height: 22%;
            text-align: center;
            .title {
                display: table-cell;
                vertical-align: middle;
                font-size: 20px;
                color: #fff;
                .jackpot {
                    margin-top: 5px;
                    font-size: 22px;
                    color: #febe5c;
                }
            }
        }
        .content {
            padding: 0 20px;
            width: 100%;
            height: 78%;
            overflow: auto;
            .topic-box {
                .subject {
                    line-height: 20px;
                    color: #fff;
                    font-size: 16px;
                    margin-bottom: 20px;
                }
                .option-list {
                    padding: 10px;
                    min-height: 170px;
                    max-height: 200px;
                    overflow-y: auto;
                    background: #fff;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    .item {
                        display: block;
                        margin-bottom: 10px;
                        min-height: 40px;
                        line-height: 20px;
                        padding: 10px;
                        border: 1px solid #ffd5da;
                        border-radius: 25px;
                        color: #dd424b;
                        &.no {
                            border-color: #ffcbd5;
                            background-color: #ffcbd5;
                        }
                        &.yes {
                            border-color: #b3ebab;
                            background-color: #c6e9c1;
                            color: #4fab41;
                        }
                    }
                }
                .revive {
                    height: 50px;
                    line-height: 50px;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                    background-color: #febe5c;
                    color: #ffffff;
                    text-align: center;
                    font-size: 16px;
                    overflow: hidden;
                    .icon {
                        display: inline-block;
                        width: 35px;
                        height: 35px;
                        vertical-align: middle;
                        background: url("../img/icon-revive.png") no-repeat
                            center center;
                    }
                }
            }
            .open-box {
                text-align: center;
                .open {
                    display: block;
                    margin: 45px auto;
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    background: url("../img/open-red.png") no-repeat center
                        center;
                    background-size: 100% 100%;
                }
                .tip {
                    line-height: 25px;
                    font-size: 14px;
                    color: #fff;
                }
            }
            .complete-box {
                .complete {
                    padding: 30px 0;
                    text-align: center;
                    .tip {
                        margin: 15px 0;
                        line-height: 20px;
                        font-size: 20px;
                        color: #febe5c;
                        .unit {
                            font-size: 14px;
                        }
                    }
                    .luck {
                        margin: 15px 0;
                        line-height: 14px;
                        font-size: 14px;
                        color: #fff;
                    }
                }
                .share {
                    display: block;
                    margin: 0 auto 12px;
                    max-width: 240px;
                    height: 50px;
                    line-height: 50px;
                    border-radius: 50px;
                    background: #f5dbb0;
                    color: #dd424b;
                    text-align: center;
                }
                .revive {
                    background: #febe5c;
                    height: 70px;
                    line-height: 70px;
                    border-radius: 5px;
                    color: #dd424b;
                    text-align: center;
                    .icon {
                        display: inline-block;
                        width: 35px;
                        height: 35px;
                        vertical-align: middle;
                        background: url("../img/icon-revive.png") no-repeat
                            center center;
                    }
                    .btn {
                        display: inline-block;
                        padding: 0 10px;
                        line-height: 30px;
                        background: #da3949;
                        color: #febe5c;
                        border-radius: 30px;
                        font-size: 13px;
                    }
                }
                .next {
                    display: block;
                    margin: auto;
                    max-width: 240px;
                    height: 50px;
                    line-height: 50px;
                    border-radius: 50px;
                    background: #febe5c;
                    color: #dd424b;
                    text-align: center;
                }
            }
        }
    }
}
</style>
