<template>
    <div class="chat-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 v-if="info.replyContent" class="text" @click="_reply(info.id,info.userNick)">
                <div class="quote">「 {{info.replyNick}}：<span v-html="$options.filters.emojiParse(info.replyContent,30)"></span>」</div>
                <div class="reply">
                    　回复：<span :style="{color: info.contentColor}" v-html="$options.filters.emojiParse(info.filterContent,30)"></span>
                </div>
            </div>
            <div v-else class="text" @click="_reply(info.id,info.userNick)">
                <div :style="{color: info.contentColor}" v-html="$options.filters.emojiParse(info.filterContent,30)"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        props: {
            info: {}
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
            })
        },
        methods: {
            _reply(id, name){
                let obj = {
                    id: id,
                    name: name
                }
                this.$Bus.$emit('bus-setReply', obj)
            },
        }
    }
</script>

<style lang="less" scoped>
    .chat-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: 0 40px 0 10px;

            .username {
                line-height: 20px;
                color: #9A9B9D;
                font-size: 10px;
            }
            .text {
                position: relative;
                display: inline-block;
                min-height: 20px;
                line-height: 20px;
                padding: 5px 10px;
                background: #fff;
                border-radius: 5px;
                font-size: 12px;
                color: #404040;
                word-break: break-all;
                vertical-align: top;

                &:before, &:after{
                    content: '';
                    display: block;
                    position: absolute;
                    z-index: 0;
                }
                &>div{
                    position: relative;
                    z-index: 1;
                }
                .quote{
                    padding: 5px 0;
                    border-bottom: 1px solid #e0e0e0;
                    color: #999;
                }
                .reply{
                    padding: 5px 0;
                }
            }
        }
    }
</style>
<style lang="less">
    .chat-info{
        .content{
            
        }
    }
</style>