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

const props = defineProps<{
  placeholder?: string;
  modelValue?: string;
  brand_name?: 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="httpCardAll"
    :placeholder="placeholder"
    ref="remoteSelectRef"
    response-label-prop="title"
    response-val-prop="id"
    request-prop="title"
    :isRoot="true"
    @change="val => emit('change', val)"
    @inital="id => (value = id)"
  />
</template>
