<script setup lang="ts">
import { ref } from "vue";
import { useDetail } from "/@/hooks/core/useDetail";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpDetail, httpAdd } from "/@/api/purchase/orderPay";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ReconciliationForm from "/@/components/ReconciliationForm";
import ChooseForm from "./component/choose-form.vue";
import { useRouter } from "vue-router";

import { purchpayColumns } from "/@/utils/details/_purchase";

const { push } = useRouter();

const formRef = ref<InstanceType<typeof ReconciliationForm> | null>(null);

const { id, isDetail, title, collapses } = useDetail({
  baseName: "采购回款",
  collapseLen: 5
});

const { run: detail, data } = useAsync<Record<string, string>>({
  initalData: {}
});

const { run: create } = useAsync({
  success: () => push("/supply/supplyPurchPay")
});

const requesetDetail = () => detail(httpDetail({ DzNo: id.value }));
const handleCreate = data => create(httpAdd(data));

if (isDetail.value) requesetDetail();
</script>

<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem name="1" :title="title">
            <!-- 付款详情 -->
            <BasicDescriptions
              v-if="isDetail"
              :columns="purchpayColumns"
              :data="data"
            />

            <!-- 创建：选择对账单 -->
            <ChooseForm v-else @create="handleCreate" />
          </ElCollapseItem>

          <div v-if="isDetail">
            <ElCollapseItem name="2" title="对账详情">
              <ReconciliationForm ref="formRef" readonly :id="data.payNo" />
            </ElCollapseItem>
          </div>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
