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

import { computed, watch } from 'vue';

import { Tag } from 'ant-design-vue';

import { tagTypes } from './data';

defineOptions({ name: 'DictTag' });

const props = withDefaults(
  defineProps<{
    dicts: DictData[]; // dict数组
    value: number | string; // value
  }>(),
  {
    dicts: undefined,
  },
);

watch(
  () => props.dicts,
  (value) => {
    console.log('dicts change', value);
  },
);

const color = computed<string>(() => {
  // eslint-disable-next-line eqeqeq
  const current = props.dicts.find((item) => item.dictValue == props.value);
  const listClass = current?.listClass ?? '';
  // 是否为默认的颜色
  const isDefault = Reflect.has(tagTypes, listClass);
  // 判断是默认还是自定义颜色
  if (isDefault) {
    // 这里做了antd - element-plus的兼容
    return tagTypes[listClass]!.color;
  }
  return listClass;
});

const cssClass = computed<string>(() => {
  // eslint-disable-next-line eqeqeq
  const current = props.dicts.find((item) => item.dictValue == props.value);
  return current?.cssClass ?? '';
});

const label = computed<number | string>(() => {
  // eslint-disable-next-line eqeqeq
  const current = props.dicts.find((item) => item.dictValue == props.value);
  return current?.dictLabel ?? 'unknown';
});
</script>

<template>
  <div>
    <Tag v-if="color" :class="cssClass" :color="color">{{ label }}</Tag>
    <div v-if="!color" :class="cssClass">{{ label }}</div>
  </div>
</template>
