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

import { PURCHASE_OLD_APPLY_DATE } from "/@/utils/constants"

import {
  DefaultApprovalNode,
  ReceiptApprovalNode
} from "/@/components/ApprovalNode";

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

const { push } = useRouter();
const pageName = "purchPayDetail";

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

const isOld = ref(false)

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

const { isSuperUser } = useUserInfo();

const { id, isDetail, title, collapses } = useDetail({
  baseName: "买入付款",
  collapseLen: 5
});

const { run: detail, data } = useAsync<Record<string, string>>({
  initalData: {},
  success({payNo}= {}){
    const date = payNo.slice(3, 9)
    isOld.value = Number(date) < PURCHASE_OLD_APPLY_DATE
  }
});

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

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

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

const requestDetail = () => detail(httpDetail({ dzNo: id.value }));
const handleCreate = (data, isOld) => create(isOld ? httpOldAdd(data) : httpAdd(data));

function handleApproval(_data) {
  const params = { ..._data, dzNo: id.value };
  approval((data.value.cgdlist.length === 0 ||  !data.value.cgdlist) ? httpOldStatus(params)  : httpStatus(params));
}

if (isDetail.value) {
  requestDetail();
}
</script>

<template>
  <div class="padding__container">
 
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem name="1" :title="title">
            <!-- 付款详情 -->
            <BasicDescriptions v-if="isDetail" :columns="(!data.cgdlist || data.cgdlist.length === 0) ? purchpayColumns : purchpayColumnsNew" :data="data" />
            
            <!-- 创建：选择对账单 -->
            <ChooseForm v-else @create="handleCreate" />
          </ElCollapseItem>

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

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

              <ElCollapseItem
                name="4"
                title="买方公司财务审核"
                v-if="String(data.status) === '2' && hasPermissionWithCode('020')"
              >
                <DefaultApprovalNode approve-value="3" reject-value="7" @approval="handleApproval" />
              </ElCollapseItem>

              <ElCollapseItem
                name="5"
                title="上传回执"
                v-if="String(data.status) === '3' && hasPermissionWithCode('049')"
              >
                <ReceiptApprovalNode approve-value="4" @approval="handleApproval" />
              </ElCollapseItem>
            </template>
          </div>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
