<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';

import { treeData as catalogTreeData, contextMenuHandler as catalogContextMenuHandler } from './catalog';
import { treeData as topTreeData, contextMenuHandler as topContextMenuHandler } from './catalog';
import { dbSettings as projectDbSettings } from './project';
import { dbSettings as subDbSettings } from './sub';
import { dbSettings as guideDbSettings } from './guide';
import { dbSettings as bottomDbSettings } from './rightHst';


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)




const projectHstRef = ref<any>(null)
const subHstRef = ref<any>(null)
const guideHstRef = ref<any>(null)
const bottomHstRef = ref<any>(null)


const treeHandleSelect = (node: any) => {
  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);
  // }
}

onMounted(() => {
  setTimeout(() => {
    // onTopHeight(topContainerHeight.value)
    // onBottomHeight(bottomContainerHeight.value)

    if (projectHstRef.value?.hotInstance) {
      projectHstRef.value?.hotInstance.updateSettings({
        height: containerHeight.value - 15
      })
      // 更新 code 列的宽度
      projectHstRef.value.updateCodeColWidth()
    }
    if (subHstRef.value?.hotInstance) {
      subHstRef.value?.hotInstance.updateSettings({
        height: containerHeight.value - 15
      })
      
    }
    if (guideHstRef.value?.hotInstance) {
      guideHstRef.value?.hotInstance.updateSettings({
        height: containerHeight.value - 15
      })
    }

    if (bottomHstRef.value?.hotInstance) {
      bottomHstRef.value?.hotInstance.updateSettings({
        height: containerHeight.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="catalogTreeData" @select="treeHandleSelect" :defaultExpandedKeys="3" :context-menu-handler="catalogContextMenuHandler"  :search="false" />
        </ElCard>
      </ElSplitterPanel>
      <ElSplitterPanel collapsible  :min="200">
        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" >
            <DbHst ref="projectHstRef" :settings="projectDbSettings"></DbHst>
        </ElCard>
      </ElSplitterPanel>
      <ElSplitterPanel collapsible  :min="200">
        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" >
            <DbHst ref="subHstRef" :settings="subDbSettings"></DbHst>
        </ElCard>
      </ElSplitterPanel>
      <ElSplitterPanel collapsible size="18%" :min="200">
        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" >
            <DbHst ref="guideHstRef" :settings="guideDbSettings"></DbHst>
        </ElCard>
      </ElSplitterPanel>
      <ElSplitterPanel size="20%">
        <ElSplitter layout="vertical" @resize-end="onResizeEnd">
          <ElSplitterPanel collapsible size="50%" :min="200">
            <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="topContainerRef">
                <DbTree :height="topContainerHeight" :data="topTreeData" @select="treeHandleSelect" :defaultExpandedKeys="3" :context-menu-handler="topContextMenuHandler"  :search="false" />
            </ElCard>
          </ElSplitterPanel>
          <ElSplitterPanel collapsible :min="200">
            <ElCard class="w-full h-full border-radius-0" 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>
