<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="tableData"
              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.check"
                    @change="fnCheckEv(scope, 'check')"
                    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.mod"
                    @change="fnCheckEv(scope, 'mod')"
                    v-if="scope.row.fnList.includes('修改')"
                  ></el-checkbox>

                  <el-checkbox
                    label="删除"
                    v-model="scope.row.fnCheck.del"
                    @change="fnCheckEv(scope, 'del')"
                    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>
export default {
  name: "RoleDetails",
  data() {
    return {
      msg: "",
      checkPageAll: false,
      tableData: [
        {
          id: 1, // id
          page: "系统管理", // 页面分类
          pageCheck: false, // 是否可查看页面
          fnList: [], // 功能权限有哪些
          fnCheck: {
            check: false,
            add: false,
            mod: false,
            del: false,
            export: false,
          },

          childList: [
            {
              p_id: 12,
              id: 8,
              page: "人员管理",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 13,
              id: 9,
              page: "权限管理",
              pageCheck: false,
              fnList: [], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
              childList: [
                {
                  p_id: 2,
                  id: 10,
                  page: "菜单表",
                  pageCheck: false,
                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
                  fnCheck: {
                    add: false,
                    del: false,
                    mod: false,
                    check: false,
                  },
                },
                {
                  p_id: 2,
                  id: 11,
                  page: "角色表",
                  pageCheck: false,
                  fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
                  fnCheck: {
                    add: false,
                    del: false,
                    mod: false,
                    check: false,
                  },
                },
              ],
            },
            {
              p_id: 14,
              id: 30,
              page: "组织机构",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 15,
              id: 33,
              page: "安全机制",
              pageCheck: false,
              fnList: [], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 16,
              id: 93,
              page: "单位信息",
              pageCheck: false,
              fnList: [], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },
        {
          id: 2,
          page: "用户管理",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 2,
              id: 39,
              page: "账号管理",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 32,
              page: "日志管理",
              pageCheck: false,
              fnList: ["查询"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },

        {
          id: 3,
          page: "设备管理",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 2,
              id: 31,
              page: "摄像头",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 22,
              page: "周边防界",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },

        {
          id: 4,
          page: "巡检管理",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 1,
              id: 41,
              page: "巡检点",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 42,
              page: "巡检路线",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 3,
              id: 43,
              page: "电子巡更",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 4,
              id: 44,
              page: "巡检计划",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },

        {
          id: 5,
          page: "告警中心",
          pageCheck: false,
          fnList: [], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false,
          },
          childList: [
            {
              p_id: 1,
              id: 51,
              page: "告警记录",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
            {
              p_id: 2,
              id: 52,
              page: "任务中心",
              pageCheck: false,
              fnList: ["查询", "新增", "修改", "删除", "导出"], // 功能权限有哪些
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false,
              },
            },
          ],
        },
        {
          id: 6,
          page: "综合查询",
          pageCheck: false,
          fnList: ["安防管理视图", "实时告警", "任务管理"], // 功能权限有哪些
          fnCheck: {
            viewport: false,
            alarm: false,
            task: false,
          },
        },
      ],
    };
  },
  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";
      }
    },

    // 查找父级函数
    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);
          }
        }
      };
      if (item === true) {
        checkAll(this.tableData, true);
      } else {
        checkAll(this.tableData, 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);
      console.log(isCheckAll);
      return isCheckAll;
    },
    // 子选框事件
    pageCheckEv(scope) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleCheckAll(scope.row, scope.row.pageCheck);
      }
      // 查找父级选框
      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.tableData) === 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);
        });
      }
    },
    /**
     * 功能选择
     */
    // 子选框事件
    fnCheckEv(scope, type) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleFnAll(scope.row, scope.row.fnCheck[type], type);
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        if (!item.childList) {
          item.fnCheck[type] = scope.row.fnCheck[type];
        } else {
          var num = 0;
          item.childList.forEach((item, i) => {
            if (item.fnCheck[type] === true) {
              num += 1;
            }
          });
          if (num === item.childList.length) {
            item.fnCheck[type] = true;
          } else {
            item.fnCheck[type] = false;
          }
        }
      });
    },
    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>

