<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch } from 'vue'
import { Page } from '@vben/common-ui';
import { ElSplitter,ElSplitterPanel,ElCard,ElScrollbar } from 'element-plus';
import { DbTree } from '#/components/db-tree';
import { DbHst } from '#/components/db-hst';
import { useElementSize } from '@vueuse/core'
// import { materialsColumns } from './category'
import { manualRowMoveRenderer } from '#/components/db-hst/sort'
//获取元素高度
const containerRef = ref<HTMLElement | null>(null)
const { height: containerHeight } = useElementSize(containerRef)
type Tree = { id: string; label: string; children?: Tree[] }

const treeData = ref<Tree[]>([
  {
    id: '1',
    label: '工料机总类',
    children: [
      {
        id: '2',
        label: '广东',
        children: [
          { id: '3', label: '广东工民建工料机' },
          { id: '4', label: '广东公路工料机' },
          { id: '5', label: '广东水利工料机' }
        ]
      }
    ]
  },
  {
    id: '11',
    label: '工料机总类2',
    children: [
      {
        id: '12',
        label: '广西',
        children: [
          { id: '13', label: '工料机1' },
          { id: '14', label: '工料机1' },
          { id: '15', label: '工料机2' }
        ]
      }
    ]
  }
])
const dbHstRef = ref<any>(null)
const handleSelect = (node: Tree) => {
  if (dbHstRef.value && typeof dbHstRef.value.loadData === 'function') {
    // console.log('hstData.value',hstData.value)
    // dbHstRef.value.loadData(dbHstRef.value.defaultData(hstData.value))
  }
}

// 直接使用配置对象，DbTree 会自动创建 HierarchyContextMenuHandler
const contextMenuHandler = {
  rootKey: 'add-category',
  rootText: '添加总类',
  levels: [
    {
      depth: 0,
      addKey: 'add-province',
      addText: '添加省市',
      allowDelete: true
    },
    {
      depth: 1,
      addKey: 'add-specialty',
      addText: '添加工料机专业',
      allowDelete: true
    },
    {
      depth: 2,
      allowDelete: true
    }
  ]
}


const materialsColumns:any[] = [
//   {type:'text',data:'sort',title:'⇅', renderer: manualRowMoveRenderer,
//   width: 40,
//     readOnly: true,
//     editor: false,
// },
{type:'text',data:'code',title:'编码'},
{type:'text',data:'name',title:'名称'},
{type:'text',data:'category',title:'类别',
  renderer: 'db-dropdown',
  source: ['人', '人机', '材', '机'],
  readOnly: true,
},
{type:'text',data:'priceExTax',title:'除税基价代码'},
{type:'text',data:'priceInTax',title:'含税基价代码'},
{type:'text',data:'priceExTaxComp',title:'除税编制代码'},
{type:'text',data:'priceInTaxComp',title:'含税编制代码'},
]
let i = 0
const emptyRow = materialsColumns.reduce((acc, col) => {
      acc[col.data] = ''
      return acc
    }, {} as Record<string, any>)
const test =  Array.from({ length: 30 }, () => ({ ...emptyRow }));
test.forEach(e=>{
  e.code = i++
})

let dbSettings = {
  columns: materialsColumns,
  data: test,
  // manualRowMove: true,
}
onMounted(() => {
  setTimeout(() => {
    console.log('containerHeight.value',containerHeight.value)
    dbHstRef?.value.hotInstance.updateSettings({
      height: containerHeight.value,
    })
    
    // 生成模拟数据
    const categories = ['人', '人机', '材', '机']
    const mockData = Array.from({ length: 300 }, (_, index) => ({
      code: `MAT${String(index + 1).padStart(6, '0')}`,
      name: `材料名称${index + 1}`,
      category: categories[index % categories.length],
      priceExTax: `EX${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
      priceInTax: `IN${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
      priceExTaxComp: `EXCOMP${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
      priceInTaxComp: `INCOMP${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
    }))
    
    dbHstRef?.value.loadData(mockData)
    dbHstRef?.value.hotInstance.render()
    
  }, 200);
})
onUnmounted(() => {})
</script>

<template>
<Page auto-content-height>
  <ElSplitter>
    <ElSplitterPanel size="15%" :min="200">
      <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
          <DbTree :height="containerHeight" :data="treeData" @select="handleSelect" :defaultExpandedKeys="2" :context-menu-handler="contextMenuHandler" :search="false" />
      </ElCard>
    </ElSplitterPanel>
    <ElSplitterPanel :min="200">
      <ElCard class="w-full h-full" body-class="!p-0 h-full" >
        <DbHst ref="dbHstRef" :settings="dbSettings" class=""></DbHst>
      </ElCard>
    </ElSplitterPanel>
  </ElSplitter>
</Page>
</template>

<style lang="css">
</style>
