<template>
  <div style="height: 100%">
    <div flex style="height: 100%">
      <base-tree
        ref="baseTree"
        :filterShow="true"
        :filterButtonShow="true"
        :Allshow="false"
        :treeProps="treeProp"
        :menuData="treeMenuData"
        v-loading="treeLoading"
        @handleNodeClick="handleNodeClick"
        style="width: 250px;background: #fff;padding:16px;"
        :appendButton="false"
        :treeButton="true"
        @remove="remove"
        @revise="revise"
        @add="add"
      >
      </base-tree>
      <base-layout
        style="width: calc(100% - 250px)"
        ref="baseLayout"
        :buttonList="buttonList"
        @onFuncBtn="onFuncBtn"
        :queryShow="false"
        :searchShow="false"
        :defaultButtonSwitch="false"
      >
        <div slot="main">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户列表" name="first">
              <base-table
                ref="baseTable"
                :showIndex="true"
                :tabLoading.sync="tabLoading"
                :tableHeight="'calc(100vh - 240px)'"
                :tableData="tableData"
                :tableColumn="tableColumnData"
                v-if="activeName === 'first'"
              >
                <template v-slot:state="{ row }">
                  <div style="width: 100%">
                    <span v-if="row.state == '1'" style="color: #75c560"
                      >启用</span
                    >
                    <span v-else style="color: #f56c6c">停用</span>
                  </div>
                </template>
              </base-table>
            </el-tab-pane>
            <el-tab-pane label="菜单列表" name="second">
              <base-table
                v-if="activeName === 'second'"
                ref="baseTable"
                :showIndex="true"
                :tabLoading.sync="tabLoading"
                :tableHeight="'calc(100vh - 240px)'"
                :tableData="menuData"
                :tableColumn="menuList"
              >
                <template v-slot:hidden="{ row }">
                  <div style="width: 100%">
                    <span v-if="row.hidden" style="color: #75c560">显示</span>
                    <span v-else style="color: #f56c6c">隐藏</span>
                  </div>
                </template>
                <template v-slot:ifCheck="{ row }">
                  <div style="width: 100%">
                    <span v-if="row.ifCheck" style="color: #75c560"
                      >已分配</span
                    >
                    <span v-else style="color: #f56c6c">未分配</span>
                  </div>
                </template>
              </base-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </base-layout>
    </div>
    <right-dialog
      ref="rightDialog"
      @userUnderRole="userUnderRole"
    ></right-dialog>
    <right-dialog-roles
      ref="RightDialogRoles"
      @resetTable="resetTable"
    ></right-dialog-roles>
    <right-dialog-menu
      ref="RightDialogMenu"
      @userUnderRole="userUnderRole"
    ></right-dialog-menu>
  </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseTree from "@/components/base/BaseMenuTree";
import rightDialog from "./rightDialog";
import rightDialogRoles from "./rightDialogRoles";
import rightDialogMenu from "./rightDialogMenu";
import configData from "./configData";
import { authApi } from "@/api/apis/auth";
import RightDialogMenu from "./rightDialogMenu.vue";
export default {
  name: "Roles",
  data() {
    return {
      buttonList: [
        {
          menuName: "新增角色-用户权限",
          icon: "el-icon-plus",
          btnFunction: "assigningUsers",
        },
        {
          menuName: "新增角色-菜单权限",
          icon: "el-icon-plus",
          btnFunction: "addMenu",
        },
        {
          menuName: "刷新",
          icon: "el-icon-refresh",
        },
      ],
      tabLoading: false,
      tableData: [],
      menuData: [],
      tableColumnData: configData.tableColumnData,
      menuList: configData.menuList,
      pageModel: {
        page: 1,
        limit: 10,
      },
      treeProp: {
        children: "children",
        label: "roleName",
      },
      treeMenuData: [],
      treeLoading: false,
      activeName: "first",
      rolesId: "",
      selectedId: [],
      menuId: [],
      selectedNo: false,
      admin: null,
      typeName: "",
    };
  },

  components: {
    baseLayout,
    baseTable,
    rightDialog,
    baseTree,
    rightDialogRoles,
    rightDialogMenu,
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    async getRoleList() {
      this.treeLoading = true;
      let params = {};
      let res = await authApi("roleService", "role", "queryAll", "", params);
      this.treeLoading = false;
      if (res.status == "200") {
        this.treeMenuData = res.attribute;
      }
    },
    onFuncBtn(btn) {
      this[btn.btnFunction]();
    },
    // 分配用户
    assigningUsers() {
      this.$refs.rightDialog.openDialog(
        "add",
        this.selectedId,
        this.selectedNo,
        this.rolesId
      );
    },
    // 分配菜单
    addMenu() {
      if (this.typeName == "sys") {
        this.$vmNews("系统内置角色，不可分配菜单", "info");
      } else {
        this.$refs.RightDialogMenu.openDialog(
          "add",
          this.menuId,
          this.selectedNo,
          this.rolesId
        );
      }
    },
    // 刷新表格
    resetTable() {
      this.getRoleList();
      this.tableData = Object.assign([], []);
      this.selectedId = Object.assign([], []);
      this.menuData = Object.assign([], []);
      this.menuId = Object.assign([], []);
      this.selectedNo = false;
    },
    // 树点击事件
    handleNodeClick(data) {
      this.rolesId = data.id;
      this.typeName = data.roleName;
      this.userUnderRole();
    },
    async userUnderRole() {
      this.tabLoading = true;
      // 该角色下的所有用户
      const res = await authApi("roleService", "user", "queryRoleUser", "", {
        id: this.rolesId,
      });
      if (res.status == "200") {
        this.tableData = res.attribute;
        this.selectedId = [];
        this.selectedNo = true;
        this.tableData.forEach((el) => {
          this.selectedId.push(el.id);
        });
      }
      // 该角色下的所有菜单权限
      const item = await authApi(
        "roleService",
        "role",
        "queryRoleModuleTree",
        "",
        {
          id: this.rolesId,
        }
      );
      if (item.status == "200") {
        this.menuData = item.attribute;
        this.menuId = Object.assign([], []);
        let menuIdArr = Object.assign([], []);
        function getCheckData(data) {
          data.forEach((el) => {
            if (el.ifCheck) {
              menuIdArr.push(el.id);
            }
            if (el.children != null && el.children && el.children.length) {
              getCheckData(el.children);
            }
          });
        }
        getCheckData(this.menuData);
        this.menuId = menuIdArr;
      }
      this.tabLoading = false;
    },
    add() {
      this.$refs.RightDialogRoles.openDialog("add");
    },
    remove(id) {
      this.$confirm("确认删除该内容吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.openLoading("del");
          this.deleteRoles(id.id);
        })
        .catch(() => {
          this.$vmNews("取消操作", "info");
        });
    },
    // 角色树删除
    async deleteRoles(id) {
      let params = {
        id: id,
      };
      let res = await authApi(
        "roleService",
        "role",
        "delectEntity",
        "",
        params
      );
      if (res.status == "200") {
        this.$nextTick(() => {
          this.$vmNews("删除成功", "success");
          this.resetTable();
        });
      }
    },
    revise(id) {
      this.openLoading("detail");
      this.$refs.RightDialogRoles.openDialog("edit", id);
    },
    // 标签页切换
    async handleClick() {},
  },
};
</script>
<style scoped lang="scss">
// ::v-deep .el-table--enable-row-transition {
//   height: calc(100vh - 280px) !important;
// }
</style>
