<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside>
      <el-tree :data="assetStructureList"
               :expand-on-click-node="false"
               :load="expandTable"
               lazy
               @node-click="(data) => showAssets=data.type"
               :props="defaultProps">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div @click="getNowDataSource(data)" v-if="data.type === 'dataSource'">{{ data.dataSource.name + '('+data.dataSource.dataSourceDatabaseName + '-' + data.dataSource.fromSystem+')' }}</div>
          <div @click="getTableStructure(data)" v-if="data.type === 'dataTable'">{{ data.dataTable.tableName + '-'+data.dataTable.tableAnnotation + '(' + data.dataTable.recordCount+'条)' }}</div>
        </div>
      </el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <OverallAssets :dataSourceCount="dataSourceCount" :allTableCount="allTableCount" :allDataModelCount="allDataModelCount" v-if="showAssets == null"/>
        <overall-specific-assets :dataSourceObj="dataSourceObj"  :assetsModelRespArrayList="assetsModelRespArrayList" v-if="showAssets === 'dataSource'" :title="title"/>
        <overall-asset-structure :tableInfo="tableInfo" :assetsModelList="assetsModelList" v-if="showAssets === 'dataTable'" :title="title"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import OverallAssets from './dashboard/OverallAssets.vue'
import OverallSpecificAssets from './dashboard/OverallSpecificAssets.vue'
import OverallAssetStructure from './dashboard/OverallAssetStructure.vue'
import {queryBigStructure, queryTableStructure} from "@/api/data";
import {getAssetsModelByDataTableId, getAssetsModelListByTableIds} from "@/api/assets";

export default {
  name: 'assetStructure',
  components: { OverallAssetStructure, OverallSpecificAssets, OverallAssets },
  data() {
    return {
      tableInfo: {},
      assetsModelList: [],
      dataSourceObj: null,
      tableCount:0,
      dataModelCount:0,
      dataSourceCount: 0,
      allTableCount: 0,
      allDataModelCount: 0,
      dataBaseConnectObj: {},
      tableData: [],
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      },
      assetStructureList: [],
      childrenList: [],
      showAssets: null,
      title: null,
      tableIds: [],
      assetsModelRespArrayList: []
    }
  },
  methods: {
    getNowDataSource(data) {
      console.log(data)
      this.tableIds = data.dataTableList.map(dataTable => dataTable.dataTable.id);
      console.log("idList",this.tableIds)
      getAssetsModelListByTableIds(this.tableIds).then(
        res => {
          this.assetsModelRespArrayList = res.data
          console.log("this.assetsModelRespArrayList",this.assetsModelRespArrayList)
        }
      )
      this.dataSourceObj = data
    },
    getTableStructure(data) {
      console.log(data.dataTable.id)
      getAssetsModelByDataTableId(data.dataTable.id).then(
        res => {
          console.log("根据表ID",res.data)
          this.assetsModelList = res.data.assetsModelList
          this.tableInfo = res.data.dataTable
          console.log(this.tableInfo)
        }
      )
    },
    getBigStructure() {
      queryBigStructure().then(
        res => {
          this.assetStructureList = res.data.dataSourceDecorationList
          this.dataSourceCount = this.assetStructureList.length
          this.allTableCount = res.data.allTableCount
          this.allDataModelCount = res.data.allDataModelCount
          console.log("BigStructure",this.assetStructureList)
          this.assetsModelList = this.assetStructureList
        }
      )
    },
    expandTable( node, resolve){
      if (node.level === 0) return resolve(this.assetStructureList);
      if (node.level > 1) return resolve([]);
      const {data} = node;
      if (data.type === 'dataSource') {
        this.title = data.name + '('+data.dataSource.dataSourceDatabaseName + '-' + data.dataSource.fromSystem+')'
      }
      if (data.type === 'dataTable') {
        this.title = data.tableName + '('+data.dataTable.tableAnnotation + '-' + data.dataTable.recordCount+')'
      }
      setTimeout(() => {
        resolve(data.dataTableList)
        this.showAuth = data.type;
      }, 500);
    }
  },
  created() {
    this.getBigStructure()
  }
}
</script>
<style scoped lang="scss">
.el-aside {
  margin: 0;
  padding: 0;
  width: 400px;
  background-color: white;
}
.el-main {
  background-color: #f1f1f1;
}
</style>
