<!-- excel在线编辑 -->
<script setup lang="ts" name="ExcelEditDialog">
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import GC from '@grapecity-software/spread-sheets'
import '@grapecity-software/spread-sheets-shapes'
import '@grapecity-software/spread-sheets-charts'
import '@grapecity-software/spread-sheets-slicers'
import '@grapecity-software/spread-sheets-print'
import '@grapecity-software/spread-sheets-barcode'
import '@grapecity-software/spread-sheets-pdf'
import '@grapecity-software/spread-sheets-pivot-addon'
import '@grapecity-software/spread-sheets-tablesheet'
import '@grapecity-software/spread-sheets-ganttsheet'
import '@grapecity-software/spread-sheets-formula-panel'
import '@grapecity-software/spread-sheets-reportsheet-addon'
import '@grapecity-software/spread-sheets-io'
import '@grapecity-software/spread-excelio'
import '@grapecity-software/spread-sheets-resources-zh'
// 注意：spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序
import '@grapecity-software/spread-sheets-designer-resources-cn'
import '@grapecity-software/spread-sheets-designer'
import qrImg from '../../../../assets/images/qrExample.png'
import { exportFile, importFile } from './methods/file'
import bindForm from './methods/bind/bindForm'
import bindTable from './methods/bind/bindTable'
import bindPicture from './methods/bind/bindPicture'
import bindPagingSeal from './methods/pagingSeal'
import { importSjsFile } from './index'
const emits = defineEmits(['initComplete'])
GC.Spread.Common.CultureManager.culture('zh-cn')
let designer: any = null // 表格设计器实例
let spread: any = null // 创建工作簿实例
let sheet: any = null // 获取当前活动工作表
const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素
// ----------------------------------------初始化相关-----------------------------------------------
// designer初始化完成
async function initComplete() {
  emits('initComplete', spread)
}

// -----------------------------------导入导出-------------------------------------------------
// 执行导入文件
const handleImportFile = (file: any, data: any) => {
  // 导入完成
  importFile(spread, file).then(() => {
    // 绑定表单
    bindForm(spread, data)
    // 绑定表格
    // bindTable(spread, data)
    // 绑定图片
    handleBindPicture()
    // 骑缝章
    bindPagingSeal(
      spread,
      'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png',
      180, 120
    )
  })
}
// 执行导出文件
const handleExportFile = async () => {
  const blob = await exportFile(spread, 'xlsx', false)
  console.log('获取到文件', blob)
}

// -----------------------------------图片-------------------------------------------------------
function handleBindPicture() {
  const sheet = spread.getSheetFromName('证书首页') // 获取证书首页sheet页
  // 二维码章
  bindPicture(
    sheet,
    'qr',
    qrImg,
    150,
    150,
    51,
    19,
  )
  // 校准专用章
  bindPicture(
    sheet,
    'singer',
    'http://111.198.10.15:21408/test/校准专用章新_1711095570061.png',
    180,
    120,
    36,
    13,
  )
}
// ----------------------------------弹窗基本操作-----------------------------------------------
const dialogVisible = ref(false) // 弹窗显示
const loading = ref(false)
// 初始化弹窗
const initDialog = (id: string, sampleid: string, orderid: string) => {
  dialogVisible.value = true
  nextTick(() => {
    designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value) // 表格设计器实例
    spread = designer.getWorkbook() // 创建工作簿实例
    sheet = spread.getActiveSheet() // 获取当前活动工作表
    console.log('当前工作表sheet', sheet)

    initComplete()
  })
}
const closeDialog = () => {
  dialogVisible.value = false
}

// -------------------------------------------------------------------------------------------
defineExpose({ initDialog, handleImportFile })
</script>

<template>
  <el-dialog v-model="dialogVisible" v-loding="loading" :z-index="1200" append-to-body class="excel-edit-dialog" :fullscreen="true" title="excel在线编辑" width="700" @close="closeDialog">
    <div id="designer-container" ref="designerContainerRef" />
    <template #footer>
      <el-button type="info" @click="closeDialog">
        关闭
      </el-button>
      <!-- <el-button type="info" @click="handleBindForm">
        绑定
      </el-button> -->
      <el-button type="info" @click="handleExportFile">
        导出
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss">
#designer-container {
  width: 100%;
  height: 86vh;
}
</style>