<template>
    <!-- 左侧树 -->
    <div>
        <el-card style="min-height: calc(100vh - 125px)">
            <el-row :gutter="20" style="display: flex; align-items: center">
                <el-col :span="16">
                    <el-input v-model="filterText" placeholder="输入关键字">
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" size="small" @click="onHandleSearch">
                        查询
                    </el-button>
                </el-col>
            </el-row>

            <div class="tree-container">
                <el-tree ref="leftTreeRef" :data="displayedTreeData" default-expand-all class="left-tree-list"
                    @node-click="onHandleNodeClick">
                </el-tree>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getLeftTreeListAPI } from '@/api/data-collect/file-share-manage'
import { validSecurity } from '@/utils/validate'
export default {
    name: 'LeftTree',
    data() {
        return {
            treeDataList: [
                {
                    label: '档案分享管理',
                    id: 0,
                    children: [],
                },
            ],
            displayedTreeData: [],
            filterText: '',
            originalTreeData: [], // 保存原始数据
        }
    },
    computed: {
    },
    methods: {
        // 节点点击事件
        onHandleNodeClick(data) {
            this.$emit('handleNodeClick', data)
        },

        convertToVueTree(data) {
            return data.map(item => ({
                id: item.code,
                label: item.name,
                children: item.kyDataClassifyList ? item.kyDataClassifyList.map(child => ({
                    id: child.id,
                    label: child.dataTypeName,
                    children: []
                })) : []
            }));
        },
        // 获取左侧树列表
        async getLeftTreeList() {
            const res = await getLeftTreeListAPI()
            const transformedData = this.convertToVueTree(res.rows)
            this.treeDataList[0].children = transformedData
            // 保存原始数据
            this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
            // 初始化显示数据
            this.displayedTreeData = JSON.parse(JSON.stringify(this.treeDataList))
        },
        // 点击查询触发过滤
        onHandleSearch() {
            if (!this.filterText) {
                this.displayedTreeData = JSON.parse(JSON.stringify(this.treeDataList))
                return
            }

            // 安全校验
            if (!validSecurity(this.filterText)) {
                this.$message.error('输入内容包含非法字符，请重新输入')
                return
            }

            this.displayedTreeData = this.filterTreeData(this.treeDataList)
        },
        // 递归过滤树数据
        filterTreeData(treeData) {
            const result = []
            for (const node of treeData) {
                const newNode = { ...node }
                if (node.children && node.children.length > 0) {
                    const filteredChildren = this.filterTreeData(node.children)
                    if (filteredChildren.length > 0) {
                        newNode.children = filteredChildren
                        result.push(newNode)
                    } else if (node.label.indexOf(this.filterText) !== -1) {
                        // 如果父节点匹配，保留所有子节点
                        result.push(node)
                    }
                } else if (node.label.indexOf(this.filterText) !== -1) {
                    result.push(newNode)
                }
            }
            return result
        },
    },
    created() {
        this.getLeftTreeList()
    },
}
</script>

<style scoped>
.tree-container {
    margin-top: 10px;
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    overflow-x: hidden;
}

.left-tree-list {
    width: 100%;
}

/* 自定义滚动条样式 */
.tree-container::-webkit-scrollbar {
    width: 6px;
}

.tree-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
