<template>
    <view class="msg--text">
        <text class="name" v-if="!guest && name">{{ name }}</text>
        <view>
            <text class="im--text" :class="guest ? 'right': 'left'" v-if="message.mediaType == '1'">
                <u-icon name="camera" /> {{ message.connected ? '通话时长' + message.duration : '未接通' }}
            </text>
            <text class="im--text" :class="guest ? 'right': 'left'" v-else>
                <u-icon name="phone" /> {{ message.connected ? '通话时长' + message.duration : '未接通' }}
            </text>
        </view>
    </view>
</template>
<!--  msg 
{
    "message": "1",
    "objectName": "RC:InfoNtf",
    "userInfo": {
        "userId": "10051",
        "name": "Jason.电信",
        "extra": "",
        "portraitUrl": "http://storage.zh.shangkelian.cn/uploads/2022/02/16/29b13f5301694721ad7acd8b8b67bbd9.jpg"
    }
}
 -->
<script>
    export default {
        name: 'showText',
        props: {
            msg: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            name: {
                type: String,
                default: ''
            },
            guest: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            message() {
                return JSON.parse(this.msg.message)
            }
        },
        mounted() {
            console.log(this.message);
        }
    }
</script>

<style scoped lang="scss">
    .msg--text {
        .name {
            font-size: 26rpx;
            color: $text-gray-m;
            display: inline-block;
        }

        .im--text {
            max-width: 508rpx;
            padding: 20rpx;
            line-height: 46rpx;
            font-size: 32rpx;
            color: $text-color;
            display: inline-block;
            word-break: break-all;

            &.left {
                border-radius: 0 20rpx 20rpx 20rpx;
                background: white;
            }

            &.right {
                border-radius: 20rpx 0 20rpx 20rpx;
                background: $main-color;
                color: white;
            }
        }
    }
</style>
