<template>
<div>
    <div class="answer-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>{{list.length}}</i>
        </div>
    </div>
    <transition name="fade">
        <div v-show="showRedInfo.type == 4 && showRedInfo.id && showRed">
            <red-info :agentType="agentType" :answerList="list"></red-info>
        </div>
    </transition>
</div>
</template>

<script>
const RED_TYPE = 4;
import { mapGetters, mapMutations } from "vuex";
import redInfo from './info'
export default {
    components: {
        redInfo,
    },
    props: {
        agentType: {},
        answerList: {
            default(){
                return [];
            }
        },
    },
    data() {
        return {};
    },
    computed: {
        ...mapGetters({
            channelInfo: "channelInfo",
            userInfo: "userInfo",
            showRed: "showRed",
            showRedInfo: "showRedInfo"
        }),
        list(){
            let list = this.answerList.sort((a,b) => {
                return b.redpacketId - a.redpacketId;
            })
            return list;
        }
    },
    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>
.answer-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/answer-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;
        }
    }
}
</style>
