<template>
  <span class="inline-flex items-center gap-1">
    <ArtSvgIcon :icon="icon" :size="size" />
    <span v-if="showLabel" class="text-sm">
      {{ label }}
    </span>
  </span>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import ArtSvgIcon from '@/components/core/base/art-svg-icon/index.vue'
  import { TenantPaymentMethod } from '@/enums/Billing'
  import { formatPaymentMethod } from '@/utils/billing'

  defineOptions({ name: 'PaymentMethodIcon' })

  interface Props {
    /** 支付方式 */
    method: Api.Billing.TenantPaymentMethod
    /** 图标大小 */
    size?: number
    /** 是否显示文本 */
    showLabel?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 16,
    showLabel: false
  })

  const icon = computed(() => {
    const map: Record<number, string> = {
      [TenantPaymentMethod.Online]: 'ri:credit-card-line',
      [TenantPaymentMethod.BankTransfer]: 'ri:bank-line',
      [TenantPaymentMethod.Other]: 'ri:money-cny-circle-line'
    }
    return map[props.method] ?? 'ri:money-cny-circle-line'
  })

  const label = computed(() => formatPaymentMethod(props.method))
</script>
