<script setup lang="ts">
import { ref, watch } from "vue";
import { useVModel } from "@vueuse/core";
import { httpGroupList } 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;
}>();

const remoteSelectRef = ref<any>(null);

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

watch(
  () => props.project_name,
  project_name => {
    if (!project_name && !remoteSelectRef.value) return;
    remoteSelectRef.value.initalData({ project_name });
  },
  {
    deep: true
  }
);
</script>

<template>
  <RemoteSelect
    v-model="value"
    :api="httpGroupList"
    :placeholder="placeholder"
    :disabled="disabled"
    ref="remoteSelectRef"
    response-label-prop="combination"
    response-val-prop="id"
    request-prop="combination"
    @item-change="val => emit('change', val)"
    @inital="unit => (value = unit)"
  />
</template>
