<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import OrderImportModal from "./components/OrderImportModal/index.vue"
import NotOrderImportModal from "./components/NotOrderImportModal/index.vue"
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { utils, writeFile } from "xlsx";
import { ElButton, ElDropdown } from "element-plus";
import { useUserInfo } from "/@/hooks/core/useUser";

import { orderTemplate } from "./components/OrderImportModal/columns-config"
import { notOrderTemplate } from "./components/NotOrderImportModal/columns-config"


const PageName = "inOutManager";
const router = useRouter();

const state = reactive({ orderImportVisible: false, notOrderImportVisible: false })
const hooks: PageHooks = { pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig) };

const pageContentRef = ref(null)

const { isSuperUser } = useUserInfo()

const events: PageEvents = {
  content: {
    create: () => router.push('/invoiceInOut/clinetCDetail'),
    preview: ({ id }) => router.push("/invoiceInOut/clinetCDetail?id=" + id)
  }
};

function handleDownloadTemplate(isOrder = false){
  const data = isOrder ? orderTemplate : notOrderTemplate
  const name = isOrder ? 'C端无发票订单出库模板.xlsx' : 'C端无发票非订单出库模板.xlsx'

  const workBook = utils.book_new()
  const workSheet = utils.json_to_sheet(data)
  utils.book_append_sheet(workBook, workSheet, 'sheet');
  writeFile(workBook, name, { bookType: 'xlsx' })
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer :hooks="hooks" :events="events" :searchConfig="searchConfig" :contentConfig="contentConfig"
      :get-content-ref="ref => pageContentRef = ref">
      <template #content_header>
        <ElDropdown>
          <ElButton v-if="!isSuperUser" size="small" type="primary" style="margin-right: 10px;margin-top:1px"
            :icon="useRenderIcon('arrow-up-line')">C端无发票订单出库导入
          </ElButton>

          <template #dropdown>
            <ElDropdownItem @click="state.orderImportVisible = true">订单导入</ElDropdownItem>
            <ElDropdownItem @click="state.notOrderImportVisible = true">非订单导入</ElDropdownItem>
          </template>
        </ElDropdown>

        <ElDropdown>
          <ElButton size="small" style="margin-right: 10px;margin-top:1px" :icon="useRenderIcon('arrow-down-line')">
            C端无发票订单出库模板
          </ElButton>

          <template #dropdown>
            <ElDropdownItem @click="handleDownloadTemplate(true)">订单导入</ElDropdownItem>
            <ElDropdownItem @click="handleDownloadTemplate(false)">非订单导入</ElDropdownItem>
          </template>
        </ElDropdown>

        <ElButton v-if="!isSuperUser" size="small" type="primary" @click="router.push('/invoiceInOut/clinetCDetail')">
          批量审核
        </ElButton>
      </template>
    </PageContainer>

    <OrderImportModal v-model:visible="state.orderImportVisible" @refresh="pageContentRef?.onSearch()" />

    <NotOrderImportModal v-model:visible="state.notOrderImportVisible" @refresh="pageContentRef?.onSearch()" />
  </PageAuth>
</template>
