<script setup lang="ts">
import { computed, ref, watchEffect, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useResponseHandle } from "/@/hooks";
import { httpInfo, httpStatus } 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 StatementDetail from "./components/statement-detail/index.vue";
import { useUserStoreHook } from "/@/store/modules/user";
const { query } = useRoute();
const { push } = useRouter();
const powers = ref([]);
const payNo = computed(() => query.id as string);
const isCreate = computed(() => !payNo.value);
const responseHandle = useResponseHandle();

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

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

//对账单详情
const statementDetail = ref<Record<string, string>>({});

async function initalStatementDetail() {
  const { code, message, data } = await httpInfo({
    payNo: payNo.value
  });

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

//更改付款单审核状态
async function requesetChangeStatus(otherParams: any) {
  const { message, code } = await httpStatus({
    payNo: payNo.value,
    ...otherParams
  });

  responseHandle({
    code,
    message,
    handler: () => push("/purchase/orderRecord")
  });
}
onMounted(() => {
  powers.value = useUserStoreHook().getMenuActions("orderRecordDetail");
});
//初始化对账单详情
watchEffect(() => payNo.value && initalStatementDetail());
</script>

<template>
  <div class="porde__content" bg-white>
    <div v-show="powers.some(i => i == '007')">
      <!-- 创建 -->
      <CreateStatement v-if="isCreate" />

      <!-- 详情 -->
      <ElTabs v-else>
        <ElTabPane label="订单对账详情">
          <ElCollapse v-model="collapses">
            <!-- 详情 -->
            <ElCollapseItem title="订单对账详情" name="1">
              <StatementDetail :statement-detail="statementDetail" />
            </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="!powers.some(i => i == '007')" />
  </div>
</template>

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