<template>
  <text :customClass="customClass">{{ dictLabels }}</text>
</template>

<script lang="ts" setup>
import { useDictStore } from '@/store/dictStore';
const dictStore = useDictStore();
const props = defineProps({
  dictName: {
    type: String,
    required: true
  },
  dictValue: {
    type: [String, Number, Array<string | number>],
    required: true
  },
  customClass: {
    type: String,
    default: ''
  }
});
const dictLabels = computed(() => {
  if (!props.dictName || !props.dictValue) {
    return '';
  }
  if (Array.isArray(props.dictValue)) {
    return props.dictValue.map((value) => {
      return dictStore.getDictLabel(props.dictName, value);
    });
  }
  return dictStore.getDictLabel(props.dictName, props.dictValue);
});
</script>
<style lang="scss" scoped></style>