<template>
    <div class="point-tree">
        <el-select
            v-model="formData.statisticalType"
            placeholder="请选择"
            style="min-width: unset; padding: 10px 10px 0"
            @change="loadData"
            v-if="props.showSelect"
            filterable
        >
            <el-option
                v-for="item in classificationData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
        </el-select>
        <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'
import { defineProps } from 'vue'
const VITE_FLAG = import.meta.env.VITE_NAME == 'qujing'
defineOptions({
    name: 'pms/pointTree'
})
interface Props {
    showSelect?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    showSelect: true
})
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 formData = ref({
    deptIndex: adminInfo.$state.deptIndex,
    monitorFlag: 2,
    powerFlag: 2,
    loadType: null,
    manufacturer: null,
    serverName: 'event-boot',
    statisticalType: classificationData[0].id,
    scale: null
})
const loadData = () => {
    let obj = classificationData.find(function (i) {
        return i.id === formData.value.statisticalType
    }) || { code: '' }
    let form = JSON.parse(JSON.stringify(formData.value))
    form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
    if (VITE_FLAG && form.statisticalType.code == 'Power_Network') {
        form.statisticalType.deptName = 'qujing'
    }
    let nodeKey = ''
    getTerminalTreeForFive(form).then(res => {
        //console.log('---',res)
        if (obj.code == 'Power_Network') {
            res.data = [
                {
                    name: '电网拓扑',
                    level: -1,
                    id: 0,
                    children: res.data
                }
            ]
        }
        // if (VITE_FLAG) {
        processTreeData(res.data)
        let firstLevel6Node = findFirstLevel6Node(res.data)

        nodeKey = firstLevel6Node.id
        emit('init', firstLevel6Node)
        // } else {
        //     // 正常树处理
        //     res.data.forEach((item: any) => {
        //         item.icon = 'el-icon-HomeFilled'
        //         item.color = config.getColorVal('elementUiPrimary')
        //         item.children.forEach((item2: any) => {
        //             item2.icon = 'el-icon-CollectionTag'
        //             item2.color = config.getColorVal('elementUiPrimary')
        //             item2.children.forEach((item3: any) => {
        //                 item3.icon = 'el-icon-Flag'
        //                 item3.color = config.getColorVal('elementUiPrimary')
        //                 item3.children.forEach((item4: any) => {
        //                     item4.icon = 'el-icon-OfficeBuilding'
        //                     item4.color = config.getColorVal('elementUiPrimary')
        //                     item4.children.forEach((item5: anyObj) => {
        //                         if (item5.level == 7) {
        //                             item5.icon = 'el-icon-DataAnalysis'
        //                             item5.color = config.getColorVal('elementUiPrimary')
        //                             item5.children.forEach((item6: anyObj) => {
        //                                 item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
        //                                 item6.pid = item4.id
        //                                 item6.icon = 'fa-solid fa-location-dot'
        //                                 item6.color = config.getColorVal('elementUiPrimary')
        //                                 if (item6.comFlag == 0) {
        //                                     item6.color = 'red !important'
        //                                 } else if (item6.comFlag == 1) {
        //                                     item6.color = '#00f93b !important'
        //                                 } else if (item6.comFlag == 2) {
        //                                     item6.color = '#8c8c8c !important'
        //                                 }
        //                             })
        //                         } else {
        //                             item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
        //                             item5.pid = item4.id
        //                             item5.icon = 'fa-solid fa-location-dot'
        //                             item5.color = config.getColorVal('elementUiPrimary')
        //                             if (item5.comFlag == 0) {
        //                                 item5.color = 'red !important'
        //                             } else if (item5.comFlag == 1) {
        //                                 item5.color = '#00f93b !important'
        //                             } else if (item5.comFlag == 2) {
        //                                 item5.color = '#8c8c8c !important'
        //                             }
        //                         }
        //                     })
        //                 })
        //             })
        //         })
        //     })

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

        tree.value = res.data
        if (nodeKey) {
            nextTick(() => {
                treeRef.value.treeRef.setCurrentKey(nodeKey)

                // treeRef.value.treeRef.setExpandedKeys(nodeKey)
            })
        }
    })
}
const scrollToNode = (id: string) => {
    // 树滚动
    treeRef.value.scrollToNode(id)
}

// 定义不同层级对应的图标配置（可根据实际需求调整）
const levelIconMap = {
    '-1': 'el-icon-HomeFilled',
    0: 'el-icon-CollectionTag',
    1: 'el-icon-CollectionTag',
    2: 'el-icon-Flag',
    3: 'el-icon-OfficeBuilding',
    4: 'el-icon-DataAnalysis',
    5: 'el-icon-DataAnalysis',
    7: 'el-icon-DataAnalysis',
    6: 'fa-solid fa-location-dot'
}

/**
 * 递归处理树形数据，为不同层级节点设置图标和颜色
 * @param data 树形数据数组
 * @param level 当前层级（默认从1开始）
 */
function processTreeData(data: any[], level: number = -1, alias: string = '') {
    // 空值判断，避免数组为空或undefined时报错
    if (!Array.isArray(data) || data.length === 0) return

    data.forEach(item => {
        // 1. 设置基础图标（根据层级匹配）
        item.icon = levelIconMap[level] || ''
        item.alias = alias + `${item.name}`
        // 2. 设置基础颜色
        item.color = config.getColorVal('elementUiPrimary')

        // 3. 第6层特殊处理：根据comFlag调整颜色
        if (level === 6 && item.hasOwnProperty('comFlag')) {
            switch (item.comFlag) {
                case 0:
                    item.color = 'red !important'
                    break
                case 1:
                    item.color = '#00f93b !important'
                    break
                case 2:
                    item.color = '#8c8c8c !important'
                    break
                // 默认值：保持原有基础颜色
                default:
                    item.color = config.getColorVal('elementUiPrimary')
            }
        }

        // 4. 递归处理子节点，层级+1
        if (item.children && item.children.length > 0) {
            processTreeData(item.children, item.children[0].level, level == '-1' ? '' : item.alias + '>')
        }
    })
}
/**
 * 递归查找树形结构中第一个level===6的节点（找到即终止递归）
 * @param {Object|Array} tree - 树形数据（根节点数组 或 单个根节点）
 * @returns {Object|null} 第一个level为6的节点，无则返回null
 */
function findFirstLevel6Node(tree: any) {
    // 统一处理入参：如果是数组，遍历根节点数组（按顺序找第一个符合条件的）
    if (Array.isArray(tree)) {
        for (const rootNode of tree) {
            const result = traverse(rootNode)
            // 找到第一个匹配节点，立即返回（终止根节点遍历）
            if (result) return result
        }
        // 所有根节点遍历完未找到
        return null
    } else {
        // 入参是单个节点，直接递归遍历
        return traverse(tree)
    }

    // 核心递归遍历函数
    function traverse(node) {
        // 终止条件1：节点不存在，返回null
        if (!node) return null

        // 终止条件2：找到level===6的节点，立即返回（终止递归）
        if (node.level === 6) {
            return node
        }

        // 终止条件3：节点无children，返回null
        if (!node.children || node.children.length === 0) {
            return null
        }

        // 按顺序遍历当前节点的子节点
        for (const child of node.children) {
            const foundNode = traverse(child)
            // 子节点中找到目标节点，立即返回（终止后续子节点遍历）
            if (foundNode) {
                return foundNode
            }
        }

        // 当前节点及所有子节点都无匹配，返回null
        return null
    }
}

defineExpose({ treeRef, scrollToNode, tree })
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>
