<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { httpStatus, httpInfo } from "/@/api/purchase/ticketReturn";
import { useResponseHandle } from "/@/hooks";

import TicketDetail from "./components/ticket-detail/index.vue";
import FinancialAudit from "./components/approval-process/financial-audit.vue";
import Authentication from "./components/approval-process/authentication.vue";
import Confirm from "./components/approval-process/confirm.vue";

const { query } = useRoute();
const { push } = useRouter();
const hpNo = computed(() => query.id);
const collapses = ref(["0", "1", "2", "3"]);
const invDetail = ref<Record<string, string> | null>(null);
const responseHandle = useResponseHandle();

//请求回票状态
const status = computed(() =>
  invDetail.value ? Number(invDetail.value.status) : 0
);

//请求采购回款详情
async function requesetInvDetail() {
  const { code, message, data } = await httpInfo({
    hpNo: hpNo.value
  });

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

//请求更改回票状态
async function requestChangeInvStatus(otherParams: any) {
  const { code, message } = await httpStatus({
    hpNo: hpNo.value,
    ...otherParams
  });

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

//初始化采购回票详情数据
onMounted(() => requesetInvDetail());
</script>

<template>
  <div class="ticker__content" bg-white mb-5>
    <ElTabs>
      <!-- 采购回票详情 -->
      <ElTabPane label="采购回票详情">
        <ElCollapse v-model="collapses">
          <!-- 详情 -->
          <ElCollapseItem name="0" v-if="invDetail" title="采购回票详情">
            <TicketDetail :inv-detail="invDetail" />
          </ElCollapseItem>

          <!-- 审核流程 -->
          <ElCollapseItem name="1" title="财务审核" v-if="status === 3">
            <FinancialAudit @change-status="requestChangeInvStatus" />
          </ElCollapseItem>
          <ElCollapseItem name="2" title="待认证" v-if="status === 4">
            <Authentication @change-status="requestChangeInvStatus" />
          </ElCollapseItem>
          <ElCollapseItem name="3" title="待确认完成" v-if="status === 5">
            <Confirm @change-status="requestChangeInvStatus" />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>

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

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