<template>
    <el-select v-model="selectedValue" :empty-values="[null, undefined, ...emptyValues]" :placeholder="placeholder">
        <template v-for="item in getEnumOptions()" :key="item.autoid">
            <el-option :label="item.label" :value="item.value" />
        </template>
    </el-select>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useEnum } from '@/hooks/enum'

const props = defineProps({
    modelValue: Number,
    code: {
        type: String,
        required: true
    },
    emptyValues: {
        type: Array,
        default: () => ([])
    },
    placeholder: {
        type: String,
        default: '请选择'
    }
})

const emit = defineEmits(['update:modelValue'])

const { getEnumOptions, registerEnumReadyCallback } = useEnum(props.code)

const selectedValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

registerEnumReadyCallback(() => {
    const options = getEnumOptions()
    if (!options.some((e) => e.value === props.modelValue)) {
        selectedValue.value = undefined
    }
})
</script>