<template>
  <div class="role-details inside-base" >
    <div class="inside-base-main clearfix">
      <!-- 中间内容 -->
      <div class="inside-base-cont">
        <div class="role-cont clearfix">
          <div>
            <el-checkbox
              class="check-page-all"
              v-model="checkPageAll"
              @change="checkPageAllEv($event)"
            ></el-checkbox>
            <!--  -->
            <el-table
              ref="table"
              :data="menuTree"
              style="width: 100%; margin-bottom: 20px"
              :header-cell-style="{ background: '#f5f5f5' }"
              row-key="id"
              :expand-row-keys="['3', '4']"
              border
              :indent="10"
              :cell-class-name="goodsInfo"
              :row-class-name="warning"
              :select-on-indeterminate="true"
              :tree-props="{
                children: 'childList',
                hasChildren: 'hasChildren',
              }"
            >
              <el-table-column type="selection" width="55">
                <template slot-scope="scope">
                  <!-- 一二级事件 -->
                  <el-checkbox
                    v-model="scope.row.pageCheck"
                    @change="pageCheckEv(scope)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="page" label="菜单名称" width="130">
              </el-table-column>
              <el-table-column label="">
                <template slot-scope="scope">
                  <el-checkbox
                    label="查询"
                    v-model="scope.row.fnCheck.query"
                    @change="fnCheckEv(scope, 'query')"
                    v-if="scope.row.fnList.includes('查询')"
                  ></el-checkbox>

                  <el-checkbox
                    label="新增"
                    v-model="scope.row.fnCheck.add"
                    @change="fnCheckEv(scope, 'add')"
                    v-if="scope.row.fnList.includes('新增')"
                  ></el-checkbox>
                  <el-checkbox
                    label="修改"
                    v-model="scope.row.fnCheck.edit"
                    @change="fnCheckEv(scope, 'edit')"
                    v-if="scope.row.fnList.includes('修改')"
                  ></el-checkbox>

                  <el-checkbox
                    label="删除"
                    v-model="scope.row.fnCheck.remove"
                    @change="fnCheckEv(scope, 'remove')"
                    v-if="scope.row.fnList.includes('删除')"
                  ></el-checkbox>

                  <el-checkbox
                    label="导出"
                    v-model="scope.row.fnCheck.export"
                    @change="fnCheckEv(scope, 'export')"
                    v-if="scope.row.fnList.includes('导出')"
                  ></el-checkbox>

                  <el-checkbox
                    label="安防管理视图"
                    v-model="scope.row.fnCheck.viewport"
                    @change="fnCheckEv(scope, 'viewport')"
                    v-if="scope.row.fnList.includes('安防管理视图')"
                  ></el-checkbox>

                  <el-checkbox
                    label="实时告警"
                    v-model="scope.row.fnCheck.alarm"
                    @change="fnCheckEv(scope, 'alarm')"
                    v-if="scope.row.fnList.includes('实时告警')"
                  ></el-checkbox>

                  <el-checkbox
                    label="任务管理"
                    v-model="scope.row.fnCheck.task"
                    @change="fnCheckEv(scope, 'task')"
                    v-if="scope.row.fnList.includes('任务管理')"
                  ></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
            <!--  -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { roleMenuTree, treeselect } from '@/api/system/auth-manage'
