<template>
  <div id="jsgl">
    <div class="left-part">
      <div class="jsgl-title">角色列表</div>
      <div>
        <div class="new-user" @click="addRole()">
          <img src="../../assets/img/setting/04.png" alt="" />&nbsp;新增
        </div>
      </div>
      <div class="table-div">
        <el-table :data="tableData" height="100%" border style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="60">
          </el-table-column>
          <el-table-column align="center" prop="name" label="名称" width="120">
          </el-table-column>
          <el-table-column prop="description" label="描述" align="center">
          </el-table-column>

          <el-table-column label="新增权限" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.adding" @change="changeAuth(scope.row, 1)" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="删除权限" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.deleting" @change="changeAuth(scope.row, 2)" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="修改权限" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.updating" @change="changeAuth(scope.row, 3)" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="下载权限" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.downloading" @change="changeAuth(scope.row, 4)" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="update_time" width="180" label="修改时间" align="center">
          </el-table-column>
          <el-table-column prop="create_time" width="180" label="创建时间" align="center">
          </el-table-column>
          <el-table-column align="center" prop="cz" label="操作" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-edit" style="margin-right: 15px" @click="handleEdit(scope.$index, scope.row)" title="编辑">
              </i>
              <i class="el-icon-delete-solid" style="margin-right: 15px" @click="handleDelete(scope.$index, scope.row)"
                title="删除">
              </i>
              <i class="el-icon-setting" style="float: none" @click="handleGrant(scope.$index, scope.row)" title="权限">
              </i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="right-part">
      <div class="jsgl-title" style="width: 100%">
        {{ selectedIndex >= 0 ? tableData[selectedIndex].name : "菜单分配" }}
      </div>
      <div class="jsgl-tree">
        <el-tree :data="data" ref="tree" show-checkbox node-key="id" :props="defaultProps">
        </el-tree>
      </div>
      <div class="jsgl-button">
        <div class="button-discuss" v-show="this.selectedIndex >= 0" @click="save()">
          保存
        </div>
      </div>
    </div>

    <el-dialog title="新增角色信息" :visible.sync="addDialogVisible" center>
      <el-form :model="new_role" label-width="80px" style="margin-bottom: 0px" :rules="rules" ref="ruleForm">
        <el-form-item label="角色名" prop="name">
          <el-input v-model="new_role.name" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="new_role.description" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addingRole()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑角色信息" :visible.sync="editDialogVisible" center>
      <el-form :model="edit_role" label-width="80px" style="margin-bottom: 0px" :rules="rules" ref="ruleForm1">
        <el-form-item label="角色名" prop="name">
          <el-input v-model="edit_role.name" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="edit_role.description" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatingRole()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style lang="scss">
