<!-- 设备监控使用折叠面板渲染多个tree -->
<template>
    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
        <Icon
            v-show="menuCollapse"
            @click="onMenuCollapse"
            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
            :class="menuCollapse ? 'unfold' : ''"
            size="18"
            class="fold ml10 mt20 menu-collapse"
            style="cursor: pointer"
            v-if="route.path != '/admin/govern/reportCore/statistics/index'"
        />
        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
            <div style="display: flex; align-items: center" class="mb10">
                <el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
                    <template #prefix>
                        <Icon name="el-icon-Search" style="font-size: 16px" />
                    </template>
                </el-input>
                <Icon
                    @click="onMenuCollapse"
                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                    :class="menuCollapse ? 'unfold' : ''"
                    size="18"
                    class="fold ml10 menu-collapse"
                    style="cursor: pointer"
                    v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
                />
            </div>

            <el-collapse
                :accordion="true"
                v-model.trim="activeName"
                style="flex: 1; height: 100%"
                @change="changeDevice"
            >
                <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
                    <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
                        <el-option label="功能调试" value="2"></el-option>
                        <el-option label="出厂调试" value="3"></el-option>
                        <el-option label="正式投运" value="4"></el-option>
                    </el-select>

                    <el-tree
                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
                        ref="treeRef1"
                        :props="defaultProps"
                        highlight-current
                        :filter-node-method="filterNode"
                        node-key="id"
                        v-bind="$attrs"
                        :data="zlDevList"
                        style="overflow: auto"
                        :default-expand-all="false"
                    >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <Icon
                                    :name="data.icon"
                                    style="font-size: 16px"
                                    :style="{ color: data.color }"
                                    v-if="data.icon"
                                />
                                <span style="margin-left: 4px">{{ node.label }}</span>
                            </span>
                        </template>
                    </el-tree>
                </el-collapse-item>
                <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
                    <el-tree
                        :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
                        ref="treeRef2"
                        :props="defaultProps"
                        highlight-current
                        :default-expand-all="false"
                        :filter-node-method="filterNode"
                        node-key="id"
                        :data="bxsDeviceData"
                        v-bind="$attrs"
                        style="overflow: auto"
                    >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <Icon
                                    :name="data.icon"
                                    style="font-size: 16px"
                                    :style="{ color: data.color }"
                                    v-if="data.icon"
                                />
                                <span style="margin-left: 4px">{{ node.label }}</span>
                            </span>
                        </template>
                    </el-tree>
                </el-collapse-item>
                <el-collapse-item title="在线设备" name="2" v-if="yqfDeviceData.length != 0">
                    <el-tree
                        :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
                        ref="treeRef3"
                        :props="defaultProps"
                        highlight-current
                        :default-expand-all="false"
                        :filter-node-method="filterNode"
                        node-key="id"
                        :data="yqfDeviceData"
                        v-bind="$attrs"
                        style="overflow: auto"
                    >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <Icon
                                    :name="data.icon"
                                    style="font-size: 16px"
                                    :style="{ color: data.color }"
                                    v-if="data.icon"
                                />
                                <span style="margin-left: 4px">{{ node.label }}</span>
                            </span>
                        </template>
                    </el-tree>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { el, fa } from 'element-plus/es/locale'
import { ref, watch, defineEmits, onMounted, nextTick, computed } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({
    name: 'govern/tree'
})
const emit = defineEmits(['changePointType'])
interface Props {
    width?: string
    canExpand?: boolean
    type?: string
    data?: any
}

const props = withDefaults(defineProps<Props>(), {
    width: '100%',
    canExpand: true,
    type: '',
    data: []
})
const process = ref('')
const route = useRoute()
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const activeName = ref('0')
const filterText = ref('')
const defaultProps = {
    label: 'name',
    value: 'id'
}
//治理设备数据
const zlDeviceData = ref<any>([])
const zlDevList = ref<any>([])
//便携式设备数据
const bxsDeviceData = ref<any>([])
//在线设备数据
const yqfDeviceData = ref<any>([])
watch(
    () => props.data,
    (val, oldVal) => {
        if (val && val.length != 0) {
            val.map((item: any) => {
                if (item.name == '治理设备') {
                    zlDeviceData.value = []
                    item.children.map((vv: any) => {
                        zlDeviceData.value.push(vv)
                    })
                    zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
                } else if (item.name == '便携式设备') {
                    bxsDeviceData.value = []
                    item.children.map((vv: any) => {
                        bxsDeviceData.value.push(vv)
                    })
                } else if (item.name == '在线设备') {
                    yqfDeviceData.value = []
                    item.children.map((vv: any) => {
                        yqfDeviceData.value.push(vv)
                    })
                }
            })
        }
    },
    {
        immediate: true,
        deep: true
    }
)

watch(filterText, val => {
    if (activeName.value == '0') {
        treeRef1.value!.filter(val)
    } else if (activeName.value == '1') {
        treeRef2.value!.filter(val)
    } else {
        treeRef3.value!.filter(val)
    }
})
watch(process, val => {
        if (val == '' || val == undefined) {
        zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
    } else {
        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
    }

    setTimeout(() => {
        changeDevice(activeName.value)
    }, 0)
})

