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

    <el-main>

      <el-form :inline="true" :model="tableBasic" class="demo-form-inline">
        <el-form-item label="数据库名称">
          <el-input v-model="tableBasic.tableName" placeholder="数据库/表名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="中文名称">
          <el-input v-model="tableBasic.tableRemark" placeholder="中文名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="数据量">
          <el-input v-model="tableBasic.dataNum" placeholder="数据量" disabled></el-input>
        </el-form-item>
      </el-form>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
        </div>
        <template>
          <el-tabs v-model="activeName" type="card" @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="260"></el-table-column>
                <el-table-column label="邮箱" prop="email" width="260"></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 align="center" class-name="small-padding fixed-width" label="操作(授权)">
                  <template slot-scope="scope">
                    <el-switch
                      :value="isDeptAccredited(scope.row.deptId)"
                      @change="handleDeptAccreditChange(scope.row.deptId,$event)"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>


            </el-tab-pane>
            <el-tab-pane label="用户授权" name="second">
              <el-table v-loading="loading" :data="userList">
                <el-table-column v-if="columns[0].visible" key="userId" align="center" label="用户编号" prop="userId"/>
                <el-table-column v-if="columns[1].visible" key="userName" :show-overflow-tooltip="true" align="center" label="用户名称"
                                 prop="userName"/>
                <el-table-column v-if="columns[2].visible" key="nickName" :show-overflow-tooltip="true" align="center" label="用户昵称"
                                 prop="nickName"/>
                <el-table-column v-if="columns[3].visible" key="deptName" :show-overflow-tooltip="true" align="center" label="部门"
                                 prop="dept.deptName"/>
                <el-table-column v-if="columns[4].visible" key="phonenumber" align="center" label="手机号码"
                                 prop="phonenumber" width="120"/>
                <el-table-column v-if="columns[7].visible" key="email" align="center" label="邮箱"
                                 prop="email" width="120"/>
                <el-table-column v-if="columns[6].visible" align="center" label="创建时间" prop="createTime" width="160">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" class-name="small-padding fixed-width" label="操作(授权)" width="160">
                  <template slot-scope="scope">

                    <el-switch
                      :value="isAccredited(scope.row.userId)"
                      @change="handleAccreditChange(scope.row.userId,$event)"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-card>
    </el-main>
  </el-container>
</div>
</template>
<script setup>

import { listUser } from '@/api/system/user'
import { listDept } from '@/api/system/dept'
import {
  addDeptAssetImpower,
  addUserAssetImPower,
  delDeptAssetImpower,
  delUserAssetImPower,
  findDeptIdList,
  findUserIdList
} from "@/api/source/asset";
import {findTableInfoList} from "@/api/tableData/data";

