<template>
  <a-tag :color="theme">{{ label }}</a-tag>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import useDictOption from '@/hooks/dict-option';

  defineOptions({
    name: 'StatusTag',
  });

  const configs = {
    enable: {
      themeDict: { true: 'green', false: 'red' },
      valFilter: useDictOption('ABLE_TYPE').getLabel,
    },
    taskStatus: {
      themeDict: { RUNNING: 'blue', SUCCESS: 'green', FAIL: 'red' },
      valFilter: useDictOption('TASK_STATUS').getLabel,
    },
  };
  type ConfigKeyType = keyof typeof configs;

  const props = defineProps({
    value: { type: [Boolean, String, Number], default: '' },
    type: { type: String },
  });

  function getConfig(type: ConfigKeyType) {
    // @ts-ignore
    return configs[type] || { themeDict: {}, valFilter: (val) => val };
  }

  const { themeDict, valFilter } = getConfig(props.type as ConfigKeyType);

  const theme = computed(() => {
    // @ts-ignore
    return themeDict[props.value];
  });
  const label = computed(() => {
    // @ts-ignore
    return valFilter(props.value);
  });
</script>
