<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import PaymentReceipt from "./components/receipt-payment.vue";
import RelatedOrder from "./components/related-order.vue";
import {
  httpInfo,
  httpOrderList,
  httpPayAdd
} from "/@/api/InvoiceSales/capitalClaim";
import { useResponseHandle } from "/@/hooks";

const { query } = useRoute();
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 requesetTradeOrderList() {
  const { code, message, data } = await httpOrderList({
    tradNo: tradNo.value
  });

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

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

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

  responseHandle({
    code,
    message,
    handler: () => {
      /* 回列表页 */
    }
  });
}

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

<template>
  <div class="invoice__content" bg-white>
    <PaymentReceipt :trade-info="treadeDetail" />
    <RelatedOrder
      :trade-order-list="treadOrderList"
      @create-btn-click="requesetCreateSalePay"
    />
  </div>
</template>

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