<template>
  <el-tag :color="theme">{{ label || '-' }}</el-tag>
</template>

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

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

  const configs = {
    enable: {
      true: 'primary',
      false: 'danger',
    },
    upload: {
      true: 'primary',
      false: 'danger',
    },
  };
  type ConfigKeyType = keyof typeof configs;

  const props = defineProps<{
    value: string | number | boolean;
    label: string;
    type: ConfigKeyType;
  }>();

  const theme = computed(() => {
    const config = configs[props.type];
    if (!config) return 'primary';
    return config[String(props.value)] || 'primary';
  });
</script>
