<script setup>
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 MyDesigner from '@grapecity-software/spread-sheets-designer-vue'

GC.Spread.Common.CultureManager.culture('zh-cn')

const config = GC.Spread.Sheets.Designer.DefaultConfig
config.commandMap = {
  Welcome: {
    title: 'Welcome',
    text: 'Welcome',
    iconClass: 'ribbon-button-welcome',
    bigButton: 'true',
    commandName: 'Welcome',
    execute: async (context, propertyName, fontItalicChecked) => {
      alert('Welcome to new designer.')
    },
  },
}
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: 2,
}
const designer = ref(null)
const spread = ref(null)
const sheet = ref(null)
// designer初始化完成
const designerInitialized = async (value) => {
  designer.value = value
  spread.value = designer.value.getWorkbook() // 获取设计器的工作簿
  sheet.value = spread.value.getActiveSheet() // 获取当前表单
  const res = await fetch('http://111.198.10.15:21408/test/压力表-新_1741080567308.xlsx')
  const file = await res.blob()
  spread.value.import(
    file,
    () => {
      console.log('spread：导入文件成功')
    },
    (e) => {
      console.log('spread：上传文件发生错误', e)
    },
    {
      fileType: GC.Spread.Sheets.FileType.excel,
    },
  )
}
</script>

<template>
  <div id="gc-designer-container">
    <my-designer
      :style-info="styleInfo"
      :config="config"
      :spread-options="spreadOptions"
      @designer-initialized="designerInitialized"
    />
  </div>
</template>

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

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