<template>
    <div class="default" 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="content-box">
                    <div class="head">
                        <img v-if="!redInfo.head" :src="channelInfo.defaultPhoneHeadAva" />
                        <img v-else-if="redInfo.head=='default'" :src="channelInfo.chatAdminAvaUrl" />
                        <img v-else :src="redInfo.head" />
                    </div>
                    <div class="name">{{redInfo.name}}</div>
                    <div class="tip">发了一个红包，金额随机</div>
                    <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>
                <div class="open" v-if="isOpen" @click="_openRed"></div>
                <div class="luck" @click="_getLuck">
                    <span>看看大家的手气</span>
                </div>
            </div>
            <luck-list v-if="showLuck" :luckInfo="luckInfo" :channelInfo="channelInfo"></luck-list>
        </div>
    </div>
</template>

<script>
const RED_TYPE = 1;
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 {
            isAjax: true,
            redInfo: {},
            luckInfo: {},
            showLuck: false
        };
    },
    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.isAjax) {
                return false;
            }
            this.isAjax = false;
            const res = await openRedpacket({
                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.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);
        }
    },
    watch: {
        showRedInfo() {
            if (this.showRedInfo.type == RED_TYPE) {
                this.isAjax = true;
                this.showLuck = false;
                this._getRed();
            }
        }
    }
};
</script>

<style lang="less" scoped>
.default {
    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%;
        .content-box {
            position: absolute;
            top: 20%;
            left: 0;
            width: 100%;
            margin-top: -45px;
            text-align: center;
            font-size: 14px;
            color: #ffe2b1;
            .head {
                margin: 0 auto 10px;
                width: 90px;
                height: 90px;
                border-radius: 50%;
                overflow: hidden;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .name {
                padding: 0 20px;
                margin-top: 10px;
            }
            .tip {
                padding: 0 20px;
                margin-top: 10px;
            }
            .rob {
                padding: 0 20px;
                margin-top: 10px;
                
                .unit {
                    font-size: 14px;
                }
            }
        }
        .open {
            position: absolute;
            bottom: 25%;
            left: 50%;
            z-index: 1;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            background: url("../img/open-red.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .luck {
            position: absolute;
            bottom: 7%;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #ffe2b1;
        }
    }
}
</style>
