<script setup lang="ts">
import { computed, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { httpInfo } from "/@/api/purchase/orderRecord";
import InitiateAudit from "./components/approval-process/Initiate-audit.vue";
import BusinessReview from "./components/approval-process/business-review.vue";
import FinancialAudit from "./components/approval-process/financial-audit.vue";
import CreateStatement from "./components/create-statement/index.vue";
import OrderRecordDetail from "/@/components/OrderRecordDetail";
import { httpStatus } from "/@/api/purchase/orderRecord";
import { useAsync, usePermission } from "/@/hooks";

const { query } = useRoute();
const payNo = computed(() => query.id as string);
const isCreate = computed(() => !payNo.value);

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

//对账单状态
const status = computed(() => Number(statementDetail.value.status));

const { run: statementStatusRun } = useAsync({
  success: () => requesetStatementDetail()
});
const {
  data: statementDetail,
  run: statementDetailRun,
  loading
} = useAsync<Record<string, string>>({
  initalData: {}
});

const requesetStatementDetail = () => {
  statementDetailRun(
    httpInfo({
      payNo: payNo.value
    })
  );
};

//更改付款单审核状态
const requesetChangeStatus = otherParams => {
  statementStatusRun(httpStatus({ payNo: payNo.value, ...otherParams }));
};

const { permission } = usePermission({
  pageName: "orderRecordDetail"
});

//初始化对账单详情
watchEffect(() => payNo.value && requesetStatementDetail());
</script>

<template>
  <div class="porde__content" bg-white v-loading="loading">
    <div v-show="permission.detail">
      <!-- 创建 -->
      <CreateStatement v-if="isCreate" />

      <!-- 详情 -->
      <ElTabs v-else>
        <ElTabPane label="订单对账详情">
          <ElCollapse v-model="collapses">
            <!-- 详情 -->
            <ElCollapseItem title="订单对账详情" name="1">
              <OrderRecordDetail :pay-no="payNo" />
            </ElCollapseItem>

            <!-- 审批流程 -->
            <ElCollapseItem name="2" v-if="status === 0" title="发起审核流程">
              <InitiateAudit @change-status="requesetChangeStatus" />
            </ElCollapseItem>

            <ElCollapseItem name="3" v-if="status === 1" title="采购审核">
              <BusinessReview @change-status="requesetChangeStatus" />
            </ElCollapseItem>

            <ElCollapseItem name="4" v-if="status === 2" title="财务审核">
              <FinancialAudit @change-status="requesetChangeStatus" />
            </ElCollapseItem>
          </ElCollapse>
        </ElTabPane>

        <ElTabPane label="审批记录" />
      </ElTabs>
    </div>
    <NoAuth v-show="!permission.detail" />
  </div>
</template>

<style lang="scss">
.porde__content {
  padding: 20px !important;
}
</style>
