<template>
  <el-dialog
    class="select-user-dialog"
    :visible.sync="modalIsShow"
    title="选择角色"
    top="10px"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <el-row type="flex" :gutter="10">
      <el-col :span="12">
        <div class="user-part-title">角色</div>
        <div class="user-search">
          <el-input
            v-model="filterLabel"
            placeholder="请输入角色名称"
            clearable
            size="mini"
            prefix-icon="el-icon-search"
            @input="labelChange"
          ></el-input>
        </div>
        <div class="user-tree">
          <el-tree
            ref="RoleTree"
            :data="roleTree"
            show-checkbox
            check-on-click-node
            node-key="id"
            :default-checked-keys="selectedRoleIds"
            :props="defaultProps"
            @check="roleChange"
          >
          </el-tree>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="user-part-title">已选范围</div>
        <div class="user-list">
          <div v-for="role in selectedRoles" :key="role.id" class="user-item">
            <p class="user-cont">
              <span>{{ role.name }}</span
              ><span>{{ role.phoneNumber }}</span>
            </p>
            <el-button
              class="user-delete"
              type="text"
              icon="el-icon-remove"
              @click="toDeleteRole(role)"
            ></el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <div slot="footer">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { userRoleListPage } from "../api";

export default {
  name: "select-role-dialog",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      modalIsShow: false,
      filterLabel: "",
      roles: [],
      roleTree: [],
      selectedRoles: [],
      selectedRoleIds: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  mounted() {
    this.getRoles();
  },
  methods: {
    async getRoles() {
      const data = await userRoleListPage();
      this.roles = data || [];
      this.roles = this.roles.filter(item => item.type !== "ADMIN");

      this.labelChange();
    },
    labelChange() {
      const escapeRegexpString = (value = "") =>
        String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
      const reg = new RegExp(escapeRegexpString(this.filterLabel), "i");

      this.roleTree = this.roles.filter(item => reg.test(item.name));
    },
    visibleChange() {
      this.filterLabel = "";
      this.labelChange();
      this.selectedRoles = this.data;
      this.selectedRoleIds = this.data.map(item => item.id);
      this.$refs.RoleTree.setCheckedKeys(this.selectedRoleIds);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    roleChange(data) {
      if (!this.multiple) {
        this.$refs.RoleTree.setCheckedKeys([data.id]);
      }
      this.selectedRoles = this.$refs.RoleTree.getCheckedNodes(true);
      this.selectedRoleIds = this.selectedRoles.map(item => item.id);
    },
    toDeleteRole(role) {
      const pos = this.selectedRoles.findIndex(item => item.id === role.id);
      this.selectedRoles.splice(pos, 1);
      this.selectedRoleIds = this.selectedRoles.map(item => item.id);
      this.$refs.RoleTree.setCheckedKeys(this.selectedRoleIds);
    },
    submit() {
      if (!this.selectedRoles.length) {
        this.$message.error("请选择角色");
        return;
      }

      this.$emit("modified", this.selectedRoles);
      this.cancel();
    }
  }
};
</script>
