<template>
	<view @click="onClick">
		<image v-if="widthL" :style="{width, height}" :src="_src" mode="widthFix"></image>
		<image v-else :style="{width, height}" :src="_src" mode="heightFix"></image>
	</view>
</template>

<script>
	export default {
		name:"chat-item-image",
		props: {
			src: '',
		},
		data() {
			return {
				width: '400rpx',
				height: '400rpx',
				_src: '',
				widthL: true
			};
		},
		methods: {
			onClick() {
				this.$emit("click")
			}
		},
		watch: {
			src: {
				immediate: true,
				handler(val){
					
					uni.getImageInfo({
						src: val,
						success: (image)=> {
							this._src = image.path
							console.log("image", image);
							const maxWidth = uni.upx2px(300)
							const maxHeight = uni.upx2px(300)
							// 是否越界
							const wR = image.width < maxWidth
							const hR  = image.height < maxHeight
							// 获得长边
							const wL = image.width > image.height
							console.log(image.width,image.height,wL);
							if(wR && hR){
								this.width = image.width + 'px'
								this.height = image.height + 'px'
							}else {
								this.widthL = wL
								this.width = maxWidth + 'px'
								this.height = maxHeight + 'px'
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">

</style>