const changeDevice = (val: any) => {
    console.log('🚀 ~ changeDevice ~ val:', val)

    let arr1: any = []
    //zlDeviceData
    zlDevList.value.forEach((item: any) => {
        item.children.forEach((item2: any) => {
            item2.children.forEach((item3: any) => {
                item3.children.forEach((item4: any) => {
                    arr1.push(item4)
                })
            })
        })
    })
    let arr2: any = []
    bxsDeviceData.value.forEach((item: any) => {
        item.children.forEach((item2: any) => {
            arr2.push(item2)
        })
    })
    let arr3: any = []
    yqfDeviceData.value.forEach((item: any) => {
        item.children.forEach((item2: any) => {
            item2.children.forEach((item3: any) => {
                item3.children.forEach((item4: any) => {
                    arr3.push(item4)
                })
            })
        })
    })
    activeName.value = val
    if (val == '0') {
        arr2.map((item: any) => {
            item.checked = false
        })
        treeRef1?.value && treeRef1.value.setCurrentKey(arr1[0]?.id)
        emit('changePointType', activeName.value, arr1[0])
    }
    if (val == '1') {
        arr1.map((item: any) => {
            item.checked = false
        })
        treeRef2?.value && treeRef2.value.setCurrentKey(arr2[0]?.id)
        emit('changePointType', activeName.value, arr2[0])
    }
    if (val == '2') {
        arr3.map((item: any) => {
            item.checked = false
        })
        treeRef3?.value && treeRef3.value.setCurrentKey(arr3[0]?.id)
        emit('changePointType', activeName.value, arr3[0])
    }
    // if(activeName.value){
    //    emit('changePointType', activeName.value)
    // }
}
const onMenuCollapse = () => {
    menuCollapse.value = !menuCollapse.value
    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const filterNode = (value: string, data: any, node: any) => {
    if (!value) return true
    // return data.name.includes(value)
    if (data.name) {
        return chooseNode(value, data, node)
    }
}

function filterProcess(nodes: any) {
    if (process.value == '') {
        return nodes
    }
    return nodes
        .map(node => {
            // 递归处理子节点
            const children = node.children ? filterProcess(node.children) : []

            // 对于装置层级（level=2），只保留 process 值匹配的节点
            if (node.level === 2) {
                if (node.process == process.value) {
                    return {
                        ...node,
                        children: children
                    }
                }
                return null
            }

            // 对于其他节点：
            // 1. 如果有满足条件的子节点则保留
            // 2. 如果本身 process 值匹配则保留
            // 3. 如果是叶子节点也保留（监测点通常没有子节点）
            if (children.length > 0 || node.process == process.value || !node.children || node.children.length === 0) {
                return {
                    ...node,
                    children: children
                }
            }

            return null
        })
        .filter(Boolean) // 移除null节点
}

// function filterProcess(nodes: any) {
//     if (process.value == '') {
//         return nodes
//     }
//     return nodes
//         .map(node => {
//             // 递归处理子节点
//             const children = node.children ? filterProcess(node.children) : []

//             // 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点

//             if (node.process == process.value || children.length > 0) {
//                 return {
//                     ...node,
//                     children: node.children
//                 }
//             }

//             // 否则过滤掉当前节点
//             return null
//         })
//         .filter(Boolean) // 移除null节点
// }
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
const chooseNode = (value: string, data: any, node: any) => {
    if (data.name.indexOf(value) !== -1) {
        return true
    }
    const level = node.level
    // 如果传入的节点本身就是一级节点就不用校验了
    if (level === 1) {
        return false
    }
    // 先取当前节点的父节点
    let parentData = node.parent
    // 遍历当前节点的父节点
    let index = 0
    while (index < level - 1) {
        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
        if (parentData.data.name.indexOf(value) !== -1) {
            return true
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent
        index++
    }
    // 没匹配到返回false
    return false
}
//治理
const treeRef1 = ref<InstanceType<typeof ElTree>>()
//便携式
const treeRef2 = ref<InstanceType<typeof ElTree>>()
//在线
const treeRef3 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2, treeRef3 })
onMounted(() => {
    setTimeout(() => {
        if (zlDeviceData.value.length != 0) {
            zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
            activeName.value = '0'
        }
        if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
            activeName.value = '1'
        }
        if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
            activeName.value = '2'
        }
        if (!zlDeviceData.value && !bxsDeviceData.value) {
            activeName.value = '2'
        }
        nextTick(() => {
            changeDevice(activeName.value)
        })
    }, 500)
})
</script>

<style lang="scss" scoped>
.cn-tree {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    width: 280px;
    background: #fff;

    :deep(.el-tree) {
        border: 1px solid var(--el-border-color);
    }

    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
        background-color: var(--el-color-primary-light-7);
    }

    .menu-collapse {
        color: var(--el-color-primary);
    }
}

.custom-tree-node {
    display: flex;
    align-items: center;
}
</style>
