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

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

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

import {
  httpDetail,
  httpStatus,
  httpOldStatus,
  httpOldAdd,
  httpAdd
} from "/@/api/purchase/purchPayRelive";

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

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

const { isSuperUser } = useUserInfo();

const isDisplay = ref(true)

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: {},
  success: ({ orderCode }) => payDetailRun(httpPayDetail({ dzNo: orderCode }))
});

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

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

const { run: approval } = useAsync({
  success: () => {
    requesetDetail();
    isDisplay.value = false
    nextTick(() => isDisplay.value = true)
  }
});

const requesetDetail = () => detail(httpDetail({ returnCode: id.value }));
const handleCreate = (data, isOld) => create( isOld.value ? httpOldAdd(data)  : httpAdd(data));
const handleApproval = _data => {
  const { payNo } = data.value
  const date = payNo.slice(3, 9)
  const isOld = Number(date) < PURCHASE_OLD_APPLY_DATE
  approval(isOld ? httpOldStatus({ returnCode: id.value, ..._data  })  : httpStatus({ returnCode: id.value, ..._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" class="mb-2" :columns="purchpayReliveColumns" :data="data" />

            <!-- 创建：选择付款解除 -->
            <ChooseForm v-else @create="handleCreate" />
          </ElCollapseItem>

          <ElCollapseItem v-if="isDetail" name="4" title="采购付款详情">
            <!-- 采购付款详情 -->
            <BasicDescriptions
              :columns="(!payDetailData.cgdlist || payDetailData.cgdlist.length === 0) ? purchpayColumns : purchpayColumnsNew"
              :data="payDetailData" />
          </ElCollapseItem>

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

            <ElCollapseItem name="3" title="买方公司财务审核" v-if="
                String(data.status) === '1' &&
                !isSuperUser &&
                hasPermissionWithCode('020')
              ">
              <ReceiptApprovalNode no-time has-remark approve-value="2" reject-value="3" img-prop="returnImg"
                @approval="handleApproval" />
            </ElCollapseItem>
          </div>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
