<template>
    <div class="point-tree">
        <div style="flex: 1; overflow: hidden">
            <Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'

defineOptions({
    name: 'pms/pointTree'
})
const emit = defineEmits(['init'])
const attrs = useAttrs()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const config = useConfig()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const tree = ref()
const treeRef = ref()

const loadData = () => {
    let nodeKey = ''
    let res = {
        data: [
            {
                name: '运行管理',
                id: '1',
                children: [
                    {
                        name: '运行指标',
                        id: '2'
                    },
                    {
                        name: '数据质量核查',
                        id: '3'
                    }
                ]
            }
        ]
    }
    // getTerminalTreeForFive(form).then(res => {
    res.data.forEach((item: any) => {
        item.icon = 'el-icon-FolderOpened'
        item.color = config.getColorVal('elementUiPrimary')
        item.children.forEach((item2: any) => {
            item2.icon = 'el-icon-Document'
            item.color = config.getColorVal('elementUiPrimary')
        })
    })

    nodeKey = res.data[0].children[0].id
    emit('init', res.data[0].children[0])

    tree.value = res.data
    if (nodeKey) {
        setTimeout(() => {
            treeRef.value.treeRef.setCurrentKey(nodeKey)
        }, 10)
    }
    // })
}
loadData()
</script>
<style lang="scss">
.point-tree {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--el-border-color);
}
</style>
