<script setup lang="ts">
import { computed, watch } from "vue";
import { useDictStore } from "@/store/modules/dict";

const props = defineProps<{
  dictCode: string;
  value?: string | number;
}>();

const dictStore = useDictStore();

const label = computed(() => {
  if (!props.value) return "";
  return dictStore.getDictLabel(props.dictCode, props.value);
});

const tagType = computed(() => {
  if (!props.value) return "";
  const color = dictStore.getDictColor(props.dictCode, props.value);
  return color || "info";
});

watch(
  () => props.dictCode,
  () => {
    if (!dictStore.loaded) {
      dictStore.loadDictData();
    }
  },
  { immediate: true }
);
</script>

<template>
  <el-tag v-if="tagType" :type="tagType as any" size="small">
    {{ label }}
  </el-tag>
  <span v-else>{{ label || value }}</span>
</template>
