<script setup lang="ts">
import { ref, shallowReactive } from "vue";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import InvoiceModal from "./components/invoice-modal.vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useRouter } from "vue-router";
// import { useUserInfo } from "/@/hooks/core/useUser";
import { httpRequsetExport } from "/@/utils/export";
import { useCompany } from "/@/hooks/core/useCompany";
import { PageContent } from "/@/components/PageContent";
import { utils, writeFile } from "xlsx";
import { template } from "./config/xls-template";
import ExeclUpoad from "./components/execl-files-upload/index.vue";
import { usePermission } from "/@/hooks/core/usePermission";
import { useUserInfo } from "/@/hooks/core/useUser";

import ExcelUploadInv from "./components/execl-files-upload-inv/index.vue";


const PageName = "supSendOrderInvoice";
const baseUrl = "/supplierOrder/supSendOrderInvoiceDetail";
const invStatus = ["4", "10"];

// { code: "017", name: "导出回票数据" },
// { code: "018", name: "批量导入认证结果" },
// { code: "019", name: "下载认证模板" }
const { isSuperUser } = useUserInfo();
const { hasPermissionWithCode } = usePermission(PageName);
const pageContentRef = ref<InstanceType<typeof PageContent> | null>(null);

const state = shallowReactive({
  payNo: "",
  hpNo: ""
});

const { push } = useRouter();
const { currentCompany } = useCompany();
const loading = ref(false);
const invoiceModalRef = ref<InstanceType<typeof InvoiceModal>>(null);
const execelUploadRef = ref<InstanceType<typeof ExeclUpoad>>(null);
const execelUploadInvRef = ref<InstanceType<typeof ExcelUploadInv>>(null);
const data = ref({ inv_subtotal_amount: "", total: "" });
async function handleDownload() {
  await httpRequsetExport({
    url: "ile",
    name: "回票数据表",
    onStart: () => (loading.value = true),
    onSuccess: () => (loading.value = false),
    onFail: () => (loading.value = false),
    params: {
      companyNo: currentCompany.value.companyNo,
      ...(pageContentRef.value as any).getBasicParams()
    }
  });
}

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
};

const events: PageEvents = {
  content: {
    preview: ({ hpNo }) => push(`${baseUrl}?id=${hpNo}`),
    create: () => push(baseUrl),
    result: ({ inv_subtotal_amount, total }) => {
      const params = (pageContentRef.value as any).getBasicParams();
      state.hpNo = params.hpNo;
      state.payNo = params.payNo;
      data.value.inv_subtotal_amount = inv_subtotal_amount;
      data.value.total = total;
    }
  }
};

//导出模板
function onDownloadTemplate() {
  //创建数据表
  const workBook = utils.book_new();
  const workSheet = utils.json_to_sheet([template]);
  utils.book_append_sheet(workBook, workSheet, "sheet");
  //导出模板
  writeFile(workBook, "批量导入回票模板.xlsx", { bookType: "xlsx" });
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :events="events"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      :get-content-ref="(ref:any) => (pageContentRef = ref)"
    >
      <template #content_table_header>
        <p v-if="state.payNo || state.hpNo">
          合计:发票税前金额:{{ data.inv_subtotal_amount }},价税合计:{{ data.total }}
        </p>
      </template>

      <template #content_header>
        <ElButton
          size="small"
          v-if="hasPermissionWithCode('017')"
          :icon="useRenderIcon('arrow-down-line')"
          :loading="loading"
          @click="() => handleDownload()"
          >导出回票数据</ElButton
        >

        <ElButton
          size="small"
          v-if="hasPermissionWithCode('033') && !isSuperUser"
          :icon="useRenderIcon('arrow-up-line')"
          @click="() => execelUploadInvRef.onDisplay()"
          >批量创建开票数据</ElButton
        >

        <ElButton
          size="small"
          v-if="hasPermissionWithCode('018') && !isSuperUser"
          :icon="useRenderIcon('arrow-up-line')"
          @click="() => execelUploadRef.onDisplay()"
          >批量导入认证结果</ElButton
        >

        <ElButton
          size="small"
          v-if="hasPermissionWithCode('019')"
          :icon="useRenderIcon('arrow-down-line')"
          @click="() => onDownloadTemplate()"
          >下载认证模板 </ElButton
        >
      </template>

      <template #content_action="row">
        <ElButton
          v-if="invStatus.includes(String(row.status))"
          link
          type="primary"
          :icon="useRenderIcon('scaletooriginal')"
          @click="() => invoiceModalRef.onDisplay(row)"
        />
      </template>
    </PageContainer>

    <InvoiceModal ref="invoiceModalRef" />
    <ExeclUpoad ref="execelUploadRef" />

    <ExcelUploadInv 
      ref="execelUploadInvRef" 
      @on-success="() => (pageContentRef as any).onSearch()"
      />
  </PageAuth>
</template>
