<script setup lang="ts">
import { ref } from "vue";
import Invoice from "/@/components/Invoice";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpDetail } from "/@/api/purchase/inputInvoicePool";
import { invoicePoolColumnsTwo } from "/@/utils/details/_purchase";
import BasicDescriptions from "/@/components/BasicDescriptions";

const visible = ref(false);
const invoiceNumber = ref("");
const { run: detail, data, loading } = useAsync<Record<string, string>>({ initalData: {} });

defineExpose({
  onDisplay: ({ invoiceNumber: _invoiceNumber, InvCode }) => {
    visible.value = true;
    invoiceNumber.value = _invoiceNumber;
    console.log(InvCode);
    detail(httpDetail({ InvCode }));
  }
});
</script>

<template>
  <el-dialog v-model="visible" width="1040px" :close-on-click-modal="false" v-loading="loading">
    <BasicDescriptions 
      class="mb-[10px]" 
      :data="data" 
      :columns="invoicePoolColumnsTwo" 
    />
    
    <Invoice :inv-number="invoiceNumber" type="purchase" />
  </el-dialog>
</template>
