<!-- 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 * as GC from '@grapecity-software/spread-sheets'
import '@grapecity-software/spread-sheets-print'
import '@grapecity-software/spread-sheets-shapes'
import '@grapecity-software/spread-sheets-slicers'
import '@grapecity-software/spread-sheets-pivot-addon'
import '@grapecity-software/spread-sheets-tablesheet'
import '@grapecity-software/spread-sheets-ganttsheet'
import '@grapecity-software/spread-sheets-reportsheet-addon'
import '@grapecity-software/spread-sheets-formula-panel'
import '@grapecity-software/spread-sheets-io'
import '@grapecity-software/spread-sheets-resources-zh'
import '@grapecity-software/spread-sheets-designer-resources-cn'
import '@grapecity-software/spread-sheets-designer'
import MyDesigner from '@grapecity-software/spread-sheets-designer-vue'
import { importFile } from './index'
const emits = defineEmits(['initComplete'])
GC.Spread.Common.CultureManager.culture('zh-cn')
const config = GC.Spread.Sheets.Designer.DefaultConfig

// ----------------------------------------初始化相关-----------------------------------------------
// 左上角按钮事件
config.commandMap = {
  Welcome: {
    title: '执行表格绑定',
    text: 'Welcome',
    iconClass: 'ribbon-button-welcome',
    bigButton: 'true',
    commandName: 'Welcome',
    execute: async (context, propertyName, fontItalicChecked) => {
      handleBindForm()
    },
  },
}
// 左上角按钮配置
config.ribbon[0].buttonGroups.unshift({
  label: 'NewDesigner',
  thumbnailClass: 'welcome',
  commandGroup: {
    children: [
      {
        direction: 'vertical',
        commands: ['Welcome'],
      },
    //   // This is custom button ----------------end-------------
    ],
  },
})

const styleInfo = { height: '86vh', width: '100%' }
const spreadOptions = {
  sheetCount: 1, // 表格初始化的时候有几个sheet页
}
const designer: any = ref(null)
const spread: any = ref(null)
const sheet: any = ref(null)

// designer初始化完成
const designerInitialized = async (value: any) => {
  designer.value = value
  spread.value = designer.value!.getWorkbook() // 获取设计器的工作簿
  sheet.value = spread.value!.getActiveSheet() // 获取当前表单
  // excelIO.value = new GC.Spread.Excel.IO()
  console.log('designer.value', designer.value)
  console.log('spread', spread.value)
  console.log('sheet', sheet.value)
  // emits('initComplete', spread.value)

  const res = await fetch('http://111.198.10.15:21408/test/压力表-新_1741080567308.xlsx')
  const file: any = await res.blob()
  importFile(spread.value, file)
}

// -----------------------------------一些表格操作-------------------------------------------------
const handleImportFile = (file: any) => {
  importFile(spread.value, file).then(() => {
    // handleBindForm()
  })
}

// 表格绑定
function handleBindTable() {
  console.log('执行表格绑定')
  const datasource = {
    dw: '我是单位',
    dz: '我是地址',
  }
  // var datasource = [
  //   { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' },
  // ]
  // var colInfos = [
  //   { name: 'position', displayName: '姓名', size: 50, visible: false },
  //   { name: 'name', displayName: 'Display Name', size: 70 },
  //   { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 },
  //   { name: 'age', displayName: 'Age', size: 40, resizable: false },
  // ]
  const sheet = spread.value.getSheet(1) // 获取第几个sheet页
  // sheet.autoGenerateColumns = false
  sheet.setDataSource(datasource)
  // sheet.bindColumns(colInfos)
}

// 表单绑定
function handleBindForm() {
  console.log('执行表单绑定')
  const data = {
    dw: '我是单位',
    dz: '我是地址',
  }
  const source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)
  const sheet = spread.value.getSheet(0) // 获取第几个sheet页
  sheet.setDataSource(source)
}

// ----------------------------------弹窗基本操作-----------------------------------------------
const dialogVisible = ref(false) // 弹窗显示
const loading = ref(false)
// 初始化弹窗
const initDialog = (id: string, sampleid: string, orderid: string) => {
  dialogVisible.value = true
}
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="gc-designer-container">
      <my-designer
        :style-info="styleInfo"
        :config="config"
        :spread-options="spreadOptions"
        @designer-initialized="designerInitialized"
      />
    </div>
    <template #footer>
      <el-button type="info" @click="closeDialog">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

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

.ribbon-button-welcome {
  background-image: url("./assets/welcome.png");
  background-size: 35px 35px;
}
</style>