<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import PaymentReceipt from "./components/basic-claim/receipt-payment.vue";
import RelatedOrder from "./components/basic-claim/related-order.vue";

import { useResponseHandle } from "/@/hooks";

import { httpInfo, httpPayAdd } from "/@/api/InvoiceSales/capitalClaim";

const { query } = useRoute();
const { push } = useRouter();
const tradNo = computed(() => query.id as string);
const responseHandle = useResponseHandle();

const treadeDetail = ref<Record<string, string>>({});
const treadOrderList = ref<Array<Record<string, string>>>([]);

//初始化认领详情
async function requesetTradeDetail() {
  const { code, message, data } = await httpInfo({
    tradNo: tradNo.value
  });

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

//新增销售单付款
async function requesetCreateSalePay(orderArr: any = []) {
  const { code, message } = await httpPayAdd({
    tradNo: tradNo.value,
    orderArr
  });

  responseHandle({
    code,
    message,
    handler: () => push("/InvoiceSales/capitalClaim")
  });
}

function initalData() {
  if (!tradNo.value) return;
  requesetTradeDetail();
}

//传入id初始化详情
onMounted(() => initalData());
</script>

<template>
  <div class="invoice__content" bg-white>
    <!-- 认领 -->
    <h1 text-xl font-bold mb-2>资金认领</h1>
    <PaymentReceipt :trade-info="treadeDetail" />
    <RelatedOrder
      :trade-order-list="treadOrderList"
      @create-btn-click="requesetCreateSalePay"
    />
  </div>
</template>

<style>
.invoice__content {
  padding: 30px !important;
}
</style>
