<script setup lang="ts">
import { ref } from "vue";
import { httpInfo } from "/@/api/purchase/orderRecord";
import AddOrderModal from "./add-order-modal.vue";
import BasicPurchase from "../../../orderRecord/components/basic-purchase.vue";
import { useResponseHandle } from "/@/hooks";

const emit = defineEmits(["change-payment-detail"]);
const addOrderRef = ref<InstanceType<typeof AddOrderModal>>(null);
const detail = ref<Record<string, string> | null>(null);
const loading = ref(false);
const responseHandle = useResponseHandle();

function handleShowAddModal() {
  addOrderRef.value.onDisplay();
}

async function handleAddOrder(orders) {
  const currentOrder = orders[0];
  emit("change-payment-detail", currentOrder);
  loading.value = true;
  const { data, message, code } = await httpInfo({
    payNo: currentOrder.payNo
  });

  responseHandle({
    message,
    code,
    handler: () => (detail.value = data)
  });

  loading.value = false;
}
</script>

<template>
  <div w-full v-loading="loading">
    <div flex justify-end mb-2>
      <el-button type="primary" @click="handleShowAddModal">选择</el-button>
    </div>

    <el-descriptions :column="2" border size="small" v-if="detail" w-full mb-5>
      <el-descriptions-item label="供应商">{{
        detail.supplierName
      }}</el-descriptions-item>

      <el-descriptions-item label="业务公司">{{
        detail.companyName
      }}</el-descriptions-item>

      <el-descriptions-item label="对账总额">{{
        detail.total_fee
      }}</el-descriptions-item>

      <el-descriptions-item label="已付款">{{
        detail.pay_fee
      }}</el-descriptions-item>

      <el-descriptions-item label="付款中">{{
        detail.apay_fee
      }}</el-descriptions-item>

      <el-descriptions-item label="未付款">{{
        detail.wpay_fee
      }}</el-descriptions-item>
    </el-descriptions>

    <BasicPurchase :purchase-order-list="detail?.cgdlist || []" readonly />
  </div>

  <AddOrderModal @on-add-order="handleAddOrder" ref="addOrderRef" />
</template>
