<script setup lang="ts">
	import Avatar from '@/components/Avatar/index.vue';
	import type { MessageItem } from 'open-im-sdk-wasm/lib/types/entity';
	import { showImagePreview } from 'vant';

	const emit = defineEmits([]);
	const props = defineProps<{ source : MessageItem }>();

	// 头像地址
	const senderFaceUrl = computed(() => {
		try {
			return props.source.senderFaceUrl || '';
		} catch (error) {
			console.error('Failed to compute senderFaceUrl:', error);
			return '';
		}
	});

	// 通知内容
	const notifyContent = computed(() => {
		try {
			const detail = props.source.notificationElem.detail;
			return detail ? JSON.parse(detail) : {};
		} catch (error) {
			console.error('Failed to parse notificationElem.detail:', error);
			return {};
		}
	});

	// 点击图片预览
	const clickMediaItem = (url : string) => {
		if (!url) {
			console.error('Invalid URL:', url);
			return;
		}
		showImagePreview({
			images: [url],
			startPosition: 0,
			loop: false,
		});
	};
</script>

<template>
	<div class="flex px-[22px] py-3">
		<Avatar is-notification :src="senderFaceUrl" :size="42" />
		<div class="flex-1 ml-3 overflow-hidden">
			<div class="mt-2 rounded bg-white px-3 py-2">
				<div class="mt-2 break-all text-xs text-[#000]">{{ notifyContent.text }}</div>
				<img class="mt-2"
					@click="notifyContent.pictureElem?.bigPicture?.url && clickMediaItem(notifyContent.pictureElem.bigPicture.url)"
					:src="notifyContent.pictureElem?.bigPicture?.url" v-if="notifyContent.pictureElem?.bigPicture?.url"
					alt="Preview Image" />
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	/* 可添加必要的样式 */
</style>