export default {
  name: "RoleDetails",
  data() {
    return {
      msg: "",
      checkPageAll: false,
      isExpansion:true,


      menuTree:[]
    };
  },
  created(){
    // this.getMenuTree()
  },
  methods: {

    goodsInfo(row) {
      if (row.columnIndex == 2) {
        return "goodsInfo"; //给第2个td里面添加goodsInfo的类名
      }

      if (row.row.fnList.length == 0) {
        return "warning";
      }
    },

    warning(row) {
      if (row.row.fnList.length == 0) {
        return "warning";
      }
    },
    //获取菜单结构树
    getMenuTree(roleId,role_key){
        let data = []
        let idSelect = []
        let arr = []
        if(roleId){
          roleMenuTree(roleId).then(Response =>{
            if(Response.status == "SUCCESS"){
              data = Response.data.menus
              idSelect = Response.data.checkedKeys
              for(let i = 0; i<data.length; i++){
                arr[i] = {}
                arr[i].id = data[i].menuId
                arr[i].orderNum = data[i].orderNum
                arr[i].page = data[i].menuName
                arr[i].pageCheck = false
                if(data[i].children){
                  arr[i].childList = []
                  arr[i].fnList = []
                  for(let a = 0; a<data[i].children.length; a++){
                    arr[i].childList[a] = {}
                    arr[i].childList[a].id = data[i].children[a].menuId
                    arr[i].childList[a].orderNum = data[i].children[a].orderNum
                    arr[i].childList[a].page = data[i].children[a].menuName
                    arr[i].childList[a].pageCheck = false
                    if(data[i].children[a].children){
                      arr[i].childList[a].fnList = []
                      arr[i].childList[a].fnCheck = {}
                      arr[i].childList[a].idList = []
                      for(let b = 0; b<data[i].children[a].children.length; b++){
                        if((data[i].children[a].children[b].perms).indexOf(":query")>-1){
                          (arr[i].childList[a].fnList).push("查询")
                          setTimeout((arr[i].childList[a].idList).push("query-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.query = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":add")>-1){
                          (arr[i].childList[a].fnList).push("新增")
                          setTimeout((arr[i].childList[a].idList).push("add-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.add = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":edit")>-1){
                          (arr[i].childList[a].fnList).push("修改")
                          setTimeout((arr[i].childList[a].idList).push("edit-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.edit = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":remove")>-1){
                          (arr[i].childList[a].fnList).push("删除")
                          setTimeout((arr[i].childList[a].idList).push("remove-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.remove = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":export")>-1){
                          (arr[i].childList[a].fnList).push("导出")
                          setTimeout((arr[i].childList[a].idList).push("export-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.export = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":resetPwd")>-1){
                          (arr[i].childList[a].fnList).push("重置密码")
                          setTimeout((arr[i].childList[a].idList).push("resetPwd-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.resetPwd = false
                        }else{
                        }
                      }
                    }

                  }
                }
              }
              for(let i= 0; i<idSelect.length; i++){
                for(let a = 0; a<arr.length; a++){
                  if(arr[a].id == idSelect[i]){
                    arr[a].pageCheck = true
                  }
                  if(arr[a].childList){
                    for(let b =0; b<arr[a].childList.length; b++){
                      if(arr[a].childList[b].id == idSelect[i]){
                        arr[a].childList[b].pageCheck = true
                      }
                      if(arr[a].childList[b].idList){
                        for(let c= 0; c<arr[a].childList[b].idList.length; c++){
                          if((arr[a].childList[b].idList[c]).indexOf(idSelect[i])>-1){
                            if((arr[a].childList[b].idList[c]).indexOf('query')>-1){
                              arr[a].childList[b].fnCheck["query"] = true
                            }
                            if((arr[a].childList[b].idList[c]).indexOf('add')>-1){
                              arr[a].childList[b].fnCheck["add"] = true
                            }
                            if((arr[a].childList[b].idList[c]).indexOf('edit')>-1){
                              arr[a].childList[b].fnCheck["edit"] = true
                            }
                            if((arr[a].childList[b].idList[c]).indexOf('remove')>-1){
                              arr[a].childList[b].fnCheck["remove"] = true
                            }
                            if((arr[a].childList[b].idList[c]).indexOf('export')>-1){
                              arr[a].childList[b].fnCheck["export"] = true
                            }
                            if((arr[a].childList[b].idList[c]).indexOf('resetPwd')>-1){
                              arr[a].childList[b].fnCheck["resetPwd"] = true
                            }
                          }
                        }
                      }

                    }
                  }
                }
              }
              this.menuTree = arr
            }
          })
        }else{
          treeselect().then(Response =>{
            if(Response.status == "SUCCESS"){
              data = Response.data
              idSelect = Response.data.checkedKeys
              for(let i = 0; i<data.length; i++){
                arr[i] = {}
                arr[i].id = data[i].menuId
                arr[i].orderNum = data[i].orderNum
                arr[i].page = data[i].menuName
                arr[i].pageCheck = false
                if(data[i].children){
                  arr[i].childList = []
                  arr[i].fnList = []
                  for(let a = 0; a<data[i].children.length; a++){
                    arr[i].childList[a] = {}
                    arr[i].childList[a].id = data[i].children[a].menuId
                    arr[i].childList[a].orderNum = data[i].children[a].orderNum
                    arr[i].childList[a].page = data[i].children[a].menuName
                    arr[i].childList[a].pageCheck = false
                    if(data[i].children[a].children){
                      arr[i].childList[a].fnList = []
                      arr[i].childList[a].fnCheck = {}
                      arr[i].childList[a].idList = []
                      for(let b = 0; b<data[i].children[a].children.length; b++){
                        if((data[i].children[a].children[b].perms).indexOf(":query")>-1){
                          (arr[i].childList[a].fnList).push("查询")
                          setTimeout((arr[i].childList[a].idList).push("query-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.query = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":add")>-1){
                          (arr[i].childList[a].fnList).push("新增")
                          setTimeout((arr[i].childList[a].idList).push("add-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.add = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":edit")>-1){
                          (arr[i].childList[a].fnList).push("修改")
                          setTimeout((arr[i].childList[a].idList).push("edit-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.edit = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":remove")>-1){
                          (arr[i].childList[a].fnList).push("删除")
                          setTimeout((arr[i].childList[a].idList).push("remove-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.remove = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":export")>-1){
                          (arr[i].childList[a].fnList).push("导出")
                          setTimeout((arr[i].childList[a].idList).push("export-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.export = false
                        }else if((data[i].children[a].children[b].perms).indexOf(":resetPwd")>-1){
                          (arr[i].childList[a].fnList).push("重置密码")
                          setTimeout((arr[i].childList[a].idList).push("resetPwd-" + data[i].children[a].children[b].menuId),1)
                          arr[i].childList[a].fnCheck.resetPwd = false
                        }else{
                        }
                      }
                    }

                  }
                }
              }
              this.menuTree = arr
            }
          })
        }




    },


    // 查找父级函数
    getParent(data2, nodeId2) {
      var arrRes = [];
      if (data2.length === 0) {
        if (nodeId2) {
          arrRes.push(data2);
        }
        return arrRes;
      }
      let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i];
          if (node.id === nodeId) {
            arrRes.push(node);
            rev(data2, node.p_id);
            break;
          } else {
            if (node.childList) {
              rev(node.childList, nodeId);
            }
          }
        }
        return arrRes;
      };
      arrRes = rev(data2, nodeId2);
      return arrRes;
    },
    /**
     * 页面选择
     */
    // 总选框事件(全选)
    checkPageAllEv(item) {
      let checkAll = (data, checked) => {
        for (let x of data) {
          x.pageCheck = checked; //一级
          if (x.childList) {
            checkAll(x.childList, checked);
            for(let i =0;i<x.childList.length; i++){
              x.childList[i].fnCheck.query = checked
              x.childList[i].fnCheck.add = checked
              x.childList[i].fnCheck.edit = checked
              x.childList[i].fnCheck.remove = checked
              x.childList[i].fnCheck.export = checked
            }
          }else{
            x.fnCheck.viewport = checked
            x.fnCheck.alarm = checked
            x.fnCheck.task = checked
          }
        }
      };
      if (item === true) {
        checkAll(this.menuTree, true);
      } else {
        checkAll(this.menuTree, false);
      }
    },
    // 遍历json数据
    isCheckAllEv(data) {
      let isCheckAll = true;
      let fn = (data) => {
        for (let x of data) {
          if (x.pageCheck === false) {
            isCheckAll = false;
            return isCheckAll;
          }
          if (x.childList) {
            fn(x.childList);
          }
        }
      };
      fn(data);
      return isCheckAll;
    },
    // 一级二级子选框事件
    pageCheckEv(scope) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList || scope.row.fnCheck) {//一级栏和二级栏关联
        this.handleCheckAll(scope.row, scope.row.pageCheck);
        if(scope.row.fnCheck){
          let num = 0
          let arr = []
          for(let i = 0; i<this.menuTree.length; i++){
            if(this.menuTree[i].childList){
              for(let a = 0;a<this.menuTree[i].childList.length; a++){
                if(this.menuTree[i].childList[a].id == scope.row.id){
                  arr.push(this.menuTree[i].childList)
                  arr.index = i
                  for(let i = 0;i<arr[0].length; i++){
                    if(arr[0][i].pageCheck === true){
                      this.menuTree[arr.index].pageCheck = true
                    }else{
                      num ++
                      if(num == arr[0].length){
                        this.menuTree[arr.index].pageCheck = false
                      }
                    }
                  }
                }
              }
            }
          }
          if(scope.row.fnCheck.hasOwnProperty("task")){//判断综合查询结构
            scope.row.fnCheck.viewport = scope.row.pageCheck
            scope.row.fnCheck.alarm = scope.row.pageCheck
            scope.row.fnCheck.task = scope.row.pageCheck
          }
        }
      }
      // 查找父级选框
      // if()
      // this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
      //   if (!item.childList) {
      //     item.pageCheck = scope.row.pageCheck;
      //   } else {
      //     var num = 0;
      //     item.childList.forEach((item, i) => {
      //       if (item.pageCheck === true) {
      //         num += 1;
      //       }
      //     });
      //     if (num === item.childList.length) {
      //       item.pageCheck = true;
      //     } else {
      //       item.pageCheck = false;
      //     }
      //   }
      // });

      // 是否所有子项都已经勾选
      if (this.isCheckAllEv(this.menuTree) === true) {
        this.checkPageAll = true;
      } else {
        this.checkPageAll = false;
      }
    },
    handleCheckAll(row, checked) {
      row.pageCheck = checked;
      if (row.childList) {//一级事件流程
        let that = this;
        row.childList.forEach((element, i) => {
          that.handleCheckAll(row.childList[i], checked);
        });
        if(row.childList[0].fnCheck){
          for(let i = 0; i<row.childList.length; i++){
            row.childList[i].fnCheck.query = checked
            row.childList[i].fnCheck.add = checked
            row.childList[i].fnCheck.edit = checked
            row.childList[i].fnCheck.remove = checked
            row.childList[i].fnCheck.export = checked
          }
        }
      }
      if (row.fnCheck) {//二级事件流程
        if(row.fnCheck.hasOwnProperty("add")){
          row.fnCheck.query = checked
          row.fnCheck.add = checked
          row.fnCheck.edit = checked
          row.fnCheck.remove = checked
          row.fnCheck.export = checked
        }else{
          row.fnCheck.viewport = checked
          row.fnCheck.viewport = checked
          row.fnCheck.viewport = checked
        }
      }
    },
    //遍历菜单id 提交父级
    roleMenuId(){
      let arr = []
      let data = this.menuTree
      for(let i = 0; i<data.length; i++){
        if(data[i].pageCheck === true){
          arr.push(data[i].id)
          if(data[i].childList){
            for(let a = 0; a<data[i].childList.length; a++){
              if(data[i].childList[a].pageCheck === true){
                arr.push(data[i].childList[a].id)
              }
              if(data[i].childList[a].fnCheck){
                if(data[i].childList[a].fnCheck.query === true){
                  for(let b = 0; b<data[i].childList[a].idList.length; b++){
                    if((data[i].childList[a].idList[b]).indexOf('query')>-1){
                      arr.push(Number((data[i].childList[a].idList[b]).split("-")[1]))
                    }
                  }
                }
                if(data[i].childList[a].fnCheck.add === true){
                  for(let b = 0; b<data[i].childList[a].idList.length; b++){
                    if((data[i].childList[a].idList[b]).indexOf('add')>-1){
                      arr.push(Number((data[i].childList[a].idList[b]).split("-")[1]))
                    }
                  }
                }
                if(data[i].childList[a].fnCheck.edit === true){
                  for(let b = 0; b<data[i].childList[a].idList.length; b++){
                    if((data[i].childList[a].idList[b]).indexOf('edit')>-1){
                      arr.push(Number((data[i].childList[a].idList[b]).split("-")[1]))
                    }
                  }
                }
                if(data[i].childList[a].fnCheck.remove === true){
                  for(let b = 0; b<data[i].childList[a].idList.length; b++){
                    if((data[i].childList[a].idList[b]).indexOf('del')>-1){
                      arr.push(Number((data[i].childList[a].idList[b]).split("-")[1]))
                    }
                  }
                }
                if(data[i].childList[a].fnCheck.export === true){
                  for(let b = 0; b<data[i].childList[a].idList.length; b++){
                    if((data[i].childList[a].idList[b]).indexOf('export')>-1){
                      arr.push(Number((data[i].childList[a].idList[b]).split("-")[1]))
                    }
                  }
                }
              }
            }
          }

        }else{
        }
      }
      return arr
    },
    /**
     * 功能选择
     */
    // 子选框事件
    fnCheckEv(scope, type) {
      let row = scope.row.fnCheck
      let arr = []
      let num = ''
      if(scope.row.fnCheck.hasOwnProperty("add")){
        if(row.add === false &&
          row.remove === false &&
          row.edit === false &&
          row.query === false &&
          row.export === false ){
          for(let i = 0; i<this.menuTree.length; i++){//控制上级隐藏
            if(this.menuTree[i].childList){
              for(let a = 0;a<this.menuTree[i].childList.length; a++){
                if(this.menuTree[i].childList[a].id == scope.row.id){
                  this.menuTree[i].childList[a].pageCheck = false
                  arr.push(this.menuTree[i].childList)
                  arr.index = i
                  for(let i = 0;i<arr[0].length; i++){
                    if(arr[0][i].pageCheck === true){
                      this.menuTree[arr.index].pageCheck = true
                    }else{
                      num ++
                      if(num == arr[0].length){
                        this.menuTree[arr.index].pageCheck = false
                      }
                    }
                  }
                }
              }
            }
          }
        }else{
          for(let i = 0; i<this.menuTree.length; i++){//控制上级显示
            if(this.menuTree[i].childList){
              for(let a = 0;a<this.menuTree[i].childList.length; a++){
                if(this.menuTree[i].childList[a].id == scope.row.id){
                  if(row.add === true || row.remove === true || row.edit === true || row.query === true || row.export === true ){
                    this.menuTree[i].childList[a].pageCheck = true
                  }
                  arr.push(this.menuTree[i].childList)
                  arr.index = i
                  for(let i = 0;i<arr[0].length; i++){
                    if(arr[0][i].pageCheck === true){
                      this.menuTree[arr.index].pageCheck = true
                    }else{
                      num ++
                      if(num == arr[0].length){
                        this.menuTree[arr.index].pageCheck = false
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }else{
        if(row.viewport === false && row.alarm === false && row.task === false){
          scope.row.pageCheck = false
        }else{
          scope.row.pageCheck = true
        }
      }

      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleFnAll(scope.row, scope.row.fnCheck[type], type);

      }
    },
    handleFnAll(row, fnCheck, type) {
      row.fnCheck[type] = fnCheck;
      if (row.childList) {
        let that = this;
        row.childList.forEach((element, i) => {
          that.handleFnAll(row.childList[i], fnCheck, type);
        });
      }
    },


    /**
     * 权限选择
     */
    // 权限：全部、自己
    // 子选框事件
    dataCheckEv(scope, type) {
      let temp = scope.row.dataCheck[type];
      for (let x in scope.row.dataCheck) {
        scope.row.dataCheck[x] = false;
      }
      scope.row.dataCheck[type] = temp;
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleDataAll(scope.row, scope.row.dataCheck[type], type);
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        for (let x in item.dataCheck) {
          item.dataCheck[x] = false;
        }
        if (!item.childList) {
          item.dataCheck[type] = temp;
        } else {
          var num = 0;
          item.childList.forEach((item, i) => {
            if (item.dataCheck[type] === true) {
              num += 1;
            }
          });
          if (num === item.childList.length) {
            item.dataCheck[type] = true;
          } else {
            item.dataCheck[type] = false;
          }
        }
      });
    },
    handleDataAll(row, dataCheck, type) {
      for (let x in row.dataCheck) {
        row.dataCheck[x] = false;
      }
      row.dataCheck[type] = dataCheck;
      if (row.childList) {
        let that = this;
        row.childList.forEach((element, i) => {
          that.handleDataAll(row.childList[i], dataCheck, type);
        });
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.inside-base {
  position: relative;
}

// .inside-base-main {
//   width: 100%;
//   background: #ffffff;
//   box-shadow: 0px 0px 10px 0px rgba(231,232,238,1);
//   border-radius: 4px;
//   margin-bottom: 30px;
// }

// 中间内容
// .inside-base-cont {
//   margin: 0 20px;
// }

.role-cont {
  position: relative;
  font-size: 16px;
  color: #333333;
  line-height: 40px;
  > span {
    width: 90px;
    height: 40px;
    text-align: right;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  > div {
    position: relative;
    width: 100%;
    float: left;
    margin-bottom: 20px;
    >>> .el-input__inner {
      width: 320px;
    }
  }
}
.check-page-all {
  position: absolute;
  top: 3px;
  left: 21px;
  z-index: 99;
}

/* element-ui css */
.inside-base {
  >>> .el-input__inner {
    font-size: 16px;
    color: #333333;
  }
}

.warning td {
  background: #f5f5f5;
}

.goodsInfo .cell {
  text-align: left;
  padding: 0 10px 0 10px;
}

.table-item td {
  line-height: 30px;
  height: 30px;
}
</style>

