<template>
    <v-select :options="options" :label="label" v-model="selectedOption" @search="onSearch"
        :placeholder="placeholder" />
</template>
<script setup>
import { computed } from 'vue';

const props = defineProps({
    modelValue: [Number, String, null],
    options: { type: Array, default: () => [] },
    label: { type: String, default: 'Name' },
    placeholder: { type: String, default: '' },
    searchFn: Function,
});
const emit = defineEmits(['update:modelValue']);

const selectedOption = computed({
    get() {
        return props.options.find(opt => opt.Id === props.modelValue) || null;
    },
    set(val) {
        emit('update:modelValue', val ? val.Id : null);
    }
});

async function onSearch(search, loading) {
    if (props.searchFn) {
        loading(true);
        await props.searchFn(search, loading);
        loading(false);
    }
}
</script>