<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-tree :props="props" :load="loadNode" :default-expand-all="expandFlag" lazy>
            </el-tree>
        </div>
    </div>
</template>

<script>
    import network from '@/utils/network'
    export default {
        name: "index",
        mounted(){
        },
        data(){
            return {
                props: {
                    label: 'USER_NAME',
                    children: 'children',
                    isLeaf: 'leaf'
                },
                treeData: [{
                    USER_NAME: 'test01',
                    USER_ID: '670B84FD7C216D4EE055736AECE8644D',
                    leaf: false,
                }],
                curDeep:1,
                autoStopDeep:2,
                expandFlag:true,
                loading: false
            };
        },
        methods: {
            loadNode(node, resolve) {
                let thisObj = this;
                if(this.curDeep >= this.autoStopDeep){
                    this.expandFlag = false;
                    resolve([]);
                } else {
                    if (node.level === 0) {
                        return resolve([{ USER_NAME: 'test01', USER_ID: '670B84FD7C216D4EE055736AECE8644D'}]);
                    }
                    if (node.level > 0) {
                        network.getData('atlas/index', {id:node.data.USER_ID, deep:2}).then(response=>{
                            thisObj.curDeep += 1;
                            resolve(response);
                        });
                    }
                }
            },
            getChildData(data, node){
                let thisObj = this;
                let userId = data.USER_ID;
                network.getData('atlas/index', {id:userId, deep:2}).then(response=>{
                    console.log(node);
                    // resolve(response);
                    thisObj.$refs.tree.updateKeyChildren(userId, response);
                });
            }
        },
    }
</script>

<style scoped>

</style>