<script setup lang="ts">
import { ref } from "vue";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import SheetModal from "./components/sheet-modal.vue";
import { exportPageContent } from "/@/utils/export";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import frontColumns from "./config/frontColumns";
import { ElMessage } from "element-plus";

import OrderDialog from "./components/order-dialog.vue"
import ClinetCDialog from "./components/ClientCTagDialog/index.vue"

import {
  send_status_list,
  xs_order_type_options,
  xs_order_source_options
} from "/@/utils/status";

import { inv_open_status, retrun_status } from "./config/search.config";

const PageName = "sheetOrderPool";
const selects = ref<any[]>([]);


const contentRef = ref(null)
const clinetCDialogRef = ref<InstanceType<typeof ClinetCDialog> | null>(null)
const orderDialogRef = ref<InstanceType<typeof OrderDialog> | null>(null)
const sheetModalRef = ref<InstanceType<typeof SheetModal> | null>(null);

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

const events: PageEvents = {
  content: {
    preview: ({ sequenceNo }) => sheetModalRef.value.onDisplay(sequenceNo)
  }
};
//导出模板
async function onDownloadOpenInv() {
  if (selects.value.length == 0) {
    ElMessage.error("请选择订单数据！");
    return;
  }

  let arr = [];
  selects.value.forEach(si => {
    let model = JSON.parse(JSON.stringify(si));
    model.qrdType_name = xs_order_type_options.find(s => s.value === si.qrdType)?.label || "--";
    model.sendStatus_name = send_status_list.find(s => s.value === si.sendStatus)?.label || "--";
    model.qrdSource_name = xs_order_source_options.find(s => s.value === si.qrdSource)?.label ||  "--";
    model.inv_status_name = inv_open_status.find(s => s.value === si.inv_status)?.label || "--";
    model.pay_status_name = retrun_status.find(s => s.value === si.pay_status)?.label;
    arr.push(model);
  });


  exportPageContent({
    data: arr,
    type: "front",
    columns: frontColumns
  });
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer :hooks="hooks" :events="events" :contentConfig="contentConfig" :search-config="searchConfig"
      @content-select-change="val => (selects = val)" :get-content-ref="ref => contentRef = ref">
      <template #content_header>
        <ElButton type="primary" size="small" @click="clinetCDialogRef?.show()">C端订单无票标记</ElButton>

        <ElButton type="primary" size="small" @click="orderDialogRef?.show()">批量查找订单</ElButton>

        <ElButton size="small" @click="() => onDownloadOpenInv()">
          订单信息导出
        </ElButton>
      </template>
    </PageContainer>

    <OrderDialog ref="orderDialogRef" />
    <SheetModal ref="sheetModalRef" />

    <ClinetCDialog ref="clinetCDialogRef" @reload="contentRef?.onSearch()" />
  </PageAuth>
</template>
