<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">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div @click="getDeptAndUser(data.dataSource)" v-if="data.type === 'dataSource'">{{ data.dataSource.name + '('+data.dataSource.dataSourceDatabaseName + '-' + data.dataSource.fromSystem+')' }}</div>
          <div  v-if="data.type === 'dataTable'">{{ data.dataTable.tableName + '-'+data.dataTable.tableAnnotation + '(' + data.dataTable.recordCount+'条)' }}</div>
        </div>
      </el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <auth-data-source :userAndDeptDataPermissionsListResp="userAndDeptDataPermissionsListResp" v-if="showAssets === 'dataSource'"/>
        <auth-table v-else-if="showAssets === 'dataTable'"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import AuthDataSource from './auth/AuthDataSource.vue'
import AuthTable from './auth/AuthTable.vue'
import {Table} from "element-ui";
import {queryBigStructure} from "@/api/dataSource/data";
import {getAllUserAndDept} from "@/api/dataSource/Permissions";

export default {
  name: 'assetStructure',
  computed: {
    Table() {
      return Table
    }
  },
  components: { AuthDataSource, AuthTable },
  data() {
    return {
      assetsModelList: [],
      dataBaseConnectObj: {},
      mainHeight: window.innerHeight - 85,
      assetStructureList: [],
      showAssets: null,
      title: null,
      dataType: null,
      userAndDeptDataPermissionsListResp: {}
    }
  },
  methods: {
    getDeptAndUser(dataSource){
      this.dataType = "dataSource"
      getAllUserAndDept(this.dataType,dataSource.id).then(
        res => {
          this.userAndDeptDataPermissionsListResp = res.data
          this.userAndDeptDataPermissionsListResp.dataInfo = dataSource
          console.log("后台响应对象:",this.userAndDeptDataPermissionsListResp)
        }
      )
    },
    getBigStructure() {
      queryBigStructure().then(
        res => {
          this.assetStructureList = res.data.dataSourceDecorationList
          console.log("BigStructure",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>
