<template>
  <el-dialog
    :close-on-click-modal="false"
    top="0"
    @click="close()"
    class="roleconfiguration"
    custom-class="dialogBox editDialogBox mainCenter"
    :visible.sync="visible"
    width="85%">
    <div slot="title" class="dialog_title" ref="dialogTitle">
      {{ title || "标题" }}
    </div>
    <div class="editDialogBox-box">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="人员配置" name="first"></el-tab-pane>
        <el-tab-pane label="菜单配置" name="second"></el-tab-pane>
      </el-tabs>
      <lb-table
        v-if="activeName == 'first'"
        ref="multipleTable"
        :pagination="false"
        :column="usertableData.column"
        :data="lastuserList"
        @selection-change="handleSelectionChange"
        @row-click="handleClickTableRow">
        >
      </lb-table>
      <lb-table
        :key="menukey"
        v-if="activeName == 'second'"
        :pagination="false"
        :column="menutableData.column"
        :data="lastMenuList"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      </lb-table>
    </div>
    <template slot="footer">
      <btn nativeType="cx" type="primary" @click="handleSaveMember()">保存</btn>
      <btn nativeType="cz" @click="close()">取消</btn>
    </template>
  </el-dialog>
</template>

<script>
  import { api } from "@/api/manageApi";
  import { getRoleAuthorityList, roleAuthority } from "@/api/authorityManage";
  import { updateUser } from "@/api/personnelManage";
  export default {
    name: "",
    data () {
      return {
        title: "人员配置",
        visible: false,
        menutableData: {
          column: [
            {
              prop: "name",
              width: 830,
              label: "菜单名称",
            }
          ].concat([
            {
              label: "权限",
              render: (h, scope) => {
                return (
                  <div>
                    <el-checkbox v-model={scope.row.checkArr[0].value}
                      disabled={scope.row.checkArr[0].disabled}
                      label={scope.row.checkArr[0].name} onChange={(checked) => {
                        this.changeCheck(checked, scope.row.checkArr[0].id, scope);
                      }} />
                    <el-checkbox v-model={scope.row.checkArr[1].value}
                      disabled={scope.row.checkArr[0].disabled}
                      label={scope.row.checkArr[1].name}
                      onChange={(checked) => {
                        this.changeCheck(checked, scope.row.checkArr[1].id, scope);
                      }} />
                  </div>
                );
              },
            },
          ]),
        },
        usertableData: {
          column: [
            {
              type: "selection",
              width: 330,
            },
            {
              prop: "name",
              width: 330,
              label: "姓名",
            },
            {
              prop: "loginName",
              label: "用户名",
            },
          ],
        },
        // 角色id
        roleId: "",
        menuList: [], // 菜单列表
        menukey: 0,
        activeName: "first",
        lastuserList: [], // 人员表格数据
        lastMenuList: [], // 重构完成的菜单表格数据
        usermultipleSelection: [],
        // 选中菜单列表
        checkArr: [], // 重构操作符列表
        authorityList: [], // 授权回显数组
        checklistbor: [],
        // 授权对象数据
        menuprams: {},
        //  系统code
        selectedSubsystemCode: ""
      };
    },
    computed: {},

    created () {
    },
    mounted () {
    },
    methods: {

      // 人员配置点击行勾选数据
      handleClickTableRow (row, event) {
        this.checkNum = 0;
        this.isCheck = false;
        if (event.label == "操作") {
          return;
        } else {
          if (row.status == "0") {
            return;
          } else {
            if (this.usermultipleSelection.length > 0) {
              if (
                JSON.stringify(this.usermultipleSelection).indexOf(
                  JSON.stringify(row)
                ) == -1
              ) {
                this.usermultipleSelection.push(row);
                this.$refs.multipleTable.toggleRowSelection(row, true);
              } else {
                this.usermultipleSelection.map((item, index) => {
                  if (item.id == row.id) {
                    this.usermultipleSelection.splice(index, 1);
                    this.$refs.multipleTable.toggleRowSelection(row, false);
                  }
                });
              }
            } else {
              this.usermultipleSelection.push(row);
              this.$refs.multipleTable.toggleRowSelection(row, true);
            }
          }
        }
        if (this.usermultipleSelection.length > 0) {
          this.checkNum = this.usermultipleSelection.length;
          this.isCheck = true;
        } else {
          this.isCheck = false;
        }
      },
      // 获取授权主体的菜单权限
      // getMenuAuthorityList
      menulist (operationList, id, Code, menutablelistData, operationCodes) {
        this.selectedSubsystemCode = Code
        this.menuList = menutablelistData;
        getRoleAuthorityList(
          id,
          operationList.toString(),
          Code + '_MENU'
        ).then(res => {
          if (res.status === 1) {
            this.authorityList = res.content
            this.getRecursionTreeData(this.menuList, this.authorityList, operationCodes)
            this.getAuthorizedInfo()
            // this.setCheckAllArr()
            // this.getAuthorizedInfo()
          } else {
            this.$message.error({ message: res.message, showClose: true })
          }
        })


      },
      /**
     * 递归渲染列表数据
     * list:原始数组
     * authorityList:已授权数组
     */
      getRecursionTreeData (list, authorityList, operationCodes) {
        ++this.menukey
        this.checkArr = []
        for (const k in operationCodes) {
          const obj = {}
          obj.name = operationCodes[k]
          obj.id = k
          obj.value = false
          obj.disabled = false
          // obj.isAll = false;
          this.checkArr.push(obj)
        }
        for (const [index, item] of Object.entries(list)) {
          this.setAuthorizedConditions(
            authorityList,
            this.$deepCopy(this.checkArr),
            item
          )
          if (
            item.children &&
            item.children !== null &&
            item.children.length !== 0
          ) {
            item.children.forEach((child, j) => {
              this.setAuthorizedConditions(
                authorityList,
                this.$deepCopy(this.checkArr),
                child
              )
            })
            this.getRecursionTreeData(item.children, authorityList, operationCodes)
          }
        }
        this.lastMenuList = list
        // this.setCheckAllArr(list)
      },
      // 授权条件
      setAuthorizedConditions (authorityList, checkArr, item) {
        if (this.roleId === '') {
          checkArr.forEach(ele => {
            ele.disabled = true
            ele.value = false
          })
        } else {
          if (authorityList.length !== 0) {
            if (authorityList[0].superPermission === true) {
              checkArr.forEach(ele => {
                ele.value = true
                ele.disabled = true
              })
            } else {
              const repeatArr = authorityList.filter(authorityItem => {
                return authorityItem.resourceUri === item.id
              })
              repeatArr.forEach(element => {
                checkArr.forEach(ele => {
                  if (element.operationCode === ele.id) {
                    ele.value = true
                    if (this.roleId !== element.subjectId) {
                      ele.disabled = true
                    }
                  }
                })
              })
            }
          }
        }
        this.$set(item, 'checkArr', this.$deepCopy(checkArr))
      },
      // 获取拼接授权信息
      getAuthorizedInfo () {
        const lastArr = []
        const authorizedList = []
        const wholeArr = this.$deepCopy(this.lastMenuList)
        const arr = this.$treeConvertToArr(wholeArr)
        arr.forEach(ele => {
          ele.checkArr.forEach(val => {
            if (val.value === true && val.disabled === false) {
              const obj = {
                operationCode: val.id,
                name: ele.name,
                id: ele.id
              }
              lastArr.push(obj)
            }
          })
        })
        lastArr.forEach(element => {
          authorizedList.push({
            operationCode: element.operationCode, // 标识符
            productCode: this.selectedSubsystemCode, // 子系统code
            resourceCategoryCode: this.selectedSubsystemCode + '_MENU', // 资源类别code默认为MENU
            resourceName: element.name,
            resourceUri: element.id, // 授权菜单id
            subjectId: this.roleId, // 授权对象id
            subjectType: 'ROLE' // 授权对象类别
          })
        })
        this.menuprams = {
          subjectId: this.roleId,
          authorizedList: authorizedList
        }
      },
      // 获取人员列表做筛选
      personlist (a, rid) {
        this.roleId = rid;
        this.visible = true;
        this.lastuserList = a;
        this.lastuserList.forEach((item, index) => {
          if (item.selectStatus === 0) {
            this.$nextTick(async () => {
              await this.$refs.multipleTable
              if (this.$refs.multipleTable) {
                this.$refs.multipleTable.toggleRowSelection(
                  this.lastuserList[index],
                  true
                );
              }

            });
          }
        });
      },
      // 关闭事件
      close () {
        this.visible = false;
      },
      // 保存事件
      handleSaveMember () {
        // 人员授权
        const idList = this.usermultipleSelection.map((item) => {
          return item.id;
        })
        updateUser(this.roleId, idList).then((res) => {
          if (res.status === 1) {
            this.$message.success({ message: "保存成功", showClose: true });
            this.visible = false;
          } else this.$message.error({ message: res.message, showClose: true });
        });
        // 菜单授权
        roleAuthority(
          this.menuprams.subjectId,
          this.menuprams.authorizedList
        ).then((res) => {
          if (res.status === 1) {
            this.$message.success({
              message: res.message,
            })
            // this.authorizedContChange()
          } else {
            this.$message.error({ message: res.message, showClose: true })
          }
        })
      },
      // 勾选人员事件
      handleSelectionChange (val) {
        this.lastuserList.forEach((element, index) => {
          delete this.lastuserList[index].selectStatus
        });
        this.usermultipleSelection = val;
        this.lastuserList.forEach((element, index) => {
          this.usermultipleSelection.forEach(element1 => {
            if (element.id == element1.id) {
              this.lastuserList[index].selectStatus = 0
            }
          });
        });
      },
      // 数据筛选
      setarrdata (scope, arr) {

        arr.forEach((item, index, arr) => {
          if (item.id == scope.row.id) {
            this.checklistbor = [...arr]
          } else if (item.id !== scope.row.id && item.children) {
            this.setarrdata(scope, item.children)
          }

        })

      },
      // 勾选菜单事件
      changeCheck (flag, checkId, scope) {
        this.checklistbor = []
        this.setarrdata(scope, this.lastMenuList)
        const parents = this.$findParent(this.lastMenuList, scope.row.parentId)
        const childs = this.$findChildren(this.lastMenuList, scope.row.id)
        this.$setChildArr(
          this.lastMenuList,
          scope.row.id,
          checkId,
          flag,
          this.checklistbor,
          parents,
          childs
        )
        this.getAuthorizedInfo()
      },
      handleClick (tab, event) {
        this.lastuserList.forEach((item, index) => {
          if (item.selectStatus === 0) {
            this.$nextTick(async () => {
              await this.$refs.multipleTable
              if (this.$refs.multipleTable) {
                this.$refs.multipleTable.toggleRowSelection(
                  this.lastuserList[index],
                  true
                );
              }

            });
          }
        });
      }

    },
  };
</script>
<style scoped lang="scss">
  /deep/.dialogBox .el-dialog__header {
    height: 59px !important;
  }
</style>