<script setup lang="ts">
import { getDictItemByValue } from '@af-mobile-client-vue3/utils/dictUtil'
import dayjs from 'dayjs/esm/index'
import { ref } from 'vue'

const { serviceName, dictName, dictValue, dictType } = defineProps<{
  serviceName?: string
  dictName: string | null | undefined
  dictValue: string | number | null | undefined
  // 用于非字典型的格式化展示：如日期/小数/整数等
  dictType?: 'date' | 'dateTime' | 'towDecimal' | 'fourDecimal' | 'int' | string
}>()

// 字面值
const label = ref('')

// 样式类名
const className = ref('')

initComponent()

// 组件初始化
function initComponent() {
  if (dictValue === null || dictValue === undefined || dictValue === '') {
    label.value = '--'
    className.value = ''
    return
  }

  // 1) 优先使用字典映射
  if (dictName && dictName !== '') {
    getDictItemByValue(dictName, serviceName, String(dictValue), (result) => {
      if (result == null) {
        // 字典未命中，退回到格式化/原值
        applyFormatFallback()
      }
      else {
        label.value = result.label
        className.value = `badge-${result.status}`
      }
    })
    return
  }

  // 2) 无字典名时，按 dictType 做格式化
  applyFormatFallback()
}

function applyFormatFallback() {
  className.value = ''
  if (!dictType || dictType === '') {
    label.value = String(dictValue)
    return
  }
  switch (dictType) {
    case 'date':
      label.value = formatDateLike(dictValue, 'YYYY-MM-DD')
      break
    case 'dateTime':
      label.value = formatDateLike(dictValue, 'YYYY-MM-DD HH:mm:ss')
      break
    case 'towDecimal':
      label.value = formatNumberLike(dictValue, 2)
      break
    case 'fourDecimal':
      label.value = formatNumberLike(dictValue, 4)
      break
    case 'int':
      label.value = formatNumberLike(dictValue, 0)
      break
    default:
      label.value = String(dictValue)
      break
  }
}

function pad2(num: number): string {
  return String(num).padStart(2, '0')
}

function formatDateLike(val: string | number, pattern: string): string {
  // 1️⃣ 先判断时间是否合法
  const date = dayjs(val)
  if (!date.isValid()) {
    console.warn('时间字符串不合法:', val)
    return val as string
  }

  // 2️⃣ 判断格式字符串是否有效（简单校验，格式字符串非空）
  if (!pattern || typeof pattern !== 'string') {
    console.warn('格式字符串不合法:', pattern)
    return val as string
  }

  // 3️⃣ 使用 dayjs 格式化
  return date.format(pattern)
}

function formatNumberLike(val: string | number, digits: number): string {
  const num = typeof val === 'number' ? val : Number(val)
  if (Number.isNaN(num))
    return String(val)
  return num.toFixed(digits)
}
</script>

<template>
  <span :class="className !== '' ? className : undefined">{{ label }}</span>
</template>

<style scoped lang="less">
.badge-blue {
  color: #1890ff;
}
.badge-green {
  color: #52c41a;
}
.badge-orange {
  color: #fa8c16;
}
.badge-cyan {
  color: #13c2c2;
}
.badge-yellow {
  color: #fadb14;
}
.badge-red {
  color: #f5222d;
}
.badge-pink {
  color: #eb2f96;
}
.badge-purple {
  color: #722ed1;
}
.badge-geekblue {
  color: #2f54eb;
}
.badge-volcano {
  color: #fa541c;
}
.badge-gold {
  color: #faad14;
}
.badge-lime {
  color: #a0d911;
}
</style>
