<template>
    <view class="">
        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
        <view class="msg--image" :class="isRemote ? 'left': 'right'">
            <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'

    export default {
        name: 'showImage',
        props: {
            message: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            isGroup: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            isRemote() {
                return this.message.messageDirection == 2
            },
            content() {
                return this.message.content
            },
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        methods: {
            previewImage() {
                if (this.content.local) {
                    uni.previewImage({
                        urls: [
                            this.content.local
                        ],
                        success: (e) => {
                            console.log(e);
                        },
                        fail: (er) => {
                            console.log(er);
                        }
                    })
                } else {
                    RongIMLib.downloadMediaMessage(this.messageId, {
                        success: (path) => {
                            this.content.local = path
                            uni.previewImage({
                                urls: [
                                    path
                                ],
                                success: (e) => {
                                    console.log(e);
                                },
                                fail: (er) => {
                                    console.log(er);
                                }
                            })
                        },
                        progress: (progress, messageId) => {
                            console.log('progress', progress);
                        },
                        cancel: (messageId) => {
                            console.log('cancel', messageId);
                        },
                        error: (errorCode, messageId) => {
                            console.log('errorCode', errorCode);
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .name {
        font-size: 24rpx;
        color: $text-gray-m;
    }

    .msg--image {
        .img {
            width: 180rpx;
        }

        &.left {
            .img {
                border-radius: 0 10rpx 10rpx 10rpx;
            }
        }

        &.right {
            .img {
                border-radius: 10rpx 0 10rpx 10rpx;
            }
        }

    }
</style>
