<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CreateRefund from "./components/create-refund/index.vue";
import RefundDetail from "./components/refund-detail/index.vue";
import { httpDetail } from "/@/api/InvoiceSales/refund";
import { approval_process } from "./components/approval-process";
import { useResponseHandle } from "/@/hooks";

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

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

const isCreate = computed(() => !returnCode.value);
const refundDetail = ref<Record<string, string>>({});
const responseHandle = useResponseHandle();
const currentProcess = computed(() => {
  const { status } = refundDetail.value;
  return approval_process[status];
});

async function requesetRefundDetail() {
  const { code, message, data } = await httpDetail({
    returnCode: returnCode.value
  });

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

async function requesetRefundStatus(otherParmas) {
  const { code, message } = await httpDetail({
    returnCode: returnCode.value,
    ...otherParmas
  });

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

function initalData() {
  if (isCreate.value) return;
  requesetRefundDetail();
}

onMounted(() => initalData());
</script>
<template>
  <div class="refund__content" bg-white>
    <!-- 创建退款单 -->
    <CreateRefund v-if="isCreate" />

    <!-- 详情 -->
    <ElCollapse v-else v-model="collapses">
      <!-- 退款单详情 -->
      <ElCollapseItem title="退款单详情" name="1">
        <RefundDetail :detail="refundDetail" />
      </ElCollapseItem>

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

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