export default {
  name:'Accredit',
  data() {
    return {
      //用户是否授权
      AccreditValue:false,
      //用户列表
      userList:[],
      // 列信息
      columns: [
        {key: 0, label: `用户编号`, visible: false},
        {key: 1, label: `用户名称`, visible: true},
        {key: 2, label: `用户昵称`, visible: true},
        {key: 3, label: `部门`, visible: true},
        {key: 4, label: `手机号码`, visible: true},
        {key: 5, label: `状态`, visible: false},
        {key: 6, label: `创建时间`, visible: true},
        {key: 7, label: `邮箱`, visible: true}
      ],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      deptList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined
      },
      data:[],
      defaultProps: {
        children: 'children',
        label: 'tableName'
      },
      tableBasic:{},
      tableStructure:[],
      valueList:[],
      activeName: 'first',
      AssetImPowerListReq:{
        basicId:null,
        tableId:null,
        deptId:null,
        userId:null
      },
      userIdList:[],
      deptIdList:[],
    };
  },
  created() {
    //查询数据库和相关联表
    this.findByTableName();
    //查询部门列表;
    this.getList();
    //查询用户列表
    this.getUserList();

  },
  methods: {
    //部门switch状态变化
    handleDeptAccreditChange(deptId, value) {
      this.AssetImPowerListReq.basicId = this.tableBasic.basicId
      this.AssetImPowerListReq.tableId = this.tableBasic.id
      this.AssetImPowerListReq.deptId = deptId
      if (this.tableBasic.children != null) {
        this.AssetImPowerListReq.tableId = null;
      } else {
        this.AssetImPowerListReq.basicId = null;
      }

      if (value === true) {
        //添加部门资产权限
        addDeptAssetImpower(this.AssetImPowerListReq).then((res) => {
          if (res.code === 200) {
            this.$modal.msgSuccess("授权成功");
          } else {
            this.$modal.msgError("授权失败");
          }
          this.findDeptIdList();
          this.isDeptAccredited()
        })
      } else {
        //删除部门资产权限
        delDeptAssetImpower(this.AssetImPowerListReq).then((res) => {
          if (res.code === 200) {
            this.$modal.msgSuccess("权限删除成功");
          } else {
            this.$modal.msgError("权限删除失败");
          }
          this.findDeptIdList();
          this.isDeptAccredited()
        })
      }
    },
    //处理switch状态变化,进行授予权限和剔除权限
    handleAccreditChange(userId, value) {
      console.log("userId的值：:" + userId);
      console.log("value的值：" + value)
      this.AssetImPowerListReq.basicId = this.tableBasic.basicId
      this.AssetImPowerListReq.tableId = this.tableBasic.id
      this.AssetImPowerListReq.userId = userId
      if (this.tableBasic.children != null) {
        this.AssetImPowerListReq.tableId = null;
      } else {
        this.AssetImPowerListReq.basicId = null;
      }

      if (value === true) {
        //添加用户资产权限
        addUserAssetImPower(this.AssetImPowerListReq).then((res) => {
          if (res.code === 200) {
            this.$message.success("授权成功")
          } else {
            this.$message.error("授权失败");
          }
          this.findUserIdList()
          this.isAccredited()
        })
      } else {
        //删除用户资产权限
        delUserAssetImPower(this.AssetImPowerListReq).then((res) => {
          if (res.code === 200) {
           this.$message.success("取消授权成功");
          } else {
            this.$message.error("取消授权失败");
          }
          this.findUserIdList()
          this.isAccredited()
        })
      }
    },

    // 判断用户ID是否在列表中
    isAccredited(userId) {
      return this.userIdList.includes(userId);
    },

    //判断部门ID是否在列表中
    isDeptAccredited(deptId) {
      return this.deptIdList.includes(deptId);
    },

    /**
     * 查询用户列表
     */
    getUserList() {
      this.loading = false;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
          console.log(response.data.rows)
        }
      );
    },

    /**
     * 查询部门列表
     */
    getList() {
      this.loading = false;
      listDept(this.queryParams).then(response => {
        this.deptList = this.handleTree(response.data, "deptId");
        this.loading = false;
      });
    },
    /**
     * 部门授权卡片
     * @param tab
     * @param event
     */
    handleClick(tab, event) {
      // console.log(tab, event);
    },

    /**
     * 查询数据库和相关联表
     * @returns {AxiosPromise} 返回集合
     */
    findByTableName() {
      findTableInfoList().then((res) => {
        this.data = res.data
      })
    },

    /**
     * 查询资产赋权用户信息
     * @param data 参数信息
     * @returns {*} 响应结果
     */
    findUserIdList(){
      findUserIdList(this.AssetImPowerListReq).then((res) => {
        this.userIdList = res.data
      })
    },

    /**
     * 查询资产赋权部门信息
     * @param data 参数信息
     * @returns {*} 响应结果
     */
    findDeptIdList(){
      findDeptIdList(this.AssetImPowerListReq).then((res) => {
        this.deptIdList = res.data
      })
    },
    /**\
     * 树形结构
     * @param data
     */
    handleNodeClick(data) {
      this.tableBasic = data
      this.AssetImPowerListReq.tableId = this.tableBasic.id
      this.AssetImPowerListReq.basicId = this.tableBasic.basicId
      this.AssetImPowerListReq.deptId = this.tableBasic.deptId
      if (this.tableBasic.children != null) {
        this.AssetImPowerListReq.tableId = null;
      } else {
        this.AssetImPowerListReq.basicId = null;
      }
      /**
       * 查询资产赋权用户信息
       * @param data 参数信息
       * @returns {*} 响应结果
       */
      findUserIdList(this.AssetImPowerListReq).then((res) => {
        this.userIdList = res.data
      })
      /**
       * 查询资产赋权部门信息
       * @param data 参数信息
       * @returns {*} 响应结果
       */
      findDeptIdList(this.AssetImPowerListReq).then((res) => {
        this.deptIdList = res.data
      })

    },

  },
}
</script>
<style scoped lang="scss">

</style>
