<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useResponseHandle } from "/@/hooks";
import { CapitalDetailType } from "./types";
import { httpDetail, httpStatus } from "/@/api/InvoiceSales/capitalPool";
import { capital_detail_columns } from "./config/configs";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { approval_process } from "./components/approval-process";

const { query } = useRoute();
const { push } = useRouter();
const responseHandle = useResponseHandle();
const capitalDetail = ref<CapitalDetailType>({});
const collapses = ref(["1", "2"]);

const logNo = computed(() => query.id);

//当前的审核流程
const currentProcess = computed(() => {
  const { status } = capitalDetail.value;
  return approval_process[status];
});

//资金认领详情
async function requesetCapitalDetail() {
  const { code, message, data } = await httpDetail({
    logNo: logNo.value
  });

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

//资金认证状态
async function requesetCapitalStatus(otherParams) {
  const { code, message } = await httpStatus({
    logNo: logNo.value,
    ...otherParams
  });

  responseHandle({
    code,
    message,
    handler: () => push("/InvoiceSales/capitalPool")
  });
}

//初始化数据
function initalData() {
  if (!logNo.value) return;
  requesetCapitalDetail();
}

onMounted(() => initalData());
</script>

<template>
  <div class="capital__content" bg-white>
    <ElCollapse v-model="collapses">
      <!-- 详情 -->
      <ElCollapseItem title="订单对账详情" name="1">
        <BasicDescriptions
          :columns="capital_detail_columns"
          :data="capitalDetail"
          :col-number="2"
        />
      </ElCollapseItem>

      <!-- 审核 -->
      <ElCollapseItem
        name="2"
        v-if="currentProcess"
        :title="currentProcess.title"
      >
        <component
          :is="currentProcess.component"
          @change-status="requesetCapitalStatus"
        />
      </ElCollapseItem>
    </ElCollapse>
  </div>
</template>

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