<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useVModel } from "@vueuse/core";
import RemoteSelect from "/@/components/RemoteSelect";
import { httpFlattenCatgorylist } from "/@/api/netOrderEnter/netOrderEntry";

const props = defineProps<{
  companyNo: string;
  modelValue?: string;
  disabled?: boolean;
  prop
}>();

const emits = defineEmits(['change']);

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

const RemoteSelectRef = ref<InstanceType<typeof RemoteSelect> | null>(null);

onMounted(() => {
  value.value && (RemoteSelectRef.value as any).initalData(value.value);
});

defineExpose({
  initialData: data => (RemoteSelectRef.value as any).initalData(data),
  getRecurrentValue: data => (RemoteSelectRef.value as any).getRecurrentValue(data)
});
</script>

<template>
  <RemoteSelect
    ref="RemoteSelectRef"
    :disabled="disabled"
    v-model="value"
    style="width: 100%"
    :api="httpFlattenCatgorylist"
    request-prop="cat_name"
    response-label-prop="cat_name"
    :response-val-prop="prop || 'cat_id'"
    @item-change="val => emits('change', val)"
    @clear="emits('change')"
    :pro-data="() => ({ companyNo })"
  />
</template>
