<template>
    <view class="image-message" @click="imadeFullScreen">
        <image class="image" :style="{width: imageWidth + 'rpx', height: imageHeight + 'rpx'}" @load="load" :src="message.url" mode="aspectFit"></image>
    </view>
</template>

<script>
    export default {
        props: {
            message: {
                type: Object,
                default: ''
            }
        },
        data() {
            return {
                imageHeight: 0,
                imageWidth: 0,
            }
        },
        onLoad() {
            // 页面加载时执行
        },
        methods: {
            load(event) {
                if (event.detail.height > 400){
                    this.imageHeight = 400;
                }else{
                    this.imageHeight = event.detail.height
                }
                if (event.detail.width > 400){
                    this.imageWidth = 400;
                }else{
                    this.imageWidth = event.detail.width
                }
            },
            // 点击图片全屏显示
            imadeFullScreen(){
                wx.navigateTo({
                    url: '/pages/index/chat/messageComponent/fullscreen/imagePreview?url=' + this.message.url
                })
            }
        }
    }
</script>

<style scoped>
    .image-message{
    width: 100%;
    height: 100%;
    }
    .image{
        border-radius: 20rpx;
    }
</style>