<template>
    <div class="password" 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>
                </div>
                <div class="result" v-if="!isOpen">
                    <div class="tip">
                        <div v-if="redInfo.isExpire == 1">来晚了，红包已过期！</div>
                        <div v-else-if="redInfo.isRob == 1">
                            <span>{{redInfo.robAmount | floatNum}}</span>
                            <span class="unit">元</span>
                        </div>
                        <div v-else-if="redInfo.isEmpty == 0">手慢了，红包派完了！</div>
                    </div>
                    <div class="luck">
                        <span @click="_getLuck">查看大家手气</span>
                    </div>
                </div>
                <div class="open-box" v-if="isOpen">
                    <div class="prompt">{{redInfo.prompt || '可以在直播过程中发现口令哦!'}}</div>
                    <input class="pw-input" type="text" v-model="password" placeholder="请输入口令领取红包" />
                    <div class="open" @click="_openRed">抢红包</div>
                </div>
            </div>
            <luck-list v-if="showLuck" :luckInfo="luckInfo" :redInfo="redInfo" :channelInfo="channelInfo"></luck-list>
        </div>
    </div>
</template>

<script>
const RED_TYPE = 3;
import {
    robRedpacket,
    openRedpacket,
    redpacketDetail
} from "@/plugins/API/apiRed";
import { mapGetters, mapMutations } from "vuex";
import luckList from "./luckList";

export default {
    components: {
        luckList
    },
    props: {
        agentType: {}
    },
    data() {
        return {
            redInfo: {},
            luckInfo: {},
            showLuck: false,
            password: "",
            isAjax: true
        };
    },
    computed: {
        ...mapGetters({
            channelInfo: "channelInfo",
            showRedInfo: "showRedInfo"
        }),
        isOpen() {
            return (
                this.redInfo.isExpire != 1 &&
                this.redInfo.isRob != 1 &&
                this.redInfo.isEmpty != 0
            );
        }
    },
    methods: {
        ...mapMutations({
            set_showRed: "set_showRed"
        }),
        async _getRed() {
            if (this.showRedInfo.id == this.redInfo.rid) {
                return false;
            }
            this.redInfo = {};
            if (!this.isAjax) {
                return false;
            }
            this.isAjax = false;
            const res = await robRedpacket({
                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 _openRed() {
            if (this.password == "") {
                this.$layer.msg("口令不能为空！");
                return false;
            }
            if (!this.isAjax) {
                return false;
            }
            this.isAjax = false;
            const res = await openRedpacket({
                id: this.redInfo.rid,
                uin: this.channelInfo.uin,
                channelId: this.channelInfo.id,
                password: this.password,
                agentType: this.agentType
            });
            this.isAjax = true;
            if (res.code == 200 && res.errorCode == 0) {
                this.$layer.msg("获得" + res.data + "元红包");
                this.redInfo.isRob = 1;
                this.redInfo.robAmount = res.data;
            }
        },
        async _getLuck() {
            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.set_showRed(false);
        },
        _closeLuck() {
            this.set_showRed(false);
        }
    },
    watch: {
        showRedInfo() {
            if (this.showRedInfo.type == RED_TYPE) {
                this.password = "";
                this.isAjax = true;
                this.showLuck = false;
                this._getRed();
            }
        }
    }
};
</script>

<style lang="less" scoped>
.password {
    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;
            }
        }
        .result {
            text-align: center;

            .tip {
                padding: 20% 0 10%;
                font-size: 25px;
                color: #fc7d8b;
                .unit{
                    font-size: 14px;
                }
            }
            .luck {
                padding: 2% 0;
                font-size: 18px;
                color: #fc7d8b;
            }
        }
        .open-box {
            padding: 0 40px;

            .prompt {
                padding: 40px 0;
                font-size: 18px;
                color: #fc7d8b;
                text-align: center;
            }
            .pw-input {
                display: block;
                width: 100%;
                margin-bottom: 20px;
                height: 50px;
                line-height: 50px;
                border-radius: 50px;
                background: #fff;
                border: 2px solid transparent;
                outline: 0;
                text-align: center;
                font-size: 16px;

                &::-webkit-input-placeholder {
                    color: #db3849;
                }
            }
            .open {
                display: block;
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-radius: 50px;
                background: #ffbe5a;
                color: #db3849;
                margin: 20px auto;
                text-align: center;
                font-size: 16px;
            }
        }
    }
}
</style>
