<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { DbHst } from '#/components/db-hst'
import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
const props = defineProps<{
  height?: number
}>()
const hstRef = ref<any>(null)
const columns = ref<any[]>([
  { type: 'text', data: 'seq', title: '序', width: 40 },
  { type: 'text', data: 'code', title: '编码', renderer: codeRenderer },
  { type: 'text', data: 'category', title: '类别' },
  { type: 'text', data: 'name', title: '名称' },
  { type: 'text', data: 'feature', title: '项目特征' },
  { type: 'text', data: 'locked', title: '锁定' },
  { type: 'text', data: 'unitPrice', title: '综合单价' },
  { type: 'text', data: 'unit', title: '单位' },
  { type: 'text', data: 'quantity', title: '工程量' },
  { type: 'text', data: 'comprehensivePrice', title: '综合单价' },
  { type: 'text', data: 'totalPrice', title: '综合合价' },
  { type: 'text', data: 'remark', title: '备注' },
])
let rowSchema: any = {}
// 根据 columns 的 data 字段生成对象结构
columns.value.forEach((col: any) => {
  if (col.data ) {
    rowSchema[col.data] = null
  }
})

const mockData = (() => {
  const data: any[] = []
  
  // 生成5个父级数据
  for (let i = 1; i <= 5; i++) {
    const parent = {
      seq: `${i}`,
      code: `CODE${String(i).padStart(6, '0')}`,
      category: i % 3 === 0 ? '分部分项' : i % 3 === 1 ? '措施项目' : '其他项目',
      name: `项目名称${i}`,
      feature: `特征描述${i}`,
      locked: i % 2 === 0 ? '是' : '否',
      unitPrice: `${i * 100}`,
      unit: 'm²',
      quantity: `${i * 10}`,
      comprehensivePrice: `${i * 100}`,
      totalPrice: `${i * 1000}`,
      remark: `备注${i}`,
      level: String(i - 1),
      __children: [] as any[]
    }
    
    // 为每个父级生成3-5个子级
    const childCount = Math.floor(Math.random() * 3) + 3
    for (let j = 1; j <= childCount; j++) {
      const child = {
        seq: `${i}.${j}`,
        code: `CODE${String(i).padStart(6, '0')}-${String(j).padStart(3, '0')}`,
        category: '子项',
        name: `子项目${i}-${j}`,
        feature: `子特征${j}`,
        locked: '否',
        unitPrice: `${j * 50}`,
        unit: 'm²',
        quantity: `${j * 5}`,
        comprehensivePrice: `${j * 50}`,
        totalPrice: `${j * 250}`,
        remark: `子备注${j}`,
        level: `${i - 1}.${j - 1}`,
        __children: []
      }
      parent.__children.push(child)
    }
    
    data.push(parent)
  }
  
  return data
})()

const settings = {
  data: mockData,
  dataSchema: rowSchema,
  colWidths: 120,
  columns: columns.value,
  rowHeaders: false,
  nestedRows: true,
  bindRowsWithHeaders: true,
  contextMenu: {
    items: {
      custom_row_above: {
        name: '在上方插入行',
        callback: function() {
          handleRowOperation(this, 'above')
        }
      },
      custom_row_below: {
        name: '在下方插入行',
        callback: function() {
          handleRowOperation(this, 'below')
        }
      },
      separator1: '---------',
      custom_add_child: {
        name: '添加子行',
        callback: function() {
          handleRowOperation(this, 'child')
        }
      },
      separator2: '---------',
      remove_row: {
        name: '删除行',
        callback: function() {
          handleRowOperation(this, 'delete')
        }
      },
      // separator3: '---------',
      // undo: {},
      // redo: {}
    }
  },
}
watch(
  () => props.height,
  (newHeight) => {
    console.log('MarketMaterials newHeight', newHeight)
    if (newHeight && hstRef.value?.hotInstance) {
      hstRef.value.hotInstance.updateSettings({
        height: newHeight - 50 - 15// 减去 tabs 头部和 padding 的高度,滚动条
      })
      hstRef.value.hotInstance.render()
    }
  },
  { immediate: true }
)

onMounted(() => {
  setTimeout(() => {
    // if (hstRef.value) {
    //   hstRef.value.loadData(mockData)
    // }
  }, 100)
})
</script>

<template>
  <div class="h-full">
    <DbHst ref="hstRef" :settings="settings" />
  </div>
</template>
