<template>
  <hot-table  ref="hotTableComponent" :settings="hotSettings" :height="200" ></hot-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Handsontable from "handsontable";
import { HotTable } from '@handsontable/vue3'
import { registerLanguageDictionary, zhCN } from 'handsontable/i18n'
import { registerAllModules } from 'handsontable/registry'
import 'handsontable/styles/handsontable.css'
import 'handsontable/styles/ht-theme-main.css'
registerAllModules()
registerLanguageDictionary(zhCN)

const hotTableComponent = ref<any>()

// 方案1：使用第一行作为列头数据
const headerRow = new Array(50).fill(null).map((_, i) => `列 ${i + 1}`)
const data: any[][] = [
  headerRow, // 第一行作为列头
  ...new Array(100) // 剩余数据行
    .fill(null)
    .map((_, row) =>
      new Array(50)
        .fill(null)
        .map((_, column) => `${row + 1}, ${column}`)
    )
];

// 方案2：启用 colHeaders 并自定义
const customColHeaders = new Array(50).fill(null).map((_, i) => `自定义列 ${i + 1}`)

const hotSettings =  {
  themeName: 'ht-theme-main',
  data,
  rowHeaders: false,
  // 选择你需要的方案：
  colHeaders:false,
  // 方案A：使用 colHeaders 自定义列头
  //colHeaders: customColHeaders,
  // 方案B：如果要用第一行作为列头，设置为 false
  // colHeaders: false,
  
  width: '100%',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
  
  // 如果使用第一行作为列头（colHeaders: false），添加以下配置
  cells: function(row: number, col: number) {
    const cellProperties: any = {};
    
    // 如果 colHeaders 为 false，将第一行设置为列头样式
    if (row === 0) {
      cellProperties.readOnly = true; // 不可编辑
      cellProperties.className = 'custom-header-row'; // 自定义样式类
      cellProperties.renderer = function(instance: any, td: HTMLTableCellElement, row: number, col: number, prop: any, value: any, cellProperties: any) {
        Handsontable.renderers.TextRenderer.apply(this, arguments as any);
        td.style.fontWeight = 'bold';
        td.style.backgroundColor = '#f5f5f5';
        td.style.textAlign = 'center';
        td.style.borderBottom = '2px solid #ddd';
      };
    }
    
    return cellProperties;
  },
  
  // 固定第一行（如果用作列头）
  fixedRowsTop: 0, // 如果 colHeaders: false，设置为 1 来固定第一行
  
  // 列宽自适应
  colWidths: 100,
};
</script>
<style lang="scss">
// 自定义列头行样式（当使用第一行作为列头时）
.custom-header-row {
  font-weight: bold;
  background-color: #f5f5f5;
  text-align: center;
  border-bottom: 2px solid #ddd;
}

// 如果需要隐藏滚动条
// .ht_master {
//   .wtHolder {
//       overflow: hidden !important;
//   }
// }
</style>
