<template>
    <div class="chat-img">
        <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="img">
                <img class="seeImg"  height="150" v-photoswipe="{group: 'chat'}" :src="info.filterContent">
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        props: {
            info: {}
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
            })
        },
    }
</script>

<style lang="less" scoped>
    .chat-img{
        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;
            }
            .img {
                display: inline-block;
                max-width: 80%;
                padding: 10px;
                background: #fff;
                border-radius: 5px;

                img{
                    max-width: 100%;
                    max-height: 150px;
                }
            }
        }
    }
</style>