<template>
  <div>
      <el-container style="height: 1000px">
        <el-aside>
          <el-tree :data="assetStructureList"
                   :props="defaultProps"
                   @node-click="handleNodeClick">

          </el-tree>
        </el-aside>

        <el-main>
          <AssetsBasic v-if="!infoOpen" :info-open="infoOpen" :fund-data-num="fundDataNum"></AssetsBasic>
         <AssetsModel v-if="this.tableInfoList.length!==0" :name="vueName" :dictList="dictList" :tableInfoList="tableInfoList"></AssetsModel>

          <TableInfoModel v-if="this.tableInfoList.length===0" :table-info="tableInfoForm"></TableInfoModel>
        </el-main>

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

<script>

import {getDict,getTableTree} from "@/api/etl/etl";
import AssetsBasic from "@/views/etl/construction/AssetsBasic.vue";
import AssetsModel from "@/views/etl/construction/AssetsModel.vue";
import TableInfoModel from "@/views/etl/construction/TableInfoModel.vue";

export default {
  name:'construction',

  components:{TableInfoModel, AssetsModel, AssetsBasic },

  data() {
    return {
      vueName:null,
      //表详情页面
      tableInfoOpen: false,
      //结构标题
      title: null,
      //查看详细资产结构
      infoOpen: false,
      //资产结构与数据结构载体
      tableInfoForm: {},
      //当前数据库列表
      tableInfoList: [],
      //结构数据量
      fundDataNum: {
        basicNum: null,
        tableNum: null,
        structureNum: null,
      },
      childrenList: [],
      //树级结构
      assetStructureList: [],
      //树级结构展示模版
      defaultProps: {
        children: 'children',
        label: 'tableName'
      },

      //数据字典
      dictList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //获取数据
    getList() {
      this.fundDataNum = {
        basicNum: 0,
        tableNum: 0,
        structureNum: 0,
      }
          //树级结构内信息
          getTableTree().then(response => {
            this.data = []
            response.data.forEach(data => {
              //几个链接（资产接入）
              this.fundDataNum.basicNum += 1
              let child = [];
              let info = data.basicConfigInfo;
              data.children.forEach(tableInfo => {
                //几张表（资产模型）
                this.fundDataNum.tableNum += 1
                //多少字段（资产结构）
                this.fundDataNum.structureNum += tableInfo.structureList.length
                child.push({
                  'tableName': tableInfo.tableName,
                  'info': tableInfo
                })
              })
              //子级存入
              this.assetStructureList.push({
                'info': info,
                'tableName': info.dataResourceName + '('+ info.databaseName + '-' + info.dataSourcesSystemName+')',
                'children': child,
              })

            })

          })
      console.log(this.assetStructureList)
    },
    //获取具体表相关数据

    handleNodeClick(data) {
      // console.log(data)
      console.log(data)
      //undefined
      // console.log(data.children)
      this.infoOpen = true
      //先将对象存入infoForm对象
      this.tableInfoForm = data
      //如果判断对象不存在，重新给form 和 list 赋值

        if (data.children !== undefined) {
          this.vueName = data.tableName
          this.tableInfoList = data.children
          this.tableInfoForm = data.children[0]
          console.log(data.info.id)
          getDict(data.info.id).then(response => {
            console.log(response)
            this.dictList = response.data
          })
        }else {

          // this.tableInfoList = this.assetStructureList.find(assent =>
          //   assent.info.id === this.tableInfoForm.info.basicId
          // ).children
          this.tableInfoList = []
        }
        console.log('tableList')
        console.log(this.tableInfoList)
        console.log('tableForm')
        console.log(this.tableInfoForm)
      },
    }
  };
</script>
<style>


body > {
  margin-bottom: 40px;
}

</style>
