<template>
	<view class="face_message_container bg_container">
		<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: "FaceMessageRender",
		components: {},
		props: {
			message: Object,
			conversationID:String,
		},
		data() {
			//console.log(this.message);
			return {
				loadingWidth: "120px",
				maxHeight:'120px',
				src:""
			};
		},
		computed: {
			getImgUrl() {
				return (
					this.message.FaceElem?.data ??
					this.message.FaceElem.index
				);
			}
		},
		created() {
			this.init();
		},
		methods: {
			async init(){
				const self = this;
				const snapshotUrl = this.message.FaceElem.data;
                // 检查封面是否存在
                util.cacheFile(snapshotUrl,'face').then((fn)=>{
                    self.src = fn;
                });
			},
			onLoaded() {
				this.loadingWidth = "auto";
			}
		},
	};
</script>

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