<template>
  <el-container :style="{height: mainHeight + 'px'}">
    <el-aside>
      <el-tree :data="assetStructureList"
               :load="expandTable"
               :expand-on-click-node="false"
               lazy
               @node-click="(data) => showAuth=data.type"
               :props="defaultProps">
        <div class="custom-tree-node"  slot-scope="{ node, data }">
          <div v-if="data.type === 1" @click="selectData(node)">{{ data.name + '('+data.databaseName + '-' + data.systemName+')' }}</div>
          <div v-if="data.type === 2" @click="selectTable(node)">{{ data.name + '-'+data.as + '(' + data.dataTotal+'条)' }}</div>
        </div>

      </el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <auth-data-source v-if="showAuth === 1" v-bind:deptlists="deptList"  v-bind:DataSource="authTable" v-bind:userList="userLis" />
        <auth-table v-else-if="showAuth === 2"  v-bind:deptlists ="deptList" v-bind:DataSource="authTable" v-bind:userList="userLis"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>

import AuthDataSource from './auth/AuthDataSource.vue'
import AuthTable from './auth/AuthTable.vue'
import { selectChild, selectChildAll, selectDataSource, selectDepartmen, selectDictionaryy } from '@/api/kvt/kvt'
import { listDept } from '@/api/system/dept'
import { deptTreeSelect, listUser } from '@/api/system/user'

export default {
  name: 'assetStructure',
  components: { AuthTable, AuthDataSource },
  data() {
    return {
      mainHeight: window.innerHeight - 85,
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      },
      showAuth: null,
      assertChild:[
        {
          name :"",
          //系统名称
          systemName: "",
          //数据库名称
          databaseName: "",
          tableName: "",
          as:"",
          dataTotal: 0
        }
      ],
      assetStructureList: [
        // {
        //   name: "测试1",
        //   systemName: "云计算系统",
        //   databaseName: "yunjisuan",
        //   type: "dataSource"
        // }
      ],
      childrenList: [
      //   {
      //     name: "sys_user",
      //     as: "用户表",
      //     dataTotal: 635847,
      //     type: "dataTable",
      //     childrenList: []
      //   },
      //   {
      //     name: "sys_dept",
      //     as: "部门表",
      //     dataTotal: 362548,
      //     type: "dataTable",
      //     childrenList: []
      //   },
      //   {
      //     name: "sys_notice",
      //     as: "通知公告",
      //     dataTotal: 6347,
      //     type: "dataTable",
      //     childrenList: []
      //   }
      ],
      deptList: [],
      selectDepartmen: [],
      authTable: [],
      userLis: [],
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
        dateRange:undefined
      },
    }
  },
  created() {
    this.selectDataSource()
  },
  methods: {

    selectData(node){
      console.log("nodenodddd",node)
      let authTable ={}
      const  id = node.data.id
      const  name = node.data.name
      const  systemName =node.data.systemName
      const  databaseName =node.data.databaseName
      authTable = {
        id,
        name,
        systemName,
        databaseName
      }
      this.authTable =authTable
        this.loading = true;
        listDept(this.queryParams).then(response => {
          this.deptList = this.handleTree(response.data, "deptId");
          this.loading = false;
        });
      this.loading = true;
      listUser().then(response => {
          this.userLis = response.data.rows;
          console.log("userListuserList",this.userLis)
          this.loading = false;
        }
      );
    },
   //查询表中的数据条数
    selectTable(node){
      console.log("dddddddddddd",node)
      let authTable ={}
      const id =node.parent.data.id
        const  name = node.parent.data.name
        const  systemName =node.parent.data.systemName
        const  databaseName =node.parent.data.databaseName
        const  tableName =node.data.name
        const  tableAsName =node.data.as
        const  total =node.data.dataTotal
         authTable ={
          id,
           name,
           systemName,
           databaseName,
           tableName,
           tableAsName,
           total
        }
        this.authTable =authTable
      //部门
        this.loading = true;
      listDept(this.queryParams).then(response => {
        this.deptList = this.handleTree(response.data, "deptId");
        this.loading = false;
      });
      //用户
        this.loading = true;
        listUser().then(response => {
            this.userLis = response.data.rows;
           console.log("userListuserList",this.userLis)
            this.loading = false;
          }
        );

    },
    // getList() {
    //
    // },
     //查询同步数据
    selectDataSource(){
      selectDataSource().then(res => {
        this.assetStructureList = res.data
      })
    },
    expandTable( node, resolve){
      console.log("node",node)
      if (node.level === 0) return resolve(this.assetStructureList);
      const {data} = node;
      if (data.type == 1){
        selectDepartmen(data.databaseName).then(res=>{
          console.log("resssss",res)
          this.childrenList = res.data
        })
        selectDictionaryy(data.id).then(res => {
          console.log("rrrr",res)
          this.dictAddName = res.data
        })
      }
      // if (node.level === 2){
      //   let authTable ={}
      //   const  name = node.parent.data.name
      //   const  systemName =node.parent.data.systemName
      //   const  databaseName =node.parent.data.databaseName
      //   const  tableName =node.data.name
      //   const  tableAsName =node.data.as
      //   const  total =node.data.dataTotal
      //    authTable ={
      //      name,
      //      systemName,
      //      databaseName,
      //      tableName,
      //      tableAsName,
      //      total
      //   }
      //   this.authTable =authTable
      //    console.log("aaaaaaaaaaaaaaaaaaaaa",this.authTable)
      // }
      if (data.type === 2) {
        return resolve([])
      }

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

    }
  }
}
</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>
