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

import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
// import { sourceDataObject } from '#/components/db-hst/mockData'

// 导入子组件
import FieldName from './unit/FieldName.vue'
import SubItem from './unit/SubItem.vue'
import MeasureItem from './unit/MeasureItem.vue'
import OtherItem from './unit/OtherItem.vue'
import UnitSummary from './unit/UnitSummary.vue'
import VariableSettings from './unit/VariableSettings.vue'
import MaterialField from './unit/MaterialField.vue'
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 bottomPanelHeight = ref<number>(0)
type Tree = { id: string; label: string; children?: Tree[] }
const categoryTreeData = ref<Tree[]>([
  {
    id: '1',
    label: '行业总类',
    children: [
      {
        id: '2',
        label: '广东',
        children: [
          { id: '3', label: '行业1' },
          { id: '4', label: '行业2' },
          { id: '5', label: '行业3' }
        ]
      }
    ]
  },
  {
    id: '11',
    label: '行业2',
    children: [
      {
        id: '12',
        label: '广西',
        children: [
          { id: '13', label: '行业5' },
          { id: '14', label: '行业6' },
          { id: '15', label: '行业7' }
        ]
      }
    ]
  }
])
// const colHeaders = ref<string[]>(topColHeaders)
const activeTab = ref('fieldName')
const categoryHandleSelect = (node: Tree) => {
  console.log('categoryhandleSelect',node)
}

const detailHandleSelect = (node: Tree) => {
  // if (topHstRef.value && typeof topHstRef.value.loadData === 'function') {
  //   // console.log('hstData.value',hstData.value)
  //   // topHstRef.value.loadData(topHstData.value)
  // }
}


onMounted(() => {
})
onUnmounted(() => {
})

</script>

<template>
<Page auto-content-height>
   <!-- <DbHst ref="bottomHstRef" :settings="bottomDbSettings"></DbHst> -->
   <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="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2"  :search="false" />
        </ElCard>
      </ElSplitterPanel>
      <ElSplitterPanel collapsible :min="200">
        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
           <ElTabs v-model="activeTab" type="border-card" class="h-full">
              <ElTabPane label="字段名称" name="fieldName" lazy>
                <FieldName :height="containerHeight"/>
              </ElTabPane>
              <ElTabPane label="分部分项" name="subItem" lazy>
                <!-- <SubItem /> -->
                 <FieldName :height="containerHeight"/>
              </ElTabPane>
              <ElTabPane label="措施项目" name="measureItem" lazy>
                <!-- <MeasureItem /> -->
                 <FieldName :height="containerHeight"/>
              </ElTabPane>
              <ElTabPane label="其他项目" name="otherItem" lazy>
                <!-- <OtherItem /> -->
                 <FieldName :height="containerHeight"/>
              </ElTabPane>
              <ElTabPane label="单位汇总" name="unitSummary" lazy>
                <!-- <UnitSummary /> -->
                 <FieldName :height="containerHeight"/>
              </ElTabPane>
              <ElTabPane label="变量设置" name="variableSettings" lazy>
                <VariableSettings />
              </ElTabPane>
              <ElTabPane label="工料机字段" name="materialField" lazy>
                <MaterialField />
              </ElTabPane>
            </ElTabs>
        </ElCard>
      </ElSplitterPanel>
    </ElSplitter>
</Page>
</template>

<style lang="css">
.el-tabs--border-card>.el-tabs__content  {
  padding: 5px 0;
}
</style>
