<template>
  <div class="need_bg flex flex-row items-center justify-center">
    <img class="h-[18px] w-[18px]" :src="getIcon()" alt="icon" />
    <span class="ml-2">{{ getStatusStr() }}</span>
    <span v-if="messageData.status === RtcMessageStatus.Successed" class="ml-1">{{
      messageData.duration
    }}</span>
  </div>
</template>

<script lang="ts" setup>
import call from '@/assets/images/messageItem/call.png'
import video from '@/assets/images/messageItem/video.png'
import { RtcMessageStatus } from '@/constants/enum'
import { ExedMessageItem } from './data'

type RtcMessageRenderProps = {
  message: ExedMessageItem
  disabled: boolean
  isSelfMsg: boolean
}

const props = defineProps<RtcMessageRenderProps>()

const { t } = useI18n()

const messageData = JSON.parse(props.message.customElem.data).data

const getStatusStr = () => {
  switch (messageData.status) {
    case RtcMessageStatus.Canceled:
      return t('rtc.canceled')
    case RtcMessageStatus.Refused:
      return t('rtc.refused')
    case RtcMessageStatus.Timeout:
      return t('rtc.timeout')
    case RtcMessageStatus.Successed:
      return t('rtc.callDuration')
    case RtcMessageStatus.HandleByOtherDevice:
      return t('rtc.handleByOtherDevice')
    default:
      return ''
  }
}

const getIcon = () => {
  return messageData.mediaType === 'video' ? video : call
}
</script>
