<template>
  <div>
    <el-container>

      <el-aside>
        <el-tree :data="assetStructureList"
                 :expand-on-click-node="false"
                 :load="expandTable"
                 lazy
                 @node-click=""
                 :props="defaultProps">
          <!--                  <div class="custom-tree-node" slot-scope="{ node, data }">-->
          <!--                      <div v-if="data.info.type !== null">{{ data.info.dataResourceName + '('+data.info.databaseName + '-' + data.info.dataSourcesSystemName+')' }}</div>-->
          <!--                      <div v-if="data.info.type === null">{{ data.tableName + '-'+data.tableRemark + '(' + data.dataNum+'条)' }}</div>-->
          <!--                  </div>-->
        </el-tree>
      </el-aside>

      <el-main>
        <h1>整体数据资产结构概述</h1>

      </el-main>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
 import {getTableTree} from "@/api/etl/etl";
import data from "@/views/system/dict/data.vue";

export default {
    //import引入的组件需要注入到对象中才能使用"
   name:'construction',
    data() {
      //这里存放数据"

      return {

        childrenList: [],
        assetStructureList: [],


        defaultProps: {
          children: 'children',
          label: 'tableName'
        }
      };
    },


    //计算属性 类似于data概念",
    computed: {
      data() {
        return data
      }
    },
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {

     getList(){
       getTableTree().then(response =>{
         this.data = []
         response.data.forEach(data => {
           let info = data.basicConfigInfo
           this.assetStructureList.push({
             'info':info,
             'table': info.dataResourceName+"("+info.dataSourcesSystemName+")",
             'children':data.children
           })
         })
         console.log(this.assetStructureList)
       })
     },


      expandTable(node,resolve){
       if (node.level === 0) return resolve(this.assetStructureList);
       const {data} = node;
       this.showAssets = data.type;
       if (data.type === null){
         return resolve([])
       }

       setTimeout(() => {
         resolve(this.childrenList)
       },500);
      }

    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
     this.getList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

.el-aside{
  background-color: #ccb1ea;
  color: #f4516c;
  text-align: center;
  line-height: 100%;
}

.el-main{
  background-color: #ccb1ea;
  color: #f4516c;
  text-align: center;
  line-height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5).el-aside,
.el-container:nth-child(6).el-aside{
  line-height: 260px;
}

.el-container:nth-child(7).el-aside{
  line-height: 320px;
}




</style>
