<template>
  <div>
    <el-container>
      <el-aside width="30%">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>

<!--      {-->
<!--      "dataResourceName": "黑鬼",-->
<!--      "dataBaseName": "text",-->
<!--      "tableNameB": "engine_version",-->
<!--      "dataNum": 4,-->
<!--      "tableRemark": "",-->
<!--      "dataSourceSystemName": null-->
<!--      }-->

      <el-main>

        <el-card class="box-card">

          <el-descriptions title="基本信息">
            <el-descriptions-item label="数据接入名称">{{tableBasic.dataResourceName}}</el-descriptions-item>
            <el-descriptions-item label="系统名称">{{tableBasic.dataSourceSystemName}}</el-descriptions-item>
            <el-descriptions-item label="数据库名称">{{tableBasic.dataBaseName}}</el-descriptions-item>
            <el-descriptions-item label="表名称">{{tableBasic.tableNameB}}</el-descriptions-item>
            <el-descriptions-item label="表中文名称">{{tableBasic.tableRemark}}</el-descriptions-item>
            <el-descriptions-item label="数据量">{{tableBasic.dataNum}}</el-descriptions-item>
          </el-descriptions>

        </el-card>

        <el-card>


          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="部门授权" name="first">

              <el-table
                v-if="refreshTable"
                v-loading="loading"
                :data="deptList"
                :default-expand-all="isExpandAll"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                row-key="deptId"
              >
                <el-table-column label="部门名称" prop="deptName" width="260"></el-table-column>
                <el-table-column label="部门负责人" prop="leader" width="200"></el-table-column>
                <el-table-column label="邮箱" prop="email" width="200"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createTime" width="200">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" prop="status" width="200"></el-table-column>

                <el-table-column label="状态" width="200">
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.status"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      :active-value='0'
                      :inactive-value='1'
                      active-text="已授权"
                      inactive-text="未授权"
                      @change="updateDeptStatus(scope.row)"
                    >
                    </el-switch>
                  </template>
                </el-table-column>-->


              </el-table>


            </el-tab-pane>


            <el-tab-pane label="用户授权" name="second">

              <el-table
                :data="userList"
              >
                <el-table-column label="用户名称" prop="userName" width="260"></el-table-column>
                <el-table-column label="用户昵称" prop="nickName" width="200"></el-table-column>
                <el-table-column label="用户部门" prop="deptName" width="200"></el-table-column>
                <el-table-column label="用户邮箱" prop="email" width="200"></el-table-column>
                <el-table-column label="用户手机号" prop="phoneNumber" width="200"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createTime" width="200">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="200">
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.status"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      :active-value='0'
                      :inactive-value='1'
                      @change="updateDeptStatus(scope.row)"
                    >
                    </el-switch>
                  </template>
                </el-table-column>-->


              </el-table>


            </el-tab-pane>






            <!--            <el-tab-pane label="用户授权" name="second">-->
<!--                <el-table-->
<!--                  v-if="refreshTable"-->
<!--                  v-loading="loading"-->
<!--                  :data="deptList"-->
<!--                  :default-expand-all="isExpandAll"-->
<!--                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"-->
<!--                  row-key="deptId"-->
<!--                >-->
<!--                  <el-table-column label="用户名称" prop="deptName" width="260"></el-table-column>-->
<!--                  <el-table-column label="用户昵称" prop="orderNum" width="200"></el-table-column>-->
<!--                  <el-table-column label="用户名称" prop="orderNum" width="200"></el-table-column>-->
<!--                  <el-table-column label="用户部门" prop="orderNum" width="200"></el-table-column>-->
<!--                  <el-table-column label="用户邮箱" prop="orderNum" width="200"></el-table-column>-->
<!--                  <el-table-column label="用户手机号" prop="orderNum" width="200"></el-table-column>-->
<!--                  <el-table-column label="创建时间" prop="orderNum" width="200"></el-table-column>-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-switch-->
<!--                      v-model="scope.row.status"-->
<!--                      active-color="#13ce66"-->
<!--                      inactive-color="#ff4949"-->
<!--                      active-value="0"-->
<!--                      inactive-value="1">-->
<!--                    </el-switch>-->
<!--                  </template>-->

<!--                </el-table>-->
<!--              </el-tab-pane>-->


          </el-tabs>


        </el-card>

      </el-main>
    </el-container>




  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,

import {findDeptListStatus, findTableValueList, findUserListStatus} from "@/api/etl/switch";
import {findTableInfoList} from "@/api/etl/switch";
import {findAccredit} from "@/api/etl/switch";
import {addMiddle} from "@/api/etl/switch";
import {remove} from "@/api/etl/switch";
import {shouldAdd} from "script-ext-html-webpack-plugin/lib/custom-attributes";


// import {findStructureByTableId} from "@/api/etl/switch";
export default {
  dicts: ['yes_no'],
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      accredit:{
        deptId:'',
        basicId:'',
        tableId:'',
        userId:'',
      },

      userList:[

      ],
      activeName: 'first',
      // 重新渲染表格状态
      refreshTable: true,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 遮罩层
      loading: true,
      //表单树数据
      deptList:[

      ],
      DataValue:[],

      data:{

      },
      defaultProps:{
        children:"children",
        label:'tableName'
      },
      tableBasic:{

      },
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    updateDeptStatus(row){

        this.accredit.deptId=row.deptId
        this.accredit.userId=row.userId

        if (row.status===0){
          addMiddle(this.accredit).then(res=>{
            if (res.code===200){
              alert("授权成功")
            }
          })
        }

        if (row.status===1){
          remove(this.accredit).then(res=>{
            if (res.code===200){
              alert("取消授权成功")
            }
          })
        }

      console.log(row);
    },
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    findTAbleInfoList(){
      findTableInfoList().then(res=>{
        this.data=res.data;
      })
    },
    handleNodeClick(data) {
      this.accredit.tableId = data.id;
      this.accredit.basicId = data.basicId;
      this.loading = true;
      // if (data.children==null){
      findDeptListStatus(data.id, data.basicId).then(res => {
        this.deptList = this.handleTree(res.data, "deptId");
        this.loading = false;
      })
      findUserListStatus(data.id, data.basicId).then(res => {
        this.userList = res.data;
      })
      findAccredit(data.id).then(res => {
        this.tableBasic = res;
      })
    // }

      console.log(data);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.findTAbleInfoList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>

