<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import RefundDetail from "./components/refund-detail/index.vue";
import { approval_process } from "./components/approval-process";
import { httpStatus, httpDetail } from "/@/api/InvoiceSales/returnTicket";
import CreateReturnTicket from "./components/create-return-ticket/index.vue";
import Invoice from "/@/components/InvoiceTitle";
import { useAsync } from "/@/hooks";

const { query } = useRoute();
const collapses = ref(["1", "2", "3"]);
const returnCode = computed(() => query.id);

const isCreate = computed(() => !returnCode.value);

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

//退票详情
const requesetReturnTicketDetail = () => {
  run(httpDetail({ returnCode: returnCode.value }) as any);
};

const { run: retrunTicketStatusRun } = useAsync({
  success: () => requesetReturnTicketDetail()
});

//退票审核流程
const requesetRetrunTicketStatus = otherParmas => {
  retrunTicketStatusRun(
    httpStatus({
      returnCode: returnCode.value,
      ...otherParmas
    }) as any
  );
};

//映射当前审批流程
const currentProcess = computed(() => {
  const { status } = data.value;
  return approval_process[status];
});

function initalData() {
  !isCreate.value && requesetReturnTicketDetail();
}

onMounted(() => initalData());
</script>
<template>
  <div class="return-ticket__content" bg-white v-loading="loading">
    <div v-if="isCreate">
      <CreateReturnTicket />
    </div>

    <ElTabs v-else>
      <ElTabPane label="详情">
        <!-- 详情 -->
        <ElCollapse v-model="collapses">
          <!-- 退票单详情 -->
          <ElCollapseItem title="退票单详情" name="1">
            <RefundDetail v-loading="loading" :detail="data" />
          </ElCollapseItem>

          <ElCollapseItem title="发票详情" name="2">
            <Invoice :invoice-data="data" />
          </ElCollapseItem>

          <!-- 审核 -->
          <ElCollapseItem
            name="3"
            v-if="currentProcess"
            :title="currentProcess.title"
          >
            <component
              :is="currentProcess.component"
              @change-status="requesetRetrunTicketStatus"
            />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>

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

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