<template>
	<view class="picture_message_container" @click="clickMediaItem">
		<u--image 
			:showLoading="true" 
			width="120" 
			:height="maxHeight" 
			mode="widthFix" 
			v-if="src"
			:src="src"
			@load="onLoaded" 
			@click="clickMediaItem">
			<template v-slot:loading>
				<u-loading-icon color="red"></u-loading-icon>
			</template>
		</u--image>
		<u--image 
			v-else
			:showLoading="true" 
			width="120" 
			mode="widthFix" 
			src="/static/images/sync_error.png">
		</u--image>
	</view>
</template>

<script>
	import util from "@/util"
	import md5 from "md5";
	export default {
		name: "PictureMessageContainer",
		props: {
			message: Object,
			conversationID:String,
		},
		data() {
			//console.log(this.message);
			return {
				loadingWidth: "120px",
				src:"",
				coverCachePath:"",
				coverDownloading:false,
				coverExists:false,
				coverDownloadProgress:"",
			};
		},
		computed: {
			maxHeight() {
				const imageHeight = this.message.pictureElem.sourcePicture.height;
				const imageWidth = this.message.pictureElem.sourcePicture.width;
				const aspectRatio = imageHeight / imageWidth;
				return 120 * aspectRatio;
			}
		},
		watch: {
			src(newVal, oldVal) {
				console.log(newVal,oldVal);
			}
		},
		created() {
			this.init();
		},
		methods: {
			async init(){
				const self = this;
				let url = "";
				// 如果有远程 snapshotUrl，则下载到 coverCachePath
				//const snapshotUrl = (this.message.pictureElem.snapshotPicture?.url ?? this.message.pictureElem.sourcePath );
				const snapshotUrl = this.message.pictureElem.sourcePicture?.url;
				if(!snapshotUrl){
					console.log(this.message);
					return;
				}
				//console.log(snapshotUrl);
				util.cacheFile(snapshotUrl,`${this.conversationID}`).then((fn)=>{
					self.coverDownloading = false;
					self.src = fn;
					//console.log(fn);
				});
			},
			clickMediaItem() {
				uni.previewImage({
					current: 0,
					//urls: [this.message.pictureElem.sourcePicture.url],
					urls: [this.src],
					indicator: "none",
				});
			},
			onLoaded() {
				this.loadingWidth = "auto";
			},
		},
	};
</script>

<style lang="scss" scoped>
	.picture_message_container {
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}
</style>