<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed } from 'vue'
import { Page } from '@vben/common-ui';
import { ElSplitter,ElSplitterPanel,ElCard,ElDialog,ElTable,ElTableColumn,ElButton,ElInput,ElAlert } from 'element-plus';
import { useElementSize } from '@vueuse/core'
import { DbTree } from '#/components/db-tree';
import { DbHst } from '#/components/db-hst';

const containerRef = ref<HTMLElement | null>(null)
const { height: containerHeight } = useElementSize(containerRef)
const topContainerRef = ref<HTMLElement | null>(null)
const { height: topContainerHeight } = useElementSize(topContainerRef)
const bottomContainerRef = ref<HTMLElement | null>(null)
const { height: bottomContainerHeight } = useElementSize(bottomContainerRef)
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: '工料机2费率库' },
          { id: '15', label: '工料机3费率库' }
        ]
      }
    ]
  }
])

const topColumns = ref<any[]>([
{type:'text',data:'code',title:'编号'},
{type:'text',data:'name',title:'名称'},
{type:'text',data:'calcBase',title:'取费章节'},
])

const bottomColumns = ref<any[]>([
{type:'text',data:'code',title:'编码'},
{type:'text',data:'name',title:'名称'},
{type:'text',data:'spec',title:'型号规格'},
{type:'text',data:'category',title:'类别'},
{type:'text',data:'unit',title:'单位'},
{type:'text',data:'taxRate',title:'税率'},
{type:'text',data:'priceExTax',title:'除税基价'},

{type:'text',data:'priceExTax1',title:'除税编制价'},
{type:'text',data:'priceExTax2',title:'含税编制价'},
{type:'text',data:'priceExTax3',title:'定额消耗量'},
{type:'text',data:'priceExTax4',title:'含税编制合价'},
{type:'text',data:'priceExTax5',title:'除税基价合价'},
{type:'text',data:'priceExTax6',title:'含税基价合价'},
{type:'text',data:'priceExTax7',title:'除税编制合价'},

])

const topHstRef = ref<any>(null)
const bottomHstRef = ref<any>(null)
let rowSchema: any = {}
// 根据 columns 的 data 字段生成对象结构
topColumns.value.forEach((col: any) => {
  if (col.data ) {
    rowSchema[col.data] = null
  }
})
// console.log(rowSchema)


