<!-- eslint-disable eqeqeq -->
<script setup lang="ts">
import type { DictData } from '#/api/system/dict/dict-data-model';

import { computed } from 'vue';

import { ElTag } from 'element-plus';

interface Props {
  dicts: DictData[]; // dict数组
  value: number | string; // value
}

const props = withDefaults(defineProps<Props>(), {
  dicts: undefined,
});

const tagType = computed<string>(() => {
  const current = props.dicts.find((item) => item.dictValue == props.value);
  return current?.listClass ?? 'default';
});

const cssClass = computed<string>(() => {
  const current = props.dicts.find((item) => item.dictValue == props.value);
  return current?.cssClass ?? '';
});

const label = computed<number | string>(() => {
  const current = props.dicts.find((item) => item.dictValue == props.value);
  return current?.dictLabel ?? 'unknown';
});

// 只有当type是Element Plus支持的类型时才传递type属性
const elTagType = computed<string | undefined>(() => {
  const supportedTypes = ['primary', 'success', 'info', 'warning', 'danger'];
  return supportedTypes.includes(tagType.value) ? tagType.value : undefined;
});

const tagComponent = computed(() => ElTag);
</script>

<template>
  <component
    :is="tagComponent"
    :type="elTagType"
    :class="cssClass"
  >
    {{ label }}
  </component>
</template>
