<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>
	</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;
			},
		},
		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 key = md5(snapshotUrl || '');
				this.coverCachePath = `_doc/${this.conversationID}/img_${key}.jpg`;
				if (typeof plus === 'undefined' || !this.coverCachePath) return;
				try {
					// 检查封面是否存在
					const coverExists = await util.fileExsit(self.coverCachePath);
					this.coverExists = !!coverExists;
					if (this.coverExists) {
						this.src = this.coverCachePath;
						return;
					}
					if (!snapshotUrl) {
						this.src="/static/images/sync_error.png";
						return;
					}
					this.coverDownloading = true;
					await new Promise((resolve, reject) => {
						util.downloadFile(snapshotUrl, self.coverCachePath, function(localPath) {
							self.coverDownloading = false;
							self.coverExists = true;
							resolve(localPath);
						}, function(err) {
							self.coverDownloading = false;
							reject(err);
						}, function(progress) {
							self.coverDownloadProgress = progress;
						});
					});
				} catch (e) {
					this.coverDownloading = false;
				}
			},
			clickMediaItem() {
				uni.previewImage({
					current: 0,
					urls: [this.message.pictureElem.sourcePicture.url],
					indicator: "none",
				});
			},
			onLoaded() {
				this.loadingWidth = "auto";
			},
		},
	};
</script>

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

		.play_icon {
			width: 48px;
			height: 48px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.video_duration {
			position: absolute;
			bottom: 12rpx;
			right: 24rpx;
			color: #fff;
		}
	}
</style>