<!--
 * @Author: Guanghao
 * @Date: 2021-12-31 14:29:34
 * @LastEditors: Guanghao
 * @LastEditTime: 2022-01-05 18:47:10
 * @Description: 后台管理-角色管理页面
-->

<template>
  <div class="role back-column-two">
    <!-- 左侧-角色列表 -->
    <div class="column-left">
      <div class="title back-title">
        {{ $route.meta.title }}
        <el-button
          class="role-new"
          icon="el-icon-circle-plus"
          @click="roleDialogAddVisible = true"
        >
          新建角色
        </el-button>
      </div>

      <el-input
        class="bg-dark"
        v-model="roleInput"
        prefix-icon="el-icon-search"
        placeholder="请输入"
        @change="handleRoleInput"
      />

      <div class="role-list">
        <ul class="list-ul">
          <li
            v-for="role in roleList"
            :key="role.id"
            class="list-li"
            :class="{ selected: role === selectedRole }"
            @click="handleRoleClick(role)"
          >
            <!-- {{ role.name }} -->
            <TreeNodeWith3Dots
              :data="role"
              :btns="['edit', 'delete']"
              @menu-select="handleRoleOperate"
            />
          </li>
        </ul>
      </div>

      <el-dialog
        title="新建角色"
        width="30%"
        :visible.sync="roleDialogAddVisible"
      >
        <RoleAdd
          @on-cancel="roleDialogAddVisible = false"
          @on-submit="handleRoleAddSubmit"
        />
      </el-dialog>

      <el-dialog
        title="编辑角色"
        width="30%"
        :visible.sync="roleDialogEditVisible"
      >
        <RoleUpdate
          :role="selectedRole"
          @on-cancel="roleDialogEditVisible = false"
          @on-submit="handleRoleEditSubmit"
        />
      </el-dialog>
    </div>

    <!-- 右侧-角色内容 -->
    <div class="column-right">
      <el-tabs
        class="back-title-el-tabs"
        value="role-remember"
        @tab-click="handleTabClick"
      >
        <el-tab-pane label="角色成员（2）" name="role-remember">
          <div class="form-box">
            <el-button type="primary" round>关联用户</el-button>
            <el-input
              class="bg-dark"
              v-model="userInput"
              prefix-icon="el-icon-search"
              placeholder="请输入"
              @change="handleUserInput"
            />
          </div>
          <div class="text-box">
            <div>共132个伙伴</div>
            <div>
              <el-dropdown class="sort" @command="ff">
                <span class="el-dropdown-link">
                  {{ sortType }}
                  <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>创建时间正序</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown class="filter">
                <span class="el-dropdown-link">
                  {{ filteType }}
                  <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>角色</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <el-table :data="userList" style="width: 100%">
            <el-table-column
              v-for="title in titleList"
              :key="title.prop"
              :prop="title.prop"
              :label="title.label"
              show-overflow-tooltip
            />
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-tooltip
                  class="item"
                  effect="light"
                  content="编辑"
                  placement="top"
                >
                  <el-button
                    icon="el-icon-edit"
                    type="text"
                    @click="handleEditClick(scope.row)"
                  />
                </el-tooltip>
                <el-divider direction="vertical" />
                <el-tooltip
                  class="item"
                  effect="light"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    icon="el-icon-delete"
                    type="text"
                    @click="handleDeleteClick(scope.row)"
                  />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="角色权限" name="role-auth">
          <ul class="auth-first-ul">
            <li v-for="firstAuth in authList" :key="firstAuth.text">
              <el-checkbox v-model="firstAuth.checked">
                {{ firstAuth.text }}
              </el-checkbox>
              <ul class="auth-second-ul">
                <li
                  v-for="secondAuth in firstAuth.children"
                  :key="secondAuth.text"
                >
                  <el-checkbox v-model="secondAuth.checked">
                    {{ secondAuth.text }}
                  </el-checkbox>
                </li>
              </ul>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Dialog from "../../components/_Common/Dialog.vue";
import RoleAdd from "../../components/Rbac/Role/RoleAdd.vue";
import RoleUpdate from "../../components/Rbac/Role/RoleEdit.vue";
import TreeNodeWith3Dots from "../../components/_Common/Tree/TreeNodeWith3Dots.vue";

import RoleBiz from "../../biz/Rbac/Role.js";
import UserBiz from "../../biz/Rbac/User.js";

import { DIALOG_TYPE } from "../../const.js";

