<template>
	<div class="flex p-4" :class="{ 'border-b': !showDetails }">
		<Avatar :size="48" :src="source.faceURL" :desc="source.nickname"
			@click="toDesignatedMoments(source.userID, source.nickname, source.faceURL)" />
		<div class="ml-3 flex-1 overflow-hidden">
			<div class="mb-1 break-all text-[#6085B1]">{{ source.nickname }}</div>
			<div class="w-full">
				<span class="break-all">{{ source.content.text }}</span>
			</div>

			<div class="mx-[-4px] flex flex-wrap" v-if="source.content.metas.length > 0">
				<template v-if="source.content.type === 0">
					<van-image class="h-[90px] w-[90px] p-1" fit="cover" :src="item.original"
						v-for="item in source.content.metas" @click="imagePreview(item.original)" />
				</template>
				<template v-if="source.content.type === 1">
					<div v-for="item in source.content.metas" class="relative"
						@click="showVideoPreview(item.original, item.thumb)">
						<van-image class="h-[90px] w-[90px] p-1" fit="cover" :src="item.thumb" />
						<img class="absolute top-1/2 left-1/2 h-[36px] w-[36px] translate-x-[-50%] translate-y-[-50%]"
							:src="play_icon" alt="" />
					</div>
				</template>
			</div>

			<div class="text-xs text-sub-text" v-if="source.atUsers.length > 0">
				{{ atStr }}
			</div>

			<div class="mt-1 flex flex-row items-center justify-between">
				<div class="flex flex-row items-center">
					<div class="text-xs text-sub-text">{{ createTime }}</div>
					<img v-if="source.permission === 1" class="ml-2 h-[10px] w-[9px]" :src="private_img" alt="" />
					<div v-if="source.permission === 1" class="ml-1 text-xs text-[#6085B1]">
						{{ $t('momentsVisibilityList.privacy') }}
					</div>
					<img v-if="source.permission === 2 || source.permission === 3" class="ml-2 h-[10px] w-[15px]"
						:src="assign" alt="" />
					<div v-if="source.permission === 2 || source.permission === 3" class="ml-1 text-xs text-[#6085B1]">
						{{ $t('momentsVisibilityList.partly') }}
					</div>
					<div v-if="source.userID === userStore.selfInfo.userID" class="ml-2 text-xs text-[#6085B1]"
						@click="() => emit('tryDeleteMoment', source.workMomentID)">
						{{ $t('buttons.delete') }}
					</div>
				</div>
				<van-popover placement="left" :show-arrow="false" v-model="showActions" actions-direction="horizontal">
					<div class="flex flex-row bg-[#4C4C4E] px-4.5 py-2">
						<div class="mr-4 flex flex-row items-center justify-center" @click="likeOrNot">
							<img class="mr-1 h-4 w-4" :src="likeIcon" alt="" />
							<div class="text-xs text-white">{{ $t('momentsTips.praise') }}</div>
						</div>
						<div class="flex flex-row items-center justify-center"
							@click="emit('startComment', source.workMomentID)">
							<img class="mr-1 h-4 w-4" :src="commit" alt="" />
							<div class="text-xs text-white">{{ $t('momentsTips.comment') }}</div>
						</div>
					</div>
					<template #reference>
						<img class="h-[14px] w-[22px]" :src="more" alt="" @click="showActions = true" />
					</template>
				</van-popover>
			</div>

			<div class="mt-1 flex flex-row items-center justify-start bg-[#F7F7F7] py-1 px-2 border-b" v-if="likeStr">
				<img class="mr-1 h-4 w-4" :src="liked" alt="" />
				<div class="text-xs text-sub-text">{{ likeStr }}</div>
			</div>

			<div class=" overflow-hidden">
				<CommentItem v-for="item in source.comments" :key="item.commentID" :comment="item"
					:momentsUserID="source.userID" @deleteComent="deleteComent"
					@startComment="() => emit('startComment', source.workMomentID, item)" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import assign from '@/assets/images/moments/assign.png'
	import more from '@/assets/images/moments/more.png'
	import like from '@/assets/images/moments/like.png'
	import liked from '@/assets/images/moments/liked.png'
	import commit from '@/assets/images/moments/commit.png'
	import private_img from '@/assets/images/moments/private.png'
	import play_icon from '@/assets/images/chating_message_video_play.png'

	import Avatar from '@/components/Avatar/index.vue'
	import CommentItem from './CommentItem.vue'
	import { WorkMoments } from '@/types/moment'
	import { deleteComment, likeMoment } from '@/api/moments'
	import { showImagePreview } from 'vant'
	import useUserStore from '@/store/modules/user'
	import { formatConversionTime } from '@/utils/imCommon'
	import showVideoPreview from '@/utils/showVideoPreview'
	import useContactStore from '@/store/modules/contact'

	type ConversationItemProps = {
		source : WorkMoments
		showDetails ?: Boolean
	}

	const emit = defineEmits(['startComment', 'tryDeleteMoment'])
	const props = defineProps<ConversationItemProps>()

	const { t } = useI18n()
	const router = useRouter()
	const userStore = useUserStore()
	const contactStore = useContactStore()
	const showActions = ref(false)

	const atStr = computed(
		() =>
			t('momentsTips.mention') +
			':' +
			props.source.atUsers.map((user) => user.nickname).join('、'),
	)
	const likeStr = computed(() =>
		props.source.likeUsers.map((user) => user.nickname).join('、'),
	)
	const isLiked = computed(() =>
		props.source.likeUsers.some((item) => item.userID === userStore.selfInfo.userID),
	)
	const likeIcon = computed(() => (isLiked.value ? liked : like))
	const createTime = computed(() => formatConversionTime(props.source.createTime))

	const deleteComent = async (commentID : string) => {
		await deleteComment(props.source.workMomentID, commentID)
	}

	const likeOrNot = async () => {
		await likeMoment({ workMomentID: props.source.workMomentID, like: !isLiked.value });
		showActions.value = false;
	}


	const imagePreview = (target : string) => {
		const images = props.source.content.metas.map((item) => item.original)
		const index = images.indexOf(target)
		showImagePreview({ images, startPosition: index, loop: false })
	}

	const toDesignatedMoments = (userID : string, nickname : string, faceURL : string) => {
		if (props.showDetails) return
		contactStore.setUserCardData({
			baseInfo: {
				userID,
				nickname,
				faceURL,
			},
		})
	}
</script>

<style lang="scss" scoped></style>