<template>
  <el-select
    :model-value="modelValue"
    :multiple="multiple"
    :placeholder="placeholder"
    :clearable="clearable"
    :filterable="filterable"
    :disabled="disabled"
    :loading="loading"
    @update:model-value="handleChange"
    @change="handleChangeWithOption"
    @focus="$emit('focus')"
    @filter-change="$emit('filter-change', $event)"
  >
    <el-option
      v-for="opt in options"
      :key="opt.value"
      :label="opt.label"
      :value="opt.value"
    />
  </el-select>
</template>

<script setup>
const props = defineProps({
  modelValue: [String, Number, Array, null],
  multiple: Boolean,
  placeholder: String,
  clearable: Boolean,
  filterable: Boolean,
  disabled: Boolean,
  loading: Boolean,
  options: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits([
  'update:modelValue',
  'focus',
  'filter-change',
  'option-change' // 新增：emit 完整 option 对象
])

function handleChange(value) {
  emit('update:modelValue', value)
}

function handleChangeWithOption(value) {
  // 单选：value 是 primitive；多选：value 是 array
  if (props.multiple) {
    // 多选暂不支持 extra fields（可按需扩展）
    return
  }

  const option = props.options.find(opt => opt.value === value)
  emit('option-change', option)
}
</script>