<template>
    <!--根据角色菜单查询用户-->
    <div class="rolesManage-main roles-manage">
        <div class="rolesManage-mainLeft">
            <el-tabs v-model="activeName">
                <el-tab-pane label="菜单树" name="menu">
                        <div style="width: 100%;padding: 0px 20px 0 20px;position: relative;height: calc(100% - 70px);">
                        <el-input placeholder="输入关键字进行过滤"
                                class="filterTree"
                                v-model="filterMenu">
                        </el-input>
                        <div class="treeArea">
                            <el-tree ref="menuTree"
                                :data="menuTree.tree"
                                :props="menuTree.defaultProps"
                                highlight-current
                                node-key="id"
                                :default-expanded-keys="rolesTree.expandedKeys"
                                @node-click="nodeClickMenu"
                                :expand-on-click-node="true"
                                :filter-node-method="filterMenuTree">
                            </el-tree>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="角色树" name="roles">
                    <div style="width: 100%;padding: 0px 20px 0 20px;position: relative;height: calc(100% - 70px);">
                        <el-input placeholder="输入关键字进行过滤"
                                class="filterTree"
                                v-model="filterText">
                        </el-input>
                        <div class="treeArea">
                            <el-tree ref="rolesTree"
                                    :data="rolesTree.tree"
                                    :props="rolesTree.defaultProps"
                                    highlight-current
                                    node-key="id"
                                    :default-expanded-keys="rolesTree.expandedKeys"
                                    @node-click="nodeClick"
                                    :expand-on-click-node="true"
                                    :filter-node-method="filterOrgTree">
                            </el-tree>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="rolesManage-mainRight">
            <div class="public-function-div">用户列表</div>
            <div style="margin:20px">
                <el-table ref="userTable"
                        v-loading="userTable.loading"
                        @filter-change="filterChange"
                        border
                        :height="treeHeight"
                        highlight-current-row
                        :data="userTable.list">
                <el-table-column :show-overflow-tooltip="true"
                                prop="userCode"
                                label="账户"
                                :filter-method="filterColumn"
                                min-width="150"></el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                                prop="userName"
                                label="用户姓名"
                                :filter-method="filterColumn"
                                min-width="150"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import store from '@/store/index.js';
