<script setup lang="ts">
import { ref } from "vue";
import { useDetail } from "/@/hooks/core/useDetail";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpDetail, httpAdd, httpStatus } from "/@/api/purchase/ticketReturn";
import BasicDescriptions from "/@/components/BasicDescriptions";
// import ReconciliationForm from "/@/components/ReconciliationForm";
import Descriptions from "../descriptions/index.vue";
import ReturnTciketForm from "./components/return-form.vue";
import Invoice from "/@/components/invoice";
import { useRouter } from "vue-router";
import { DefaultApprovalNode } from "/@/components/ApprovalNode";
import { useUserInfo } from "/@/hooks/core/useUser";
import { usePermission } from "/@/hooks/core/usePermission";
import { sendTicketReturnColumns } from "/@/utils/details/_purchase";

const pageName = "sendOrderInvoiceDetail";
// { code: "020", name: "买方公司财务审核" },
const { hasPermissionWithCode } = usePermission(pageName);

const { push } = useRouter();

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

const { isSuperUser } = useUserInfo();

const { id, isDetail, title, collapses } = useDetail({
  baseName: "运单回票",
  collapseLen: 5
});

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

const { run: create } = useAsync({
  // success: () => push("/supplierOrder/supSendOrderInvoice")
  success: () => push("/supplierOrder/supplierOrderCollection?tab=supSendOrderInvoice_collection")
});

const { run: approval } = useAsync({
  success: () => refresh()
});

function refresh() {
  requesetDetail();
  formRef.value && formRef.value.refresh();
}

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

function handleApproval(data) {
  const params = {
    ...data,
    hpNo: id.value
  };

  approval(httpStatus(params));
}

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

<template>
  <div class="padding__container bg-white">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem name="1" :title="title">
            <!-- 回票详情 -->
            <BasicDescriptions
              v-if="isDetail"
              :columns="sendTicketReturnColumns"
              :data="data"
            />
            <!-- 创建回票 -->
            <ReturnTciketForm v-else @create="handleCreate" />
          </ElCollapseItem>

          <div v-if="isDetail">
            <ElCollapseItem name="2" title="对账详情">
              <!-- <ReconciliationForm ref="formRef" readonly :id="data.payNo"  /> -->
              <Descriptions 
                ref="formRef" 
                request
                readonly
                :payNo="data.payNo" 
              />
            </ElCollapseItem>

            <ElCollapseItem name="3" title="发票详情">
              <Invoice type="purchase" :inv-number="data.invoiceNumber" />
            </ElCollapseItem>

            <!-- 审批节点 -->
            <template v-if="!isSuperUser">
              <ElCollapseItem
                v-if="
                  String(data.status) === '2' && hasPermissionWithCode('053')
                "
                title="业务公司业务审核"
                name="4"
              >
                <DefaultApprovalNode
                  approve-value="3"
                  reject-value="6"
                  @approval="handleApproval"
                />
              </ElCollapseItem>

              <ElCollapseItem
                v-if="
                  String(data.status) === '3' && hasPermissionWithCode('054')
                "
                name="5"
                title="业务公司认证"
              >
                <DefaultApprovalNode
                  approve-value="4"
                  reject-value="7"
                  @approval="handleApproval"
                />
              </ElCollapseItem>
            </template>
          </div>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
