<template>
    <view class="">
        <text class="name" v-if="!guest && name">{{ name }}</text>
        <view class="msg--image" :class="guest ? 'right': 'left'">
            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'showImage',
        props: {
            msg: {
                type: Object,
                default: () => {
                    return {
                        local: '',
                        remote: '',
                        objectName: '',
                        thumbnail: '',
                        isFull: false
                    }
                }
            },
            guest: {
                type: Boolean,
                default: true
            },
            name: {
                type: String,
                default: ''
            }
        },
        methods: {
            previewImage() {
                uni.previewImage({
                    urls: [
                        this.msg.remote
                    ],
                    current: 1
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .name {
        font-size: 24rpx;
        line-height: 34rpx;
        color: $text-gray-m;
        padding-bottom: 10rpx;
    }
    
    .msg--image {
        // padding: 20rpx;

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

        &.right {
            border-radius: 20rpx 0 20rpx 20rpx;
            // background: #34CE98;
        }

        .img {
            width: 150rpx;
            border-radius: 10rpx;
        }
    }
</style>
