<script setup lang="ts">
import DictText from './dict-text.vue';

defineOptions({ name: 'DictTag' });

type DictValue = string | number;
type DictTagType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
type DictTagEffect = 'dark' | 'light' | 'plain';
type DictTagSize = 'large' | 'default' | 'small';

interface Props {
  dictCode: string;
  value?: DictValue | DictValue[] | null;
  fallback?: string;
  separator?: string;
  onlyEnabled?: boolean;
  type?: DictTagType;
  effect?: DictTagEffect;
  size?: DictTagSize;
  round?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  value: null,
  fallback: '--',
  separator: ' / ',
  onlyEnabled: false,
  type: undefined,
  effect: 'light',
  size: 'default',
  round: false
});
</script>

<template>
  <ElTag :type="props.type" :effect="props.effect" :size="props.size" :round="props.round">
    <DictText
      :dict-code="props.dictCode"
      :value="props.value"
      :fallback="props.fallback"
      :separator="props.separator"
      :only-enabled="props.onlyEnabled"
      tag="span"
    />
  </ElTag>
</template>

<style scoped></style>
