<template>
    <div>
        <div class="business-list" v-show="list.length">
            <div
                class="item"
                v-for="(item,index) in list"
                :key="index"
                @click="_showRed(item.redpacketId)"
            ></div>
            <div class="receive">
                待领取
                <i>{{rodNum}}</i>
            </div>
        </div>
        <transition name="fade">
            <div v-show="showRedInfo.type == 5 && showRedInfo.id && showRed">
                <div class="business" @click="_closeRed">
                    <div class="business-box" @click.stop>
                        <i class="close" @click="_closeRed"></i>
                        <div class="info">
                            <red-info :agentType="agentType"></red-info>
                        </div>
                        <div class="list">
                            <red-list :list="list"></red-list>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
const RED_TYPE = 5;
import { mapGetters, mapMutations } from "vuex";
import redInfo from "./info";
import redList from "./list";
export default {
    components: {
        redInfo,
        redList
    },
    props: {
        agentType: {},
        businessList: {
            default(){
                return [];
            }
        }
    },
    data() {
        return {};
    },
    computed: {
        ...mapGetters({
            channelInfo: "channelInfo",
            userInfo: "userInfo",
            showRed: "showRed",
            showRedInfo: "showRedInfo"
        }),
        list() {
            let arr = [];
            for (let key in this.businessList) {
                if (this.businessList[key].isRob == 2) {
                    arr.push(this.businessList[key]);
                } else {
                    arr.unshift(this.businessList[key]);
                }
            }
            return arr;
        },
        rodNum() {
            let num = 0;
            for (let key in this.businessList) {
                let item = this.businessList[key];
                if (
                    item.isExpire != 1 &&
                    item.isRob != 1 &&
                    item.isEmpty != 0
                ) {
                    num++;
                }
            }
            return num;
        }
    },
    mounted() {},
    methods: {
        ...mapMutations({
            set_showRed: "set_showRed",
            set_showRedInfo: "set_showRedInfo"
        }),
        _showRed(id) {
            if (this.userInfo.isSafe) {
                this.set_showRedInfo({
                    type: RED_TYPE,
                    id: id
                });
            } else {
                this.$layer.msg("登陆后才能领取红包哦!~");
                this.$Bus.$emit("bus-showLogin", true);
            }
        },
        _closeRed() {
            this.set_showRed(false);
        }
    }
};
</script>

<style lang="less" scoped>
.business-list {
    position: relative;
    display: block;
    width: 40px;
    height: 65px;
    margin-bottom: 5px;
    .item {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        margin: auto;
        width: 40px;
        height: 50px;
        background: url("../img/business-red.png") no-repeat center center;
        background-size: 100% 100%;
    }
    .receive {
        position: absolute;
        bottom: 0;
        left: -10px;
        display: block;
        height: 25px;
        line-height: 25px;
        width: 60px;
        background: url("../img/icon-yun.png") no-repeat center right;
        background-size: auto 100%;
        text-align: center;
        font-size: 10px;
        i {
            color: #f5515f;
        }
    }
}
.business {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background-color: rgba(0, 0, 0, 0.3);

    .business-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        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%;
        }
        .info {
            position: relative;
            width: 100%;
            height: calc(100% - 75px);
            overflow: hidden;
        }
        .list {
            height: 75px;
            padding-top: 10px;
        }
    }
}
</style>
