<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import InitiateAudit from "./component/approval-process/Initiate-audit.vue";
import BusinessAudit from "./component/approval-process/business-audit.vue";
import FinancialAudit from "./component/approval-process/financial-audit.vue";
import PaymentReceipt from "./component/approval-process/payment-receipt.vue";
import CreatePayment from "./component/create-payment/index.vue";
import PaymentDetail from "./component/payment-detail/index.vue";
import { useShowAudit } from "./hooks/use-show-audit";
import { useRoute, useRouter } from "vue-router";
import { useResponseHandle } from "/@/hooks";

import { httpList } from "/@/api/purchase/orderRecord";

import { httpStatus, httpAdd, httpInfo } from "/@/api/purchase/orderPay";

const { push } = useRouter();
const { query } = useRoute();
const dzNo = computed(() => query.id as string);
const isCreate = computed(() => !dzNo.value);
const responseHandle = useResponseHandle();

//对账列表
const paymentList = ref<Array<Record<string, string>>>([]);

//付款详情
const purchPayDetail = ref<Record<string, string>>({});
const handler = () => push("/purchase/purchPay");

//采购付款详情状态
const status = computed(() =>
  purchPayDetail.value ? Number(purchPayDetail.value.status) : 0
);

//展开所有折叠面板
const collapses = ["0", "1", "2", "3", "4"];

const {
  showInitiateAudit,
  showBusinessAudit,
  showFinancialAudit,
  showPaymentReceipt
} = useShowAudit(status, isCreate);

//初始化订单对账列表
async function requestPaymentList() {
  const { code, message, data } = await httpList({});

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

//请求更改付款订单状态
async function requestStatusPayment(
  status: string,
  otherParam: Record<string, string> = {}
) {
  const { code, message } = await httpStatus({
    status,
    ...otherParam,
    dzNo: dzNo.value
  });

  responseHandle({
    code,
    message,
    handler
  });
}

//请求创建付款订单
async function requesetCreatePayment(data: Record<string, string>) {
  const { code, message } = await httpAdd(data);

  responseHandle({
    code,
    message,
    handler
  });
}

//请求采购付款详情
async function requesetPaymentDetail() {
  const { message, code, data } = await httpInfo({
    DzNo: dzNo.value
  });

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

//创建选择订单对账列表 详情查询付款单详情 查询采购列表
async function initalData() {
  if (isCreate.value) return requestPaymentList();
  //拉取详情
  requesetPaymentDetail();
}

//初始化数据
onMounted(() => initalData());
</script>

<template>
  <div class="pay__content" bg-white>
    <!-- 创建采购付款订单 -->
    <CreatePayment
      v-if="isCreate"
      :paymentList="paymentList"
      @create-payment="requesetCreatePayment"
    />

    <!-- 采购付款订单详情 -->
    <ElTabs v-else>
      <ElTabPane label="采购付款申请详情">
        <ElCollapse v-model="collapses">
          <!-- 详情 -->
          <ElCollapseItem title="采购付款申请详情" name="0">
            <PaymentDetail :detail="purchPayDetail" />
          </ElCollapseItem>

          <!-- 审核 -->
          <ElCollapseItem
            name="1"
            title="发起审核流程"
            v-if="showInitiateAudit"
          >
            <InitiateAudit @change-status="requestStatusPayment" />
          </ElCollapseItem>

          <ElCollapseItem name="2" title="业务审核" v-if="showBusinessAudit">
            <BusinessAudit @change-status="requestStatusPayment" />
          </ElCollapseItem>

          <ElCollapseItem name="3" title="财务审核" v-if="showFinancialAudit">
            <FinancialAudit @change-status="requestStatusPayment" />
          </ElCollapseItem>

          <ElCollapseItem name="4" title="付款回执" v-if="showPaymentReceipt">
            <PaymentReceipt @change-status="requestStatusPayment" />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>

      <!-- 审批记录 -->
      <ElTabPane label="审批记录" />
    </ElTabs>
  </div>
</template>

<style lang="scss" scoped>
.pay__content {
  padding: 10px !important;
}
</style>
