<template>
    <el-select
        filterable
        :style="style"
        :size="size"
        v-bind="$attrs"
        :disabled="disabled"
        v-model="selectValue"
        :clearable="clearable"
        :placeholder="placeholder"
    >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
        />
    </el-select>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    modelValue: {
        type: [String, Number, Array],
        default: '',
    },
    options: {
        type: Array,
        default: () => [],
    },
    placeholder: {
        type: String,
        default: '请选择',
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    size: {
        type: String,
        default: 'default',
    },
    style: {
        type: Object,
        default: () => ({ width: '200px' }),
    },
})

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

const selectValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
})
</script>
