<template>
  <ElTag :type="tagType" :size="size" :effect="effect">
    {{ label }}
  </ElTag>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { ElTag } from 'element-plus'
  import { formatBillingStatus, getBillingStatusType } from '@/utils/billing'

  defineOptions({ name: 'BillingStatusTag' })

  interface Props {
    /** 账单状态 */
    status: Api.Billing.TenantBillingStatus
    /** Tag 尺寸 */
    size?: 'default' | 'small' | 'large'
    /** Tag 风格 */
    effect?: 'dark' | 'light' | 'plain'
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 'default',
    effect: 'light'
  })

  const label = computed(() => formatBillingStatus(props.status))
  const tagType = computed(() => getBillingStatusType(props.status))
</script>
