<script setup lang="ts">
import { ref } from "vue";
import { useVModel } from "@vueuse/core";
import { httpUnitList } from "/@/api/components/remoteSelect";
import RemoteSelect from "../remote-select";

const props = defineProps<{
  placeholder?: string;
  modelValue?: string;
  unit?: string;
}>();

const remoteSelectRef = ref<any>(null);

const emit = defineEmits(["update:modelValue", "change"]);

const value = useVModel(props, "modelValue");

function initalData(data) {
  remoteSelectRef.value.initalData(data);
}

defineExpose({
  initalData
});
</script>

<template>
  <RemoteSelect
    v-model="value"
    :api="httpUnitList"
    :placeholder="placeholder"
    ref="remoteSelectRef"
    response-label-prop="unit_title"
    response-val-prop="unit_id"
    request-prop="keyword"
    :isRoot="true"
    @item-change="val => emit('change', val)"
    @inital="unit => (value = unit)"
  />
</template>
