<script setup lang="ts">
import { computed, ref } from "vue";
import { useDetail } from "/@/hooks/core/useDetail";
import CreateReturnForm from "./components/return-form.vue";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ApprovalPending from "./components/approval-pending.vue";
import Invoice from "/@/components/Invoice";
import { invReturnColumns } from "./config/_details";
import { useAsync } from "/@/hooks/core/useAsync";
import { useRouter } from "vue-router";
import { useUserInfo } from "/@/hooks/core/useUser";
import { usePermission } from "/@/hooks/core/usePermission";
import InvoiceDetailVue from "/@/views/InvoiceSales/invoiceApply/components/invoice-detail/index.vue";

import {
  httpDetail,
  httpAdd,
  httpStatus
} from "/@/api/InvoiceSales/returnTicket";
import { httpDetail as invoiceHttpDetail } from "/@/api/InvoiceSales/invoiceApply";

const { push } = useRouter();

const pageName = "returnTicketDetail";
const orginInvData = ref<any>({});

const { hasPermissionWithCode } = usePermission(pageName);

const { id, isDetail, collapses, title } = useDetail({
  baseName: "退票申请",
  collapseLen: 5
});

const { isSuperUser } = useUserInfo();

const {
  data,
  run: detail,
  loading
} = useAsync<Record<string, string>>({
  initalData: {},
  success: ({ invNo }) => {
    invoiceDetailRun(invoiceHttpDetail({ invNo }));
  }
});

const { run: create } = useAsync({
  success: () => push("/InvoiceSales/returnTicket")
});

const { run: approval } = useAsync({
  success: () => {
    detail(httpDetail({ returnCode: id.value }));
  }
});

//是否普票
const isNormal = computed(() => {
  const { inv_type } = data.value;
  return inv_type === "2" || inv_type === "3";
});

//是否支持金税
const isJS = computed(() => {
  const { open_type } = data.value;
  return String(open_type) === "1";
});

//是否跨月
const is_out_month = computed(() => {
  const { is_out_month } = data.value;
  return is_out_month;
});

const isNormalOpen = computed(() => {
  const { open_type } = invoiceDetail.value;
  return ["2", "3"].includes(String(open_type));
});

//发票类型
const inv_type = computed(() => {
  const { inv_type } = data.value;
  return inv_type;
});

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

function getOriginInvoice() {
  const { inv_code, inv_number, open_date, inv_subtotal, check_code } =
    orginInvData.value;

  return {
    invCode: inv_code,
    invNum: inv_number,
    open_date,
    subtotal_fee: inv_subtotal,
    checkCode: check_code
  };
}

function handleApproval(_data, isOutMonthAndPapar = false) {
  const _orginInvData = getOriginInvoice();

  const params = {
    returnCode: id.value,
    ..._data,
    ...(isOutMonthAndPapar ? _orginInvData : {})
  };

  approval(httpStatus(params));
}

const handleCreate = _data => {
  create(httpAdd(_data));
};

if (isDetail.value) {
  detail(httpDetail({ returnCode: id.value }));
}
</script>

<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem name="1" :title="title">
            <BasicDescriptions
              v-if="isDetail"
              v-loading="loading"
              :columns="invReturnColumns"
              :data="data"
            />
            <CreateReturnForm v-else @create="handleCreate" />
          </ElCollapseItem>

          <template v-if="isDetail">
            <ElCollapseItem name="2" title="发票申请详情" v-if="data.invNo">
              <InvoiceDetailVue
                v-loading="loadingInvoice"
                :detail="invoiceDetail"
              />
            </ElCollapseItem>
            <ElCollapseItem
              name="3"
              title="蓝票详情"
              v-if="
                invoiceDetail &&
                invoiceDetail.invinfo &&
                invoiceDetail.invinfo.inv_number
              "
            >
              <Invoice
                type="sale"
                :inv-number="invoiceDetail.invinfo.inv_number"
                @get-invoice-data="data => (orginInvData = data)"
              />
            </ElCollapseItem>

            <template v-if="!isSuperUser">
              <ElCollapseItem
                name="4"
                title="待审核"
                v-if="
                  String(data.status) === '0' && hasPermissionWithCode('025')
                "
              >
                <ApprovalPending
                  :isNormal="isNormal"
                  :is-js="isJS"
                  :is-out-month="is_out_month"
                  :is-normal-open="isNormalOpen"
                  :inv-type="inv_type"
                  :company-no="data.companyNo"
                  @approval="handleApproval"
                  :getOriginInvoice="getOriginInvoice"
                />
              </ElCollapseItem>
            </template>
          </template>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
