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

defineOptions({ name: 'DictSelect' });

interface Props {
  dictCode: string;
  placeholder?: string;
  disabled?: boolean;
  clearable?: boolean;
  filterable?: boolean;
  onlyEnabled?: boolean;
  multiple?: boolean;
  collapseTags?: boolean;
  collapseTagsTooltip?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请选择',
  disabled: false,
  clearable: true,
  filterable: false,
  onlyEnabled: true,
  multiple: false,
  collapseTags: false,
  collapseTagsTooltip: false
});

const model = defineModel<string | number | Array<string | number> | null | undefined>({
  default: undefined
});

const { enabledDictData, dictData } = useDict(() => props.dictCode);

const dictOptions = computed(() => {
  const source = props.onlyEnabled ? enabledDictData.value : dictData.value;

  return source.map(item => ({
    label: item.label,
    value: item.value
  }));
});
</script>

<template>
  <ElSelect
    v-model="model"
    class="w-full"
    :placeholder="props.placeholder"
    :disabled="props.disabled"
    :clearable="props.clearable"
    :filterable="props.filterable"
    :multiple="props.multiple"
    :collapse-tags="props.collapseTags"
    :collapse-tags-tooltip="props.collapseTagsTooltip"
  >
    <ElOption v-for="item in dictOptions" :key="item.value" :label="item.label" :value="item.value" />
  </ElSelect>
</template>

<style scoped></style>
