<template>
    <div class="box">
        <div class="content-box" v-show="redInfo.rid">
            <div class="head">
                <img v-if="redInfo.businessLogoUrl == ''" :src="channelInfo.defaultPhoneHeadAva" />
                <img
                    v-else-if="redInfo.businessLogoUrl == 'default'"
                    :src="channelInfo.chatAdminAvaUrl"
                />
                <img v-else :src="redInfo.businessLogoUrl" alt />
            </div>
            <div class="name">来自{{redInfo.name || '管理员'}}的红包</div>
            <div class="tip">{{redInfo.blessing || '恭喜发财，大吉大利！'}}</div>
            <div class="open-box" v-if="isOpen">
                <div class="open" v-if="wait <= 0" @click="_openRed">领取红包</div>
                <div class="wait" v-else>{{countDowmInfo.minute}}:{{countDowmInfo.second}}</div>
            </div>
            <div v-else>
                <div class="rob">
                    <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="link" v-if="redInfo.advertUrlSwitchState">
                    <a :href="redInfo.advertLink">{{redInfo.advertBtName}}</a>
                </div>
            </div>
        </div>
        <div class="advert" v-if="redInfo.advert">
            <img :src="redInfo.advert" alt />
        </div>
    </div>
</template>

<script>
const RED_TYPE = 5;
import { robRedpacket, openBusinessRedpacket } from "@/plugins/API/apiRed";
import { mapGetters, mapMutations } from "vuex";

export default {
    props: {
        agentType: {}
    },
    data() {
        return {
            redInfo: {},
            wait: 6,
            isAjax: true,
            timer: null,
            redTimer: null
        };
    },
    computed: {
        ...mapGetters({
            channelInfo: "channelInfo",
            showRedInfo: "showRedInfo"
        }),
        isOpen() {
            return (
                this.redInfo.isExpire != 1 &&
                this.redInfo.isRob != 1 &&
                this.redInfo.isEmpty != 0
            );
        },
        countDowmInfo() {
            let time = this.wait;
            return {
                minute:
                    parseInt((time / 60) % 60) >= 10
                        ? parseInt((time / 60) % 60)
                        : "0" + parseInt((time / 60) % 60),
                second:
                    parseInt(time % 60) >= 10
                        ? parseInt(time % 60)
                        : "0" + parseInt(time % 60)
            };
        }
    },
    methods: {
        _getRed() {
            this.redInfo = {};
            clearTimeout(this.redTimer);
            this.redTimer = setTimeout(() => {
                this._robRedpacket();
                this.redTimer = null;
            }, 500);
        },
        async _robRedpacket() {
            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;
                this._timerWait(res.data.wait);
            }
        },
        async _openRed() {
            if (!this.isAjax) {
                return false;
            }
            this.isAjax = false;
            const res = await openBusinessRedpacket({
                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.$Bus.$emit("bus-editBusinessLis", 1);
                this.$layer.msg("获得" + res.data + "元红包");
                this.redInfo.isRob = 1;
                this.redInfo.robAmount = res.data;
            }
        },
        _timerWait(wait) {
            this.wait = wait;
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.wait--;
                if (this.wait <= 0) {
                    this.wait = 0;
                    clearInterval(this.timer);
                }
            }, 1000);
        }
    },
    watch: {
        showRedInfo() {
            if (this.showRedInfo.type == RED_TYPE) {
                this.isAjax = true;
                this._getRed();
            }
        },
        redInfo() {
            if (this.redInfo.rid) {
                if (this.redInfo.isExpire == 1) {
                    this.$Bus.$emit("bus-editBusinessLis", 3);
                } else if (this.redInfo.isRob == 1) {
                    this.$Bus.$emit("bus-editBusinessLis", 1);
                } else if (this.redInfo.isEmpty == 0) {
                    this.$Bus.$emit("bus-editBusinessLis", 4);
                } else if (
                    this.redInfo.isExpire != 1 &&
                    this.redInfo.isRob != 1 &&
                    this.redInfo.isEmpty != 0
                ) {
                    this.$Bus.$emit("bus-editBusinessLis", 2);
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
.box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../img/red-bg.png") no-repeat 0 0;
    background-size: 100% 100%;
    .content-box {
        position: absolute;
        top: 20%;
        left: 0;
        z-index: 1;
        width: 100%;
        margin-top: -45px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        .head {
            margin: 0 auto 10px;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            overflow: hidden;
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .name {
            line-height: 20px;
            margin-top: 5px;
        }
        .tip {
            line-height: 20px;
            margin-top: 5px;
        }
        .open-box {
            margin-top: 10px;
            .open {
                margin: auto;
                width: 240px;
                height: 40px;
                line-height: 40px;
                border-radius: 40px;
                text-align: center;
                background-color: #febe5c;
                color: #dd424b;
                font-size: 14px;
            }
            .wait {
                margin: auto;
                width: 240px;
                height: 40px;
                line-height: 40px;
                border-radius: 40px;
                text-align: center;
                background-color: #febe5c;
                color: #dd424b;
                font-size: 16px;
            }
        }
        .rob {
            line-height: 30px;
            margin-top: 10px;
            color: #febe5c;
            font-size: 25px;
            .unit {
                font-size: 14px;
            }
        }
        .link {
            margin-top: 10px;
            a {
                display: block;
                margin: auto;
                width: 240px;
                height: 40px;
                line-height: 40px;
                border-radius: 40px;
                text-align: center;
                background-color: #febe5c;
                color: #dd424b;
                font-size: 14px;
            }
        }
    }
    .advert {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 8px;
        width: 100%;
        img {
            display: block;
            width: 100%;
            max-height: 200px;
        }
    }
}
</style>
