<template>
  <el-select v-bind="$attrs" @change="handleChange">
    <el-option v-for="option in options" :key="option[valueKey]" :label="option[labelKey]" :value="option[valueKey]" />
  </el-select>
</template>
<script setup>
const selectedItemModel = defineModel('selectedItem', {
  type: Object,
  default: null,
});
const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  labelKey: {
    type: String,
    default: 'label',
  },
  valueKey: {
    type: String,
    default: 'value',
  },
})
const emit = defineEmits(['change']);
const handleChange = (val) => {
  const fullItem = props.options.find(option => option[props.valueKey] === val);
  selectedItemModel.value = fullItem;
  emit('change', val, fullItem);
}
</script>
<style lang="scss" scoped></style>