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

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

const props = defineProps<{
  placeholder?: string;
  modelValue?: string;
  project_name?: string;
  disabled?: boolean;
  showDisabled?: boolean;
}>();

const remoteSelectRef = ref<any>(null);

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

function handleChange(item) {
  emit("change", item);
}

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

defineExpose({
  initalData
});
</script>

<template>
  <RemoteSelect
    v-model="value"
    :api="httpCompanyAll"
    :placeholder="placeholder"
    :disabled="disabled"
    ref="remoteSelectRef"
    response-label-prop="title"
    response-val-prop="id"
    request-prop="title"
    :show-disabled="showDisabled"
    :isRoot="true"
    @item-change="handleChange"
  />
</template>
