<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside>
      <el-menu :default-openeds="['1', '3']">
        <el-tree :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main>
        <auth-data-source v-if="showAuth === 'dataSource'" :title="title"/>
        <auth-table v-else-if="showAuth === 'dataTable'" :title="title"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>

import AuthDataSource from './auth/AuthDataSource.vue'
import AuthTable from './auth/AuthTable.vue'
import {dataAssetList, listSource} from "@/api/etl/source";

export default {
  name: 'assetStructure',
  components: { AuthTable, AuthDataSource },
  data() {
    return {
      title: {},
      sourceList: [],
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'tableList',
        label: 'label'
      },
      showAuth: null
    }
  },
  methods: {
    handleNodeClick(data) {
      if (data.dataType === 'dataSource'){
        dataAssetList(data).then(res => {
          res.data.forEach(table => {
            table.dataType = "dataTable"
            table.label=table.tableName+"-"+table.tableComment+"("+table.tableCount+"条)"
          })
          data.tableList = res.data
          this.sourceList[this.sourceList.indexOf(data)].tableList = res.data
          this.title = data
        })

      }else{
        this.sourceList.forEach(source => {
          if (source.tableList!=null){
            source.tableList.forEach(table => {
              if (table.tableName === data.tableName){
                data.dataSourceName = source.dataSourceName
                data.systemName = source.systemName
                data.databaseName = source.databaseName
              }
            })
          }
        })
        this.title= data
      }
      this.showAuth = data.dataType
    },
    expandTable( node, resolve){
      if (node.level === 0) return resolve(this.assetStructureList);
      const {data} = node;
      if (data.type === 'dataTable') {
        return resolve([])
      }
      setTimeout(() => {
        resolve(this.childrenList)
      }, 500);
    },
    getList() {
      this.assetsCompute={
        assetsModuleSum: 0,
        dataModuleSum: 0,
        dataSourceSum: 0
      }
      listSource(this.queryParams).then(response => {
        this.sourceList = response.data.rows;
        this.sourceList.forEach(source => {
          source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'
          source.dataType = 'dataSource'
          if (source.tableList!=null){
            source.tableList.forEach(table => {
              table.label = table.tableName+'-'+table.tableComment+'('+table.tableCount+'条)'
              table.dataType = 'dataTable'
            })
          }
        })
        this.total = response.data.total;
      });
    }
  },
  created() {
    this.getList()
  },
}
</script>
<style scoped lang="scss">
.el-aside {
  margin: 0;
  padding: 0;
  width: 400px;
  background-color: white;
}
.el-main {
  background-color: #f1f1f1;
}
.custom-tree-node{
  height: 30px;
}
</style>
