<template>
    <div class="get-red" @click="_showRed(1, info.redpacketId)">
        <i class="icon-red"></i>
        {{info.userNick}}领取了
        <em>{{info.redFrom}}</em>
        的
        <em>{{info.money}}</em>
        元红包
    </div>
</template>

<script>
    import {mapGetters,mapMutations} from 'vuex'
    export default {
        props: {
            info: {}
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'userInfo': 'userInfo',
            })
        },
        methods: {
            ...mapMutations({
                'set_showRedInfo': 'set_showRedInfo'
            }),
            _showRed(type, id){
                let obj = {
                    type: type,
                    id: id,
                };
                if(this.userInfo.id){
                    this.set_showRedInfo(obj)
                }else{
                    this.$layer.msg('登陆后才能领取红包哦!~');
                    this.$Bus.$emit('bus-showLogin', true);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .get-red{
        display: inline-block;
        max-width: 90%;
        line-height: 20px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        background: rgba(0,0,0,0.2);
        text-align: center;

        .icon-red{
            display: inline-block;
            vertical-align: top;
            width: 20px;
            height: 20px;
            background-image: url("./img/icon-red.png");
            background-repeat: no-repeat;
            background-size: 15px auto;
            background-position: center center;
        }
        em{
            color: #d84e43;
        }
    }
</style>