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

defineOptions({
  name: 'DictText',
  inheritAttrs: false
});

type DictValue = string | number;

interface Props {
  dictCode: string;
  value?: DictValue | DictValue[] | null;
  fallback?: string;
  separator?: string;
  onlyEnabled?: boolean;
  tag?: string;
}

const props = withDefaults(defineProps<Props>(), {
  value: null,
  fallback: '--',
  separator: ' / ',
  onlyEnabled: false,
  tag: 'span'
});

const { getLabel, getLabels } = useDict(() => props.dictCode);

const text = computed(() => {
  if (Array.isArray(props.value)) {
    return getLabels(props.value, {
      fallback: props.fallback,
      separator: props.separator,
      onlyEnabled: props.onlyEnabled
    });
  }

  return getLabel(props.value, {
    fallback: props.fallback,
    onlyEnabled: props.onlyEnabled
  });
});
</script>

<template>
  <component :is="props.tag" v-bind="$attrs">
    {{ text }}
  </component>
</template>

<style scoped></style>
