<template>
	<div class="flex p-4" :class="{ 'border-b': border }" @click="toDetails(props.source.workMomentID)">
		<Avatar :size="48" :src="opItem.faceURL" :desc="opItem.nickname" />
		<div class="ml-3 flex flex-1 flex-row items-center justify-between overflow-hidden">
			<div class="flex flex-col">
				<div>{{ opItem.nickname }}</div>
				<div class="flex-1 text-sm">
					<div class="flex flex-row items-center" v-if="source?.type === 1">
						<img class="h-[13px] w-[13px]" :src="like" alt="" />
						<span>{{ $t('momentsTips.likedForYou') }}</span>
					</div>
					<span v-if="source?.type === 2">{{ $t('momentsTips.mentionedYou') }}</span>
					<span v-if="source?.type === 3 && source?.comments[0].replyUserID === ''">
						{{ `${$t('momentsTips.commentYou')}：${source?.comments[0].content}` }}
					</span>
					<span v-if="source?.type === 3 && source?.comments[0].replyUserID !== ''" class="break-all">
						{{ source?.comments[0].nickname }}
						<span class="text-primary">{{ $t('buttons.reply') }}</span>
						{{ `${source?.comments[0].replyNickname}：${source?.comments[0].content}` }}
					</span>
				</div>
				<div class="mt-2 text-xs text-sub-text">{{ createTime }}</div>
			</div>
			<img v-if="getImage" class="ml-1 h-[62px] w-[62px] shrink-0" :src="getImage" alt="" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import like from '@/assets/images/moments/like.png'
	import Avatar from '@/components/Avatar/index.vue'
	import { WorkMoments } from '@/types/moment'
	import { formatConversionTime } from '@/utils/imCommon'
	const router = useRouter()

	type IMessageItemProps = {
		source : WorkMoments
		border ?: boolean
	}
	const props = defineProps<IMessageItemProps>()
	const createTime = computed(() => {
		if (props.source?.type === 3) {
			return formatConversionTime(props.source.comments[0].createTime)
		}
		return formatConversionTime(props.source.createTime)
	})
	const toDetails = (workMomentID : string) => {
		router.push({
			path: '/momentsDetails',
			query: {
				workMomentID,
			},
		})
	}

	const opItem = computed(() => {
		if (props.source?.type === 1) {
			return props.source.likeUsers[0]
		}
		if (props.source?.type === 2) {
			return props.source
		}
		return props.source.comments[0]
	})

	const getImage = computed(() => {
		if (props.source.content.metas.length <= 0) {
			return ''
		}
		if (props.source.content.type === 0) {
			return props.source.content.metas[0].original
		}
		return props.source.content.metas[0].thumb
	})
</script>