<template>
    <component :is="render" />
</template>
<script setup lang="jsx">
    import { ElSelect, ElOption } from 'element-plus/es/components/select/index';
    import 'element-plus/es/components/select/style/css';
    const props = defineProps({
        opts: {
            type: Array,
            required: true,
        },
        clearable: {
            type: Boolean,
            default: true,
        },
        filterable: {
            type: Boolean,
            default: true,
        },
        config: {
            type: Object,
            default() {
                return {
                    label: 'label',
                    value: 'value',
                    disabled: 'disabled',
                };
            },
        },
    });
    const slots = useSlots();
    let config = {
        label: 'label',
        value: 'value',
        disabled: 'disabled',
        ...props.config,
    };
    function handleItemDisabled(item, index) {
        let res = false;
        if (config.disabled instanceof Function) {
            res = config.disabled(item, index);
        } else {
            res = !!item[config.disabled];
        }
        return res;
    }
    const opts = computed(() =>
        props.opts.map((item) => {
            return typeof item !== 'object' ? { label: item, value: item } : item;
        })
    );
    const render = () => (
        <ElSelect
            {...props}
            v-slots={{
                default: () =>
                    unref(opts).map((item, index) => (
                        <ElOption
                            label={item[config.label]}
                            value={item[config.value]}
                            disabled={handleItemDisabled(item, index)}
                        >
                            {slots.option?.(item, index) || item[config.label]}
                        </ElOption>
                    )),
                ...slots,
            }}
        ></ElSelect>
    );
</script>

<style lang="less" scoped></style>