#jsgl {
  width: 96%;
  height: 97%;
  margin: 0%;
  margin-left: 1%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;

  .right-part {
    width: calc(15% - 10px);
    height: 100%;
    margin-left: 10px;
    border: 1px solid #535353 !important;
    box-shadow: 0 0 10px #535353;

    .jsgl-tree {
      width: 100%;
      max-height: calc(100% - 140px);
      overflow-y: auto;

      .el-tree {
        margin-top: 10px;
        color: white;
        background: transparent;

        .el-tree-node__content {
          height: 40px;
        }
      }

      .el-tree>.el-tree-node>.el-tree-node__content {
        height: 40px;
        // background-image: url(../../assets/img/yqjc/24.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content {
        height: 40px;
        // background-image: url(../../assets/img/yqjc/24.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
        font-size: 16px !important;
      }

      .el-tree>.el-tree-node>.el-tree-node__children {
        background-color: #1d2d46 !important;
      }

      .el-tree-node:focus>.el-tree-node__content {
        background-color: #1d2d46 !important;
      }

      .el-tree-node__content:hover,
      .el-tree-node__content:focus {
        background-color: #2c456d !important;
      }
    }

    .jsgl-button {
      width: 100%;
      height: 50px;
      margin-top: 20px;
      text-align: center;

      .button-discuss {
        width: 100px;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
        font-size: 14px;
        margin-left: 20px;
        // text-align: center;
        cursor: pointer;
        background-image: url(../../assets/img/yqjc/40.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .left-part {
    position: relative;
    width: 85%;
    height: 100%;
    margin-left: 10px;
    border: 1px solid #535353 !important;
    box-shadow: 0 0 10px #535353;

    .new-user {
      width: 120px;
      height: 25px;
      line-height: 25px;
      padding-left: 12px;
      text-align: center;
      float: right;
      margin-top: -25px;
      cursor: pointer;
      background: url(../../assets/img/setting/08.png) no-repeat;
      background-size: 100% 100%;
    }

    .table-div {
      width: 100%;
      height: calc(100% - 70px);

      // .el-table{
      //     text-align: center!important;
      // }
      .el-table tr {
        background-color: transparent !important;
        color: #ffffffc7;
      }

      .el-table thead tr {
        height: 40px;
        background: url(../../assets/img/setting/tr1.png) no-repeat;
        background-size: 100% 100%;
      }

      .el-table th{
        background-color: transparent;
      }

      tbody tr {
          border-bottom: 1px solid #252631;
        }

      .el-table td {
        border-bottom: 1px solid #252631;
        border-right: unset;
      }

      .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #82848a78;
      }

      .el-table th {
        border: unset;
        // background-color: #263b5d !important;
      }

      .el-table--fit {
        background: none !important;
        border: unset;
      }

      .el-icon-delete-solid {
        color: red;
        cursor: pointer;
        font-size: 18px;
      }

      .el-icon-edit {
        color: #1172d8;
        cursor: pointer;
        font-size: 20px;
      }

      .el-icon-view {
        color: #00ffff;
        font-size: 20px;
        cursor: pointer;
      }

      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
      }
    }
  }

  .jsgl-title {
    width: 160px;
    height: 35px;
    line-height: 30px;
    font-size: 16px;
    // margin-left: 20%;
    margin-top: 20px;
    text-align: center;
    color: white;
    background-image: url(../../assets/img/yqjc/24.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .el-dialog {
    // height: 350px;
    // background: url(../../assets/img/setting/dialog1.png) no-repeat;
    // background-size: 100% 100%;
    width: 500px;
    background-color: #1d2d47;

    .el-dialog__title {
      color: #ffff;
    }

    .el-form-item__label {
      color: #ffff;
    }

    .el-input__inner {
      background: none;
      color: #ffff;
      border: 1px solid #535353 !important;
      box-shadow: 0 0 10px #535353;
    }

    .el-input__count {
      color: #229dbd;
      background: #1d2d4600;
    }
  }
}
</style>

<script>
import {
  get,
  post,
  delete_util,
  getTreeData,
  startLoading,
  endLoading,
} from "../../util/http_util";
export default {
  name: "jsgl",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [],
      selectedIndex: -1,
      new_role: {},
      edit_role: {},
      addDialogVisible: false,
      editDialogVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入角色名', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    changeAuth(item, mark) {
      this.$confirm("是否确认修改权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(res => {
          return post("api/rest/system/role/updateRole", item);
        })
        .then(res => {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(err => {
          this.$message({
            type: "warning",
            message: err instanceof Object ? err.message : "取消操作",
          });
          if (mark == 1) {
            item.adding = !item.adding;
          } else if (mark == 2) {
            item.deleting = !item.deleting;
          } else if (mark == 3) {
            item.updating = !item.updating;
          } else {
            item.downloading = !item.downloading;
          }
        });
    },
    handleGrant(index, item) {
      this.selectedIndex = index;
      startLoading();
      post("api/rest/system/menu/queryMenu", { type: "2", id: item.id })
        .then((res) => {
          //注意只需要设置叶子节点即可，上级节点会自动根据子节点是否选中情况来自动设置选中、未选中或者半选中状态
          this.$refs.tree.setCheckedKeys(
            res.filter((e) => e.level == 2).map((e) => e.id)
          );
          endLoading();
        })
        .catch((err) => {
          this.$refs.tree.setCheckedKeys([]);
          console.log(err);
          endLoading();
        });
    },
    handleEdit(index, item) {
      let _this = this;
      _this.edit_role = Object.assign({}, item);
      _this.editDialogVisible = true;
      // setTimeout(function () {
      //   _this.$refs.ruleForm1.resetFields();
      // }, 200)
    },
    handleDelete(index, item) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(res => {
          return delete_util("api/rest/system/role/deleteRole/" + item.id);
        })
        .then((res) => {
          if (res == 1) {
            this.tableData.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } else {
            throw "修改失败";
          }
        })
        .catch((err) => {
          if (err == "cancel") {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          } else if (err instanceof Object) {
            this.$message({
              type: 'info',
              message: err.message
            });
          } else {
            this.$message({
              type: 'info',
              message: '删除失败'
            });
          }
        });
    },
    addRole() {
      let _this = this;
      _this.new_role = {
        name: '',
      };
      _this.addDialogVisible = true;
      setTimeout(function () {
        _this.$refs.ruleForm.resetFields();
      }, 200)
    },
    addingRole() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          post("api/rest/system/role/addRole", this.new_role)
            .then((res) => {
              this.$message({
                type: "success",
                message: "保存成功!",
              });
              get("api/rest/system/role/queryRole").then((res) => {
                this.tableData = res;
              });
              this.addDialogVisible = false;
            })
            .catch((err) => {
              console.log(err);
              this.$message({
                type: "warning",
                message: "保存失败!",
              });
            });
        }
      });
    },
    updatingRole() {
      this.$refs["ruleForm1"].validate((valid) => {
        if (valid) {
          post("api/rest/system/role/updateRole", this.edit_role)
            .then((res) => {
              this.$message({
                type: "success",
                message: "保存成功!",
              });
              get("api/rest/system/role/queryRole").then((res) => {
                this.tableData = res;
              });
              this.editDialogVisible = false;
            })
            .catch((err) => {
              console.log(err);
              this.$message({
                type: "warning",
                message: "保存失败!",
              });
            });
        }
      });
    },
    save() {
      //保存授权
      // 获取选中和半选中的菜单
      let tmp1 = this.$refs.tree.getHalfCheckedNodes().map((e) => e.id);
      let tmp = this.$refs.tree.getCheckedNodes().map((e) => e.id);
      post(
        "api/rest/system/role/grantMenu/" + this.tableData[this.selectedIndex].id,
        tmp1.concat(tmp)
      )
        .then((res) => {
          get("api/rest/system/role/queryRole").then((res1) => {
            this.tableData = res1;
          });
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "warning",
            message: "保存失败!",
          });
        });
    },
  },
  activated() {
    get("api/rest/system/role/queryRole")
        .then((res) => {
          this.tableData = res;
          return post("api/rest/system/menu/queryMenu", { type: "0" });
        })
        .then((res) => {
          this.data = getTreeData(res, "code", "parentCode", "children", "#");
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
  },
};
</script>