<template>
    <div :style="{ height: String(height) + 'px' }" class="tree">
        <div class="title"><span>考场树</span><span><a-icon type="redo" @click="getTreeData"
                    style="float: right;margin-right: 20px;" /></span></div>
        <div class="tree-border"></div>
        <div class="tree-content">
            <div v-if="isLoading" class="example">
                <a-spin tip="加载中..."></a-spin>
            </div>
            <a-tree :default-expanded-keys="this.keySecond" :tree-data="treeData" @select="onSelect"
                v-if="treeData.length > 0 && !isLoading">
                <template #title="{ key: treeKey, title }">
                    <span>{{ title }}</span>
                </template>
            </a-tree>
            <a-empty v-if="treeData.length === 0 && !isLoading" />
        </div>
    </div>
</template>
<script>
import { defHttp } from '/@/utils/http/axios';
export default {
    name: 'locationaTree',
    props: {
        // 图表高度
        height: {
            type: Number,
            default: 530
        },
    },
    data() {
        return {
            showLine: true,
            showIcon: false,
            treeData: [],
            getTreeUrl: '/CET/cetLocation/getTree',
            isLoading: false,
            keySecond: [],
        };
    },
    mounted() {
        //生成的时候默认请求树结构数据
        this.getTreeData();
    },
    methods: {
        // onSelect函数，当节点被选中时调用
        onSelect(selectedKeys, info) {
            if (selectedKeys.length === 0) {
                this.$emit('onSelect', []);
                return;
            }
            const selectedKey = selectedKeys[0];
            // 查找选中的节点
            const findNode = (key, nodes) => {
                for (let node of nodes) {
                    if (node.key === key) {
                        return node;
                    }
                    if (node.children) {
                        const found = findNode(key, node.children);
                        if (found) {
                            return found;
                        }
                    }
                }
                return null;
            };
            const selectedNode = findNode(selectedKey, this.treeData);
            const childKeys = this.collectChildKeys(selectedNode);
            childKeys.push(selectedKey);
            //回调到父组件
            this.$emit('onSelect', childKeys);
        },
        //只收集本层和下层的key
        collectChildKeys(node, keys = []) {
            if (!node) {
                return keys;
            }
            // 如果节点有children，获取其子节点的key
            if (node.children) {
                for (let child of node.children) {
                    keys.push(child.key);
                    for (let subChild of child.children) {
                        keys.push(subChild.key);
                    }
                }
            }
            return keys;
        },
        getTreeData() {
            console.log('getTreeData', this.getTreeUrl);
            this.isLoading = true;
            const params = {};
            defHttp
                .get({ url: this.getTreeUrl, params }).then((res) => {
                    if (res && res.length > 0) {
                        console.log('getTreeData', res);
                        this.isLoading = false;
                        this.treeData = res;
                        for (let node of this.treeData) {
                            this.keySecond.push(node.key);
                        }
                    }
                })
                .catch(error => {
                    this.isLoading = false;
                    console.error('Error fetching tree data:', error);
                });
        },
    },
};
</script>
<style scoped>
.tree {
    width: 100%;
    height: 500px;
    padding: 10px;
    position: relative;
    border-right: 1px solid #cdcdcd;
    /* z-index: 999; */

    .title {
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    /* 树边框 */
    .tree-border {
        border-top: 1px solid #cdcdcd;
        width: 80%;
    }

    .tree-content {
        height: 100%;
        overflow: auto;
        padding: 10px;

        .example {
            text-align: center;
            border-radius: 4px;
            margin-bottom: 20px;
            padding: 30px 50px;
            margin: 20px 0;
            top: 50%;
            position: relative;
        }
    }
}
</style>