const topMock = ()=>{
    // 生成父子级模拟数据
    const mockData: any[] = [
      { code: '01', name: '土石方工程', calcBase: '第一章' },
      { code: '02', name: '地基处理与边坡支护工程', calcBase: '第二章' },
      { code: '03', name: '桩基工程', calcBase: '第三章' },
      { code: '04', name: '砌筑工程', calcBase: '第四章' },
      { code: '05', name: '混凝土及钢筋混凝土工程', calcBase: '第五章' },
      { code: '06', name: '金属结构工程', calcBase: '第六章' },
      { code: '07', name: '木结构工程', calcBase: '第七章' },
      { code: '08', name: '门窗工程', calcBase: '第八章' },
      { code: '09', name: '屋面及防水工程', calcBase: '第九章' },
      { code: '10', name: '保温、隔热、防腐工程', calcBase: '第十章' }
    ]
    
    return mockData;
}
let topDbSettings = {
  data: topMock(),
  dataSchema: rowSchema,
  colWidths: 120,
  columns: topColumns.value,
}
const bootomMock = ()=>{
    // 生成模拟数据
    const mockData: any[] = [
      { 
        code: '010101001', 
        name: '人工挖土方', 
        spec: '三类土', 
        category: '人工费', 
        unit: 'm³', 
        taxRate: '9%', 
        priceExTax: '45.50',
        priceExTax1: '48.20',
        priceExTax2: '52.54',
        priceExTax3: '1.00',
        priceExTax4: '52.54',
        priceExTax5: '45.50',
        priceExTax6: '49.60',
        priceExTax7: '48.20'
      },
      { 
        code: '010101002', 
        name: '机械挖土方', 
        spec: '挖掘机挖土 斗容量1m³', 
        category: '机械费', 
        unit: 'm³', 
        taxRate: '13%', 
        priceExTax: '12.80',
        priceExTax1: '13.50',
        priceExTax2: '15.26',
        priceExTax3: '1.00',
        priceExTax4: '15.26',
        priceExTax5: '12.80',
        priceExTax6: '14.46',
        priceExTax7: '13.50'
      },
      { 
        code: '010102001', 
        name: '推土机推土', 
        spec: '功率74kW', 
        category: '机械费', 
        unit: 'm³', 
        taxRate: '13%', 
        priceExTax: '8.90',
        priceExTax1: '9.40',
        priceExTax2: '10.62',
        priceExTax3: '1.00',
        priceExTax4: '10.62',
        priceExTax5: '8.90',
        priceExTax6: '10.06',
        priceExTax7: '9.40'
      },
      { 
        code: '010103001', 
        name: '商品混凝土', 
        spec: 'C30', 
        category: '材料费', 
        unit: 'm³', 
        taxRate: '13%', 
        priceExTax: '380.00',
        priceExTax1: '395.00',
        priceExTax2: '446.35',
        priceExTax3: '1.00',
        priceExTax4: '446.35',
        priceExTax5: '380.00',
        priceExTax6: '429.40',
        priceExTax7: '395.00'
      },
      { 
        code: '010103002', 
        name: '钢筋', 
        spec: 'HRB400 Φ16', 
        category: '材料费', 
        unit: 't', 
        taxRate: '13%', 
        priceExTax: '4200.00',
        priceExTax1: '4350.00',
        priceExTax2: '4915.50',
        priceExTax3: '1.05',
        priceExTax4: '5161.28',
        priceExTax5: '4410.00',
        priceExTax6: '4983.30',
        priceExTax7: '4567.50'
      },
      { 
        code: '010104001', 
        name: '模板', 
        spec: '木模板', 
        category: '材料费', 
        unit: 'm²', 
        taxRate: '13%', 
        priceExTax: '35.00',
        priceExTax1: '38.00',
        priceExTax2: '42.94',
        priceExTax3: '1.00',
        priceExTax4: '42.94',
        priceExTax5: '35.00',
        priceExTax6: '39.55',
        priceExTax7: '38.00'
      },
      { 
        code: '010105001', 
        name: '砌筑砂浆', 
        spec: 'M10', 
        category: '材料费', 
        unit: 'm³', 
        taxRate: '13%', 
        priceExTax: '280.00',
        priceExTax1: '295.00',
        priceExTax2: '333.35',
        priceExTax3: '1.00',
        priceExTax4: '333.35',
        priceExTax5: '280.00',
        priceExTax6: '316.40',
        priceExTax7: '295.00'
      },
      { 
        code: '010106001', 
        name: '砖', 
        spec: 'MU10', 
        category: '材料费', 
        unit: '千块', 
        taxRate: '13%', 
        priceExTax: '450.00',
        priceExTax1: '470.00',
        priceExTax2: '531.10',
        priceExTax3: '1.00',
        priceExTax4: '531.10',
        priceExTax5: '450.00',
        priceExTax6: '508.50',
        priceExTax7: '470.00'
      }
    ]
    return mockData;
}
let bottomDbSettings = {
  columns: bottomColumns.value,
}
const treeHandleSelect = (node: Tree) => {
  console.log('treeHandleSelect',node)
}
function onResizeEnd(index: number, sizes: number[]) {
  // 通过 hotInstance 来操作 Handsontable
  console.log(index,sizes)
  onTopHeight(sizes[0])
  onBottomHeight(sizes[1])
}
function onTopHeight(height: number){
  if (topHstRef.value?.hotInstance) {
    topHstRef.value.hotInstance.updateSettings({
      height: height-15,
    })
    
    topHstRef.value.hotInstance.render()
    
    // console.log('onResizeEnd-onTopHeight',height, 'codeColWidth:', topHstRef.value.codeColWidth);
  }
}
function onBottomHeight(height: number){
  if (bottomHstRef.value?.hotInstance) {
    bottomHstRef.value.hotInstance.updateSettings({
      height: height-15
    })
    
    bottomHstRef.value.loadData(bootomMock())
    bottomHstRef.value.hotInstance.render()
    console.log('onResizeEnd-bottomHstRef',height);
  }
}

// 直接使用配置对象，DbTree 会自动创建 HierarchyContextMenuHandler
const contextMenuHandler = {
  rootKey: 'add-category',
  rootText: '添加定额',
  levels: [
    {
      depth: 0,
      addKey: 'add-province',
      addText: '添加省市',
      allowDelete: true
    },
    {
      depth: 1,
      addKey: 'add-name',
      addText: '添加名称',
      allowDelete: true
    },
    {
      depth: 2,
      addKey: 'add-model',
      addText: '添加模式',
      allowDelete: true
    },
    {
      depth: 3,
      allowDelete: true
    }
  ]
}
onMounted(() => {
  setTimeout(() => {
    onTopHeight(topContainerHeight.value)
    onBottomHeight(bottomContainerHeight.value)
  }, 200);
})
onUnmounted(() => {
})

</script>

<template>
<Page auto-content-height>
   <ElSplitter >
      <ElSplitterPanel collapsible 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="treeHandleSelect" :defaultExpandedKeys="3" :context-menu-handler="contextMenuHandler"  :search="false" />
        </ElCard>
      </ElSplitterPanel>
      <ElSplitterPanel >
        <ElSplitter layout="vertical" @resize-end="onResizeEnd">
          <ElSplitterPanel collapsible size="60%" :min="200">
            <ElCard class="w-full h-full" body-class="!p-0 h-full" ref="topContainerRef">
                <DbHst ref="topHstRef" :settings="topDbSettings"></DbHst>
            </ElCard>
          </ElSplitterPanel>
          <ElSplitterPanel collapsible :min="200">
            <ElCard class="w-full h-full" body-class="!p-0 h-full" ref="bottomContainerRef">
                <DbHst ref="bottomHstRef" :settings="bottomDbSettings"></DbHst>
            </ElCard>
          </ElSplitterPanel>
        </ElSplitter>
      </ElSplitterPanel>
    </ElSplitter>
</Page>
</template>

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