export default {
  name: "Role",

  components: {
    RoleAdd,
    RoleUpdate,
    TreeNodeWith3Dots,
  },

  data() {
    return {
      roleDialogAddVisible: false, // 是否显示角色新建框
      roleDialogEditVisible: false, // 是否显示角色编辑框
      roleAction: DIALOG_TYPE.ADD, // 当前角色框类型（新建或编辑）
      roleInput: "", // 角色搜索内容
      userInput: "", // 用户搜索内容
      roleList: [], // 角色列表
      selectedRole: null, // 当前点击选中角色
      // 角色成员列表标题
      titleList: [
        {
          prop: "name",
          label: "伙伴名称",
        },
        {
          prop: "department",
          label: "部门",
        },
        {
          prop: "role",
          label: "角色",
        },
        {
          prop: "status",
          label: "账号状态",
        },
      ],
      userList: [], // 角色成员列表数据
      //角色权限数据
      authList: [
        {
          text: "全部",
          checked: false,
          children: [],
        },
        {
          text: "产品",
          children: [
            {
              text: "查看",
              checked: true,
            },
            {
              text: "下架产品",
              checked: false,
            },
            {
              text: "编辑产品",
              checked: false,
            },
            {
              text: "分享产品",
              checked: false,
            },
            {
              text: "删除产品",
              checked: false,
            },
            {
              text: "收藏",
              checked: false,
            },
          ],
        },
        {
          text: "行业解决方案",
          children: [
            {
              text: "查看",
              checked: true,
            },
          ],
        },
        {
          text: "个人空间",
          children: [
            {
              text: "开启",
              checked: true,
            },
          ],
        },
        {
          text: "后台管理",
          children: [
            {
              text: "组织架构",
              checked: true,
            },
          ],
        },
      ],
      sortType: "排序", // 当前排序方式
      filteType: "筛选", // 当前筛选方式
    };
  },

  computed: {
    // 当前角色框标题
    roleTitle() {
      switch (this.roleAction) {
        case DIALOG_TYPE.EDIT:
          return "编辑角色";
        case DIALOG_TYPE.ADD:
        default:
          return "新建角色";
      }
    },
  },

  watch: {
    async selectedRole() {
      this.refreshUserList();
    },
  },

  methods: {
    // 切换tab
    handleTabClick(tab, event) {
      console.log(tab, event);
    },

    ff(a, b) {
      console.log(a, b);
    },

    // 监听-角色搜索
    handleRoleInput() {
      console.log("searchRole >>> ");
      this.refreshRoleList();
    },

    // 监听-用户搜索
    handleUserInput() {
      console.log("searchUser");
      this.refreshUserList();
    },

    // 点击-左侧角色
    handleRoleClick(role) {
      this.selectedRole = role;
    },

    // 监听-角色新建成功
    handleRoleAddSubmit(newRole) {
      console.log("newRole >>> ", newRole);
      this.roleDialogAddVisible = false;
    },

    // 监听-角色编辑成功
    handleRoleEditSubmit() {
      this.roleDialogEditVisible = false;
    },

    // 监听-角色操作（编辑、删除）
    handleRoleOperate(index, _, data) {
      switch (index) {
        case "edit":
          this.roleDialogEditVisible = true;
          break;
        case "delete":
          this.$confirm(`确定删除角色 ${data.name} ?`, { title: "确认删除" })
            .then(async () => {
              try {
                const count = await RoleBiz.delById(data.id);
                if (count) {
                  this.$message.success("角色删除成功");
                } else {
                  this.$message.error("角色删除失败");
                }
              } catch ({ message }) {
                this.$message.error(message);
              }
            })
            .catch(() => {});
      }
    },

    // 点击-删除角色用户
    handleDeleteClick(user) {
      this.$confirm(`确定移除用户 ${user.name} ?`, { title: "确认移除" })
        .then(async () => {
          try {
            const count = await UserBiz.delById(user.id);
            if (count) {
              this.$message.success("用户移除成功");
            } else {
              this.$message.error("角色移除失败");
            }
          } catch ({ message }) {
            this.$message.error(message);
          }
        })
        .catch(() => {});
    },

    // 刷新角色列表
    async refreshRoleList() {
      this.roleList = await RoleBiz.findByName(this.roleInput);

      if (this.roleList) {
        this.selectedRole = this.roleList[0];
      }
    },

    // 刷新用户列表
    async refreshUserList() {
      this.userList = await UserBiz.findByName(this.userInput);
    },
  },

  created() {
    this.refreshRoleList();
  },
};
</script>

<style lang="scss" scoped>
@import "~@/scss/Back/element-ui-reset.scss";

.role {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: #{$title-height - 20 + px};
    border-bottom: 2px solid $theme-background-light;

    .role-new {
      padding: 0;
      border: none;
      color: #347eff;

      &:hover {
        background-color: transparent;
      }
    }
  }

  .role-list {
    .list-ul {
      margin-top: 20px;

      .list-li {
        height: 36px;
        padding-left: 20px;
        line-height: 36px;
        cursor: pointer;

        &:hover {
          background-color: rgba(52, 126, 255, 0.1);
          // opacity: 0.1;
          color: #347eff;
        }

        &.selected {
          background-color: rgba(52, 126, 255, 0.1);
          color: #347eff;
        }
      }
    }
  }

  .form-box,
  .text-box {
    display: flex;
    justify-content: space-between;
  }

  .form-box {
    .el-input {
      width: 274px;
    }
  }

  .text-box {
    margin: 20px 0;

    .sort {
      margin-right: 20px;
      cursor: pointer;
    }

    .filter {
      cursor: pointer;
    }
  }

  .auth-first-ul {
    & > li {
      margin-bottom: 30px;

      & > .el-checkbox::v-deep {
        margin-bottom: 10px;
        font-weight: 700;

        .el-checkbox__label {
          font-size: 16px;
        }
      }
    }
  }

  .auth-second-ul {
    display: flex;

    li {
      margin-left: 20px;

      &:first-child {
        margin-left: 0;
      }
    }
  }
}
</style>
