<template>
  <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
    <v-combobox
      v-model="value"
      :rules="item.rules"
      :attach="!item.noAttach"
      :label="item.label"
      :placeholder="item.placeholder || item.label"
      :item-title="item.itemText || 'label'"
      :item-value="item.itemValue || 'value'"
      :items="item.items"
      variant="outlined"
      :density="item.dense || 'compact'"
      :clearable="item.clearable"
      :disabled="item.disabled"
      :return-object="item.returnObject || false"
      @update:search="search"
      @update:modelValue="modelValueUpDate"
    ></v-combobox>
  </div>
</template>
<script setup>
import { ref, defineEmits } from 'vue';
defineOptions({ name:'FormUI-v-combobox'})

const props = defineProps({item: Object, modelValue: [String, Number]})
const emit = defineEmits(['update:modelValue', 'change', 'search'])
const item = props.item
const value = ref(props.modelValue)
const modelValueUpDate = (val) => {
  value.value = val
  emit('update:modelValue', value.value)
  // let obj = null // if (item.getObject) obj = item.items.find(e => e[item.itemValue] === value.value) || null
  emit('change', value.value)
}
const search = (val) => {
  emit('search', val)
}
</script>
<style lang="scss" scoped>
</style>