<template>
    <div class="red-info">
        <img class="head" width="28" height="28" v-if="info.userHeadImg == 'phoneHead'" :src="channelInfo.defaultPhoneHeadAva">
        <img class="head" width="28" height="28" v-else-if="info.userHeadImg == 'default' || !info.userHeadImg" :src="channelInfo.defaultUserAva">
        <img class="head" width="28" height="28" v-else :src="info.userHeadImg"  alt="">
        <div class="content">
            <div class="username">{{info.userNick}}</div>
            <div class="red-box" @click="_showRed(1, info.redpacketId)">
                <div class="red">
                    <i class="icon-red"></i>
                    <div class="red-text">
                        <div class="name">{{info.filterContent}}</div>
                        <div class="get">领取红包</div>
                    </div>
                </div>
                <div class="peg">直播间普通红包</div>
            </div>
        </div>
    </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>
    .red-info{
        display: flex;
        text-align: left;

        .head {
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            margin-top: 15px;
            border-radius: 50%;
        }
        .content {
            flex: 1;
            padding: 5px 40px 5px 10px;

            .username {
                line-height: 20px;
                color: #9A9B9D;
                font-size: 10px;
            }
            .red-box{
                display: inline-block;
                min-width: 220px;
                max-width: 100%;
                line-height: 20px;
                border-radius: 5px;
                font-size: 12px;
                color: #404040;
                overflow: hidden;

                .red{
                    display: flex;
                    padding: 10px;
                    background: #fa9d3b;
                    border: 1px solid #e28f3b;

                    .icon-red{
                        flex: 0 0 35px;
                        display: inline-block;
                        vertical-align: top;
                        width: 35px;
                        height: 45px;
                        background-image: url("./img/icon-red.png");
                        background-repeat: no-repeat;
                        background-size: 35px auto;
                        background-position: center center;
                    }
                    .red-text{
                        padding-left: 10px;

                        .name, .get{
                            min-width: 100px;
                            line-height: 22px;
                            font-size: 14px;
                            color: #fff;
                            word-break: break-all;
                        }
                    }
                }
                .peg{
                    height: 20px;
                    line-height: 20px;
                    padding: 0 5px;
                    background: #fff;
                    font-size: 14px;
                    color: #ccc;
                }
            }
        }
    }
</style>