<template>
  <el-tag 
    :effect="currentOption.effect"
    v-if="currentOption"
    :type="currentOption.type" 
    :class="{ 'audit-state-tag': showIcon && currentOption.icon }"
  >
    <i v-if="showIcon && currentOption.icon" :class="currentOption.icon" style="margin-right: 4px;"></i>
    {{ currentOption.label }}
  </el-tag>
  <span v-else>{{ emptyText }}</span>
</template>

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

export interface StateOption {
  value: string | number;
  label: string;
  type: 'success' | 'danger' | 'warning' | 'info' | '';
  icon?: string;
  effect?: string;
}

interface Props {
  state?: string | number;
  options?: StateOption[];
  showIcon?: boolean;
  emptyText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  state: '',
  options: () => [
    { value: '1', label: '已通过', type: 'success', icon: 'fa-solid fa-circle-check' , effect:"dark" },
    { value: '-2', label: '已驳回', type: 'danger', icon: 'fa-solid fa-circle-xmark', effect:"dark" },
    { value: '0', label: '待审核', type: 'warning', icon: 'fa-regular fa-clock' ,effect:"light" },
    { value: '10', label: '部门通过', type: 'warning', icon: 'fa-regular fa-clock' ,effect:"dark" }
  ],
  showIcon: true,
  emptyText: '-'
})

// 根据 state 值查找对应的配置（统一转字符串比较，兼容数字 10 与字符串 '10'）
const currentOption = computed(() => {
  if (props.state == null || props.state === '') {
    return null
  }
  const stateStr = String(props.state)
  return props.options.find(option => String(option.value) === stateStr) || null
})
</script>

<style scoped>
.audit-state-tag {
  display: inline-flex;
  align-items: center;
}
</style>

