<script setup lang="ts">
import { ref, unref, watch, shallowRef } from "vue";
import ReconciliationForm from "/@/components/ReconciliationForm";
import { ElForm, ElMessage } from "element-plus";
import ChooseModal from "./choose-modal.vue";
import { useCompany } from "/@/hooks/core/useCompany";
import { httpSupplierList, httpTransformCompany } from "/@/api/user";


const emit = defineEmits(["create", "openInv", "getBuyer"]);

 defineProps<{ platformType: string, customerNo: string }>();

const { currentCompany } = useCompany();


const supplierNo = shallowRef("");
const chooseModalRef = ref<InstanceType<typeof ChooseModal> | null>(null);
const reconciliationRef = ref<InstanceType<typeof ReconciliationForm> | null>(null);
const formData = ref({ payNo: "" });
const handleChoose = () => chooseModalRef.value?.onDisplay();
const handleDetail = (data) => emit('getBuyer', data)


watch(() => currentCompany.value,async () => { 
  const { data} = await httpTransformCompany({ code: currentCompany.value?.companyNo })
  supplierNo.value = (data[0] || {}).relation_code
}, {
  immediate: true
})


defineExpose({
  getOpenInvInfo: () => reconciliationRef.value?.getOpenInvInfo() || {}
})

</script>

<template>
  <div w-full>
    <ReconciliationForm
      ref="reconciliationRef"
      :showTicketColumn="true"
      :cover="true"
      isPurchPay
      :edit="true"
      :platformType="platformType"
      :id="formData.payNo"
      :readonly="!!formData.payNo"
      @get-record="handleDetail"
      @choose="handleChoose"
      @clear="formData.payNo = ''"
      @openInv="orderArr => emit('openInv', orderArr)"
   />

    <ChooseModal 
      ref="chooseModalRef" 
      :supplierNo="supplierNo"
      :customerNo="customerNo"
      :platformType="platformType"  
      @choose="payNo => (formData.payNo = payNo)"
    />
  </div>
</template>
