<template>
  <span :class="wrapClass">
    {{ formatted }}
  </span>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  defineOptions({ name: 'BillingAmountDisplay' })

  interface Props {
    /** 金额 */
    amount: number
    /** 货币（默认 CNY） */
    currency?: string
    /** 小数位（默认 2） */
    precision?: number
    /** 是否显示货币符号（默认 true） */
    showSymbol?: boolean
    /** 字体强调（默认 false） */
    bold?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    currency: 'CNY',
    precision: 2,
    showSymbol: true,
    bold: false
  })

  const symbol = computed(() => {
    if (!props.showSymbol) return ''
    if (props.currency === 'CNY') return '￥'
    if (props.currency === 'USD') return '$'
    return ''
  })

  const formatted = computed(() => {
    const value = Number.isFinite(props.amount) ? props.amount : 0
    const text = value.toLocaleString('zh-CN', {
      minimumFractionDigits: props.precision,
      maximumFractionDigits: props.precision
    })
    return `${symbol.value}${text}`
  })

  const wrapClass = computed(() => {
    return props.bold ? 'font-semibold' : ''
  })
</script>
