<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 * 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'
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)

// designer初始化完成
const designerInitialized = (value) => {
  designer.value = value
  console.log('designer.value', designer.value)
  console.log('spread', designer.value.getWorkbook())
}
</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>