<template>
  <div
    class="flex h-[64px] items-center bg-white px-[22px]"
    :class="{ 'text-error-text': !isSuccess }"
  >
    <Avatar
      :src="source.userInfo.faceUrl"
      :size="42"
      :is-group="false"
      :desc="source.userInfo.name"
    />
    <div class="ml-3 flex h-full w-full items-center justify-between">
      <div class="flex flex-1 items-center justify-between">
        <div class="max-w-[60%] truncate">
          <div class="text-base">{{ source.userInfo.name }}</div>
          <div class="text-sm">[{{ type }}]{{ formatMessageTime(source.time) }}</div>
        </div>
      </div>
      <div class="w-[50px] text-right text-sm">{{ status }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { RtcMessageStatus } from '@/constants/enum'
import { ExMessageItem } from '@/store/modules/message'
import useUserStore from '@/store/modules/user'
import { formatMessageTime } from '@/utils/imCommon'

type UserInfoType = {
  userInfo: {
    id: string
    name: string
    faceUrl: string
  }
}

type HistoryItemType = ExMessageItem & { time: number } & UserInfoType

type RtcHistoryItemProps = {
  source: HistoryItemType
}
const props = defineProps<RtcHistoryItemProps>()

const { t } = useI18n()
const userStore = useUserStore()

const customElem = computed(() => JSON.parse(props.source.customElem.data).data)
const isSuccess = computed(() => customElem.value.status === RtcMessageStatus.Successed)
const isSend = computed(() => props.source.sendID === userStore.selfInfo.userID)
const type = computed(() =>
  customElem.value.mediaType === 'audio' ? t('rtc.voice') : t('rtc.video'),
)
const status = computed(() => {
  if (isSuccess.value) {
    return customElem.value.duration
  } else {
    return isSend.value ? t('rtc.callOut') : t('rtc.beCall')
  }
})
</script>
