<script setup lang="ts">
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')
let designer: any = null
let spread: any = null
let sheet: any = null
const designerContainerRef = ref(null) // 引用Designer的宿主Dom元素

// designer初始化完成
const designerInitialized = async (value) => {
  const res = await fetch('http://111.198.10.15:21408/test/压力表-新_1741080567308.xlsx')
  const file = await res.blob()
  spread.import(
    file,
    () => {
      console.log('spread：导入文件成功')
    },
    (e) => {
      console.log('spread：上传文件发生错误', e)
    },
    {
      fileType: GC.Spread.Sheets.FileType.excel,
    },
  )
}

onMounted(() => {
  designer = new GC.Spread.Sheets.Designer.Designer(designerContainerRef.value)
  spread = designer.getWorkbook()
  sheet = spread.getActiveSheet()
  designerInitialized()
})
</script>

<template>
  <div id="designer-container" ref="designerContainerRef" />
</template>

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

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