<template>
  <ElTimeline v-if="items.length">
    <ElTimelineItem
      v-for="log in items"
      :key="log.id"
      :timestamp="formatDateTime(log.createdAt)"
      placement="top"
    >
      <div class="text-sm font-medium">{{ log.title || renderAction(log.action) }}</div>
      <div class="text-xs text-[var(--el-text-color-secondary)]">
        {{ log.operatorName || '-' }}
      </div>
      <div v-if="log.description" class="mt-1 text-sm">{{ log.description }}</div>
    </ElTimelineItem>
  </ElTimeline>
  <ElEmpty v-else :description="emptyText" />
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ReviewAction } from '@/enums/ReviewAction'

  interface Props {
    items: Api.Merchant.MerchantAuditRecord[]
  }

  defineProps<Props>()
  const { t } = useI18n()

  const emptyText = computed(() => t('merchant.review.empty'))

  const formatDateTime = (value?: string) => {
    if (!value) return '-'
    const date = new Date(value)
    return Number.isNaN(date.getTime()) ? value : date.toLocaleString()
  }

  const renderAction = (action: ReviewAction) => {
    switch (action) {
      case ReviewAction.ReviewClaimed:
        return t('merchant.review.claim')
      case ReviewAction.ReviewReleased:
        return t('merchant.review.release')
      case ReviewAction.ReviewApproved:
        return t('merchant.review.approve')
      case ReviewAction.ReviewRejected:
        return t('merchant.review.reject')
      case ReviewAction.ReviewRevoked:
        return t('merchant.review.revoke')
      case ReviewAction.ReviewPendingReApproval:
        return t('merchant.review.pendingReApproval')
      default:
        return t('merchant.review.title')
    }
  }
</script>
