<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { approvalProcess } from "./components/approval-process";
import { examRecord } from "/@/components/examRecord";
import Invoice from "/@/components/InvoiceTitle";
import { useAsync, useResponseHandle } from "/@/hooks";
import { useRoute, useRouter } from "vue-router";
import InvoiceDetailVue from "./components/invoice-detail/index.vue";
import AddEditForm from "./components/add-edit-form/add-edit-form.vue";

import {
  httpSetPost,
  httpStatus,
  httpDetail
} from "/@/api/InvoiceSales/invoiceApply";

defineOptions({
  name: "InvoiceApplyDetail"
});

const { query } = useRoute();
const { push } = useRouter();
const responseHandle = useResponseHandle();

const examCode = ref("");
const activeName = computed(() => (isCreate.value ? "0" : "1"));
const collapseItem = ref(["0", "1", "2", "3", "4"]);

const id = computed(() => query.id);
const isCreate = computed(() => !id.value);

const {
  loading,
  data: invoiceDetail,
  run: invoiceDetailRun
} = useAsync<Record<string, string>>({
  initalData: {}
});

//当前的审批流程 ->
const currentProcess = computed(() => {
  const { status } = invoiceDetail.value;
  return approvalProcess[status] || {};
});

//设置状态/物流
async function handleChangeStatus({ status, ...otherParmas }) {
  let response: any;
  if (!status) {
    //设置物流
    response = await httpSetPost({ invNo: id.value, ...otherParmas });
  } else {
    //设置状态
    response = await httpStatus({ invNo: id.value, status, ...otherParmas });
  }

  const { code, message } = response;

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

const requesetInvoiceDetail = () => {
  invoiceDetailRun(httpDetail({ invNo: id.value }));
};

onMounted(() => !isCreate.value && requesetInvoiceDetail());
</script>

<template>
  <div class="main bg-white">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="新建发票申请" name="0" v-if="isCreate">
        <AddEditForm />
      </el-tab-pane>

      <el-tab-pane label="业务详情" name="1" v-if="!isCreate">
        <el-collapse v-model="collapseItem">
          <el-collapse-item title="发票申请详情" name="2">
            <InvoiceDetailVue v-loading="loading" :detail="invoiceDetail" />
          </el-collapse-item>

          <el-collapse-item title="发票详情" name="3">
            <Invoice :invoice-data="invoiceDetail" />
          </el-collapse-item>

          <el-collapse-item
            name="4"
            :title="currentProcess.title"
            v-if="Object.keys(currentProcess).length"
          >
            <component
              :is="currentProcess.component"
              @change-status="handleChangeStatus"
            />
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="审批记录" name="2" v-if="!isCreate">
        <examRecord :examCode="examCode" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