import { checkCharLength } from '@/utils/validator.js';
import { objAssign } from '@/utils/util.js';
export default {
    name: 'roleUser',
    data () {
    return {
      store,
      activeName: 'menu',
      treeHeight: 600,
      //  角色
      rolesTree: {
        tree: [],
        item: {},
        //  默认配置数据对应项
        defaultProps: {
          children: 'children',
          label: 'roleName'
        },
        //  默认展开的ID数组
        expandedKeys: []
      },
      //  菜单树
      menuTree: {
        tree: [],
        items: [],
        item: [],
        //  默认配置数据对应项
        defaultProps: {
          children: 'children',
          label: 'menuLabel'
        },
        //  默认展开的ID数组
        expandedKeys: [],
        //  角色菜单关联表数据
        authList: []
      },
      dialogRoles: {
        //  保存中
        loading: false,
        operate: 'add',
        show: false,
        title: '添加',
        //  编辑时选中
        item: {},
        form: {
          id: '',
          roleCode: '',
          roleName: '',
          pId: '',
          rank: '1',
          roleType: '',
          remark: ''
        },
        ruleValidate: {
          roleCode: [
            { required: true, message: '角色编码不能为空', trigger: 'change' },
            { validator: checkCharLength, max: 64, trigger: 'change' }
          ],
          roleName: [
            { required: true, message: '角色名称不能为空', trigger: 'change' },
            { validator: checkCharLength, max: 32, trigger: 'change' }
          ]
        }
      },
      //  数据权限列表
      table: {
        height: 600,
        loading: false,
        list: [],
        //  选中项
        items: [],
        item: {},
        //  角色与数据权限关联数据
        authList: []
      },
      //  机构树
      orgTree: {
        tree: [],
        items: [],
        item: {},
        //  默认配置数据对应项
        defaultProps: {
          children: 'children',
          label: 'orgName'
        },
        //  默认展开的ID数组
        expandedKeys: []
      },
      // 用户列表
      userTable: {
        height: 600,
        loading: false,
        list: [],
        listBack: [],
        //  选中项
        items: [],
        item: {},
        tableParams: JSON.parse(JSON.stringify(store.state.tableParams))
      },
      tableParams: JSON.parse(JSON.stringify(store.state.tableParams)),
      filterText: '',
      filterMenu: ''
    }
  },
  watch: {
    filterText (val) {
        this.$refs.rolesTree.filter(val);
    },
    filterMenu (val) {
        this.$refs.menuTree.filter(val);
    }
  },
  mounted () {
    this.initData();
    this.$nextTick(() => {
      //  设置树区域高度
      this.treeHeight = this.getRoleHeight(this.$refs['rolesTree'].$el) - 120;
    });
  },
  methods: {
    //  计算树区域高度
    getRoleHeight (dom) {
      return window.innerHeight - dom.offsetTop;
    },
    //  init
    initData () {
      //  取角色数据
      this.getRoles();
      //  取菜单数据
      this.getMenu();
      // 取用户列表
      this.getUser(this.userTable.tableParams.form);
    },
    //  角色树点击
    nodeClick (item) {
      let that = this;
        that.axios.get('/pass/v1/sysuserroles/' + item.id).then((res) => {
            that.userTable.list = res.data.list;
            for (let i = 0; i < that.userTable.listBack.length; i++) {
                for (let j = 0; j < that.userTable.list.length; j++) {
                    if (that.userTable.listBack[i].userCode === that.userTable.list[j].userCode) {
                        that.userTable.list[j].userName = that.userTable.listBack[i].userName
                    }
                }
            }
        }).catch(() => {
            that.$message.error('请求失败')
        })
    },
    nodeClickMenu (item) {
        let that = this;
        that.axios.get('/pass/v1/sysuserroles/selectByMenuId/' + item.id).then((res) => {
            that.userTable.list = res.data;
            for (let i = 0; i < that.userTable.listBack.length; i++) {
                for (let j = 0; j < that.userTable.list.length; j++) {
                    if (that.userTable.listBack[i].userCode === that.userTable.list[j].userCode) {
                        that.userTable.list[j].userName = that.userTable.listBack[i].userName
                    }
                }
            }
        }).catch(() => {
            that.$message.error('请求失败')
        })
    },
    //  保存配置
    rolesMenuDataSave () {
      //
      if (Object.keys(this.rolesTree.item).length < 1) {
        this.$message.error('请选择角色');
        return false;
      }
      //  取菜单选中项
      let menuIdArr = this.$refs['menuTree'].getHalfCheckedKeys().concat(this.$refs['menuTree'].getCheckedKeys());
      //  取数据权限选中项
      let tempArr = this.table.items;
      let dataArr = [];
      for (let item of tempArr) {
        dataArr.push(item.id);
      }
      //  分配菜单
      this.setSysauthorizes(menuIdArr, '1');
      //  分配数据权限
      this.setSysauthorizes(dataArr, '2');
    },
    //  取角色树
    getRoles () {
      //
      this.store.dispatch('system/rolesManage/list').then(res => {
        if (res.code === '0') {
          this.rolesTree.tree = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 获取菜单树
    getMenu () {
      //  查询列表
      this.store.dispatch('system/functionMain/menuTree').then(res => {
        if (res.code === '0') {
          this.menuTree.tree = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 获取用户列表
    getUser (form) {
      let _this = this;
      form.pageSize = '1000000';
      this.store.dispatch('system/usersManage/list', form).then(res => {
        if (res.code === '0') {
          this.userTable.list = res.data.list;
          this.userTable.listBack = res.data.list;
          this.userTable.tableParams.form.pageNum = res.data.pageNum;
          this.userTable.tableParams.form.pageSize = res.data.pageSize;
          this.userTable.tableParams.page.total = res.data.total;
          // 设置过滤数据 setFilterDatas(列数组对象, 数据, 需要过滤的字段, 列名转义对象)
          _this.setFilterDatas(_this.$refs.userTable.columns, _this.userTable.list, ['userCode', 'userName']);
        } else {
          this.$message.error(res.message);
          this.userTable.tableParams.form.pageNum = 1;
          this.userTable.tableParams.page.total = 0;
        }
      });
    },
    // 树形控件过滤数据
    filterOrgTree (value, data) {
      if (!value) return true;
      return data.roleName.indexOf(value) !== -1;
    },
    filterMenuTree (value, data) {
      if (!value) return true;
      return data.menuLabel.indexOf(value) !== -1;
    },
    // 表格过滤
    filterChange (filters) {
      var _this = this;
      _this.setFilterDatas(_this.$refs.userTable.columns, _this.$refs.userTable.tableData, ['userCode', 'userName']);
    }
  }
}

</script>
<style lang="less">
.roles-manage {
  height: 100%;
  .treeArea {
      height: calc(100% - 40px);
      overflow: auto;
  }
  .right-tabs {
    .el-tabs__item {
      height: 42px;
      line-height: 42px;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: rgb(213, 213, 213);
    }
    .el-tabs__active-bar {
      height: 1px;
    }
    .el-tabs__nav {
      margin-left: 20px;
    }
  }
  //
  .roles-tree-header {
    height: 42px;
  }
  //  保存
  .rolesManage-mainRight {
    position: relative;
    height: inherit;
    .save {
      position: absolute;
      right: 20px;
      top: 5px;
      z-index: 100;
    }
  }
}
.rolesManage-footer {
  background: #f5f5f5;
  margin: -12px -17px -11px -17px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
}

.rolesManage-invite-agree {
  border: none;
  background: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.rolesManage-create-header {
  background-color: #f5f5f5;
  margin: -15px -15px 0 -15px;
}

.rolesManage-create-header-title {
  color: #666;
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.rolesManage-mainLeft {
  width: 40%;
  border-right: 1px solid #e0e0e0;
  float: left;
  overflow-x: hidden;
  height: inherit;
}

.rolesManage-mainRight {
  width: 60%;
  float: left;
}

.mainRigh-function {
  padding: 13px 0 15px 20px;
  text-align: left;
  border-bottom: 1px solid #d5d5d5;
  position: relative;
}

.rolesManage-searchContent {
  text-align: left;
  position: relative;
  float: left;
  width: 50%;
  margin-left: 20px;
  margin-top: 5px;
  margin-bottom: 9px;
}
.filterTree {
    padding: 10px 0;
}
.el-tabs__item {
    font-size: 16px;
    height: 42px;
    line-height: 42px;
}
.el-tabs__nav-wrap::after {
    height: 1px;
    background-color: rgb(213, 213, 213);
}
.el-tabs__active-bar {
    height: 1px;
}
.el-tabs__nav {
    margin-left: 20px;
}
.el-tabs__header {
    margin-bottom: 0;
}
.public-function-div {
    font-size: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #d5d5d5;
}
</style>
