<!--新增/编辑权限页面-->
<template>
  <div class="managePermissionTemplates-addPage scrollbar-box">
    <div class="public-form-box scrollbar-box">
      <p class="top-title-p">新增权限模板</p>
      <el-form :model="form" ref="form" :inline="true" :rules="rules" label-width="150px">
        <div class="name-input-box">
          <el-form-item label="权限模板名称" prop="name" style="margin-top:30px;">
            <el-input v-model="form.name" clearable maxlength="12" placeholder="请输入权限模板名称"/>
          </el-form-item>
          <el-form-item label="请选择模板类型" prop="type" style="margin-top:30px;">
            <el-radio-group v-model="form.type">
              <el-radio :label="1" style="width:80px;margin-left:40px;">学生</el-radio>
              <el-radio :label="2" style="width:100px;">教职工</el-radio>
              <el-radio :label="0" style="width:80px;">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="top-title-one">
          <p class="title-p">权限配置</p>
          <p class="el-icon-question img-p" @mouseenter="showText" @mouseout="hideText"></p>
          <div class="position-box" v-if="textType">
            <p>1、权限快捷模板：列出所有已创建的快捷模板，可选择快捷导入模板；导入后可修改或清空。</p>
            <p>2、模块菜单：选中父级，联动子级全部选中，可对子级单独勾选；子级选中，所属父级联动选中。</p>
            <p>3、数据范围：数据查看范围选择，默认展示所有数据。</p>
            <p>4、管理权限：功能操作权限，包含增删改查、启用、停用，以及导出等操作功能。</p>
            <p>5、详细配置：对底层菜单的功能操作进行细分权限勾选，功能操作按所属菜单页面现有的功能操作进行展示，可单选、全选。</p>
          </div>
        </div>
        <div class="for-button-list">
          <p class="for-title-p">权限快捷模板：</p>
          <div class="for-button-max-box">
            <div class="for-button-min-box" v-for="(item,index) in templateList" :key="index"
                 :class="templateKey == item.id?'colorAA':'colorBB'" @click="templateClick(item.id)">
              <i class="el-icon-success" v-if="templateKey == item.id"></i>
              <span>{{item.name}}</span>
            </div>
          </div>
        </div>
        <div class="template-name-box">
          <p class="template-name-p">当前导入模板：{{templateName?templateName:'无'}}</p>
          <p class="reset-button-one template-name-button" @click="templateDel">清除</p>
        </div>
        <div class="table-for-max-box">
          <div class="table-title-box">
            <p>模块菜单</p>
            <p>权限</p>
          </div>
          <div class="table-for-big-box" v-for="(maxItem,maxIndex) in menuList" :key="maxIndex">
            <div class="max-title-box" :class="!maxItem.children?'max-title-box-null':''">
              <p><el-checkbox :disabled="maxItem.isRequired == 1" v-model="maxItem.checkType" @change="(type)=>itemCheckClick(1,type,maxItem)">{{maxItem.menuName}}</el-checkbox></p>
            </div>
            <div class="max-right-box">
              <div class="big-box" v-for="(bigItem,bigIndex) in maxItem.children" :key="bigIndex">
                <div class="big-title-box" :class="bigItem.menuType == 'C'?'big-title-box-null':''">
                  <p><el-checkbox :disabled="bigItem.isRequired == 1" v-model="bigItem.checkType" @change="(type)=>itemCheckClick(2,type,bigItem,maxItem)">{{bigItem.menuName}}</el-checkbox></p>
                </div>
                <div class="big-right-box" v-if="bigItem.menuType !='C'">
                  <div class="min-box" v-for="(minItem,minIndex) in bigItem.children" :key="minIndex">
                    <div class="min-title-box">
                      <p><el-checkbox :disabled="minItem.isRequired == 1" v-model="minItem.checkType" @change="(type)=>itemCheckClick(3,type,minItem,bigItem,maxItem)">{{minItem.menuName}}</el-checkbox></p>
                    </div>
                    <div class="min-right-box" v-if="minItem.checkType">
                      <div class="scope-box">
                        <p>
                          <el-checkbox v-model="minItem.scopeCheckType" @change="(type)=>itemCheckClick(4,type,minItem)" style="margin-right:40px;">数据范围</el-checkbox>
                          <el-select v-model="minItem.dataScope" :disabled="!minItem.scopeCheckType" v-if="minItem.isRequired == 1"
                                     placeholder="请选择" @visible-change="(type)=>visibleChange(type,minItem,maxIndex,bigIndex,minIndex)">
                            <el-option v-for="dist in optionsDataListOne" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,minItem,maxIndex,bigIndex,minIndex)"></el-option>
                          </el-select>
                          <el-select v-model="minItem.dataScope" :disabled="!minItem.scopeCheckType" v-if="minItem.isRequired != 1"
                                     placeholder="请选择" @visible-change="(type)=>visibleChange(type,minItem,maxIndex,bigIndex,minIndex)">
                            <el-option v-for="dist in optionsDataList" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,minItem,maxIndex,bigIndex,minIndex)"></el-option>
                          </el-select>
                        </p>
                      </div>
                      <div class="permission-box" v-if="minItem.children">
                        <p class="check-left-p"><el-checkbox v-model="minItem.permissionCheckType"  @change="(type)=>itemCheckClick(5,type,minItem)">管理权限</el-checkbox></p>
                        <div class="check-button-box" @click="permissionDetails(minItem,maxIndex,bigIndex,minIndex)"
                             :class="minItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
                          <img v-if="!minItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png">
                          <img v-if="minItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png">
                          <p>详细配置</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="big-right-box-null" v-if="bigItem.menuType == 'C'&&bigItem.checkType">
                  <div class="scope-box">
                    <p>
                      <el-checkbox v-model="bigItem.scopeCheckType" style="margin-right:40px;" @change="(type)=>itemCheckClick(4,type,bigItem)">数据范围</el-checkbox>
                      <el-select v-model="bigItem.dataScope" :disabled="!bigItem.scopeCheckType" v-if="bigItem.isRequired == 1"
                                 placeholder="请选择" @visible-change="(type)=>visibleChange(type,bigItem,maxIndex,bigIndex)">
                        <el-option v-for="dist in optionsDataListOne" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,bigItem,maxIndex,bigIndex)"></el-option>
                      </el-select>
                      <el-select v-model="bigItem.dataScope" :disabled="!bigItem.scopeCheckType" v-if="bigItem.isRequired != 1"
                                 placeholder="请选择" @visible-change="(type)=>visibleChange(type,bigItem,maxIndex,bigIndex)">
                        <el-option v-for="dist in optionsDataList" :key="dist.type" :label="dist.value" :value="dist.type" @click.native="(type)=>optionChange(dist.type,bigItem,maxIndex,bigIndex)"></el-option>
                      </el-select>
                    </p>
                  </div>
                  <div class="permission-box" v-if="bigItem.children">
                    <p class="check-left-p"><el-checkbox v-model="bigItem.permissionCheckType" @change="(type)=>itemCheckClick(5,type,bigItem)">管理权限</el-checkbox></p>
                    <div class="check-button-box" @click="permissionDetails(bigItem,maxIndex,bigIndex)"
                         :class="bigItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
                      <img v-if="!bigItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png">
                      <img v-if="bigItem.permissionCheckType" src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png">
                      <p>详细配置</p>
                    </div>
                  </div>
                </div>
              </div>
              <p class="big-box-null" v-if="!maxItem.children&&maxItem.menuName == '数据可视化'">数据可视化大屏查看权限</p>
            </div>
          </div>
        </div>
        <el-form-item label="" prop="text">
          <div class="textarea-box">
            <p class="textarea-title-p">权限模板说明</p>
            <el-input
              type="textarea"
              style="width:750px;"
              maxlength="100"
              resize="none"
              show-word-limit
              :autosize="{ minRows: 8, maxRows: 12}"
              placeholder="请输入权限模板说明"
              v-model="form.text">
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <!--权限操作弹窗-->
      <el-dialog :title="permissionCheckData.menuName+'模块'" :visible.sync="permissionOpen" width="900px" append-to-body class="managePermissionTemplates-permission-dialog-box">
        <p class="title-p">{{permissionCheckData.menuName}}权限详细配置</p>
        <div class="managePermissionTemplates-permission-dialog-form-box">
          <div class="title-box">
            <p class="left-title-p">功能菜单</p>
            <div class="right-box">
              <el-checkbox v-model="allCheckType" class="right-box-min" @change="(type)=>permissionCheckClick('1',type)">功能操作</el-checkbox>
            </div>
          </div>
          <div class="check-box">
            <div class="left-title-box">
              <p class="left-title-p">{{permissionCheckData.menuName}}</p>
            </div>
            <div class="right-box">
              <el-checkbox class="for-check-box" @change="(type)=>permissionCheckClick('2',type)"
                           v-for="(item,index) in permissionCheckData.children" :key="index" v-model="item.checkType">
                {{item.menuName}}
              </el-checkbox>
            </div>
          </div>
        </div>
        <div slot="footer" class="managePermissionTemplates-permission-dialog-button-box">
          <p class="reset-button-one" @click="permissionOpenOff">取消</p>
          <p class="inquire-button-one" @click="surePermissionOpen">确定</p>
        </div>
      </el-dialog>
      <el-dialog title="选择指定部门（可多选）" @close="deptCancel" :visible.sync="deptOpen" v-if="deptOpen" width="500px" append-to-body class="managePermissionTemplates-dept-dialog-box">
        <el-form :model="deptForm" ref="deptForm" :inline="true" :rules="rules" class="addCheckPage-min">
          <el-form-item label="指定部门" prop="deptIds" label-width="90px" class="el-form-item-bottom">
            <el-cascader
              style="width:300px;"
              :options="treeselectList"
              :props="{multiple: true,value: 'id', label: 'label'}"
              v-model="deptForm.deptIds"
              clearable>
            </el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="managePermissionTemplates-dept-dialog-button-box">
          <p class="reset-button-one" @click="deptCancel">取消</p>
          <p class="inquire-button-one" @click="deptSure">确定</p>
        </div>
      </el-dialog>
    </div>
    <div class="bottom-button-box">
      <p class="reset-button-one" @click="outPageButton">取消</p>
      <p class="inquire-button-one" @click="upDataButton">{{propsData.id?'修改':'发布'}}</p>
    </div>
  </div>
</template>

<script>
  import { addSystemPermit, putSystemPermit, getPermitOptionList, getPermitInfo } from "@/api/laboratory/managePermissionTemplates";
  import { listMenuAll } from "@/api/system/menu";
  import { treeselect } from "@/api/system/dept";
  export default {
    name: "addPage",
    props:{
      propsData:{},
    },
    data() {
      return {
        menuList:[],
        menuListData:[],
        originalMenuList:[],
        // 表单校验
        rules: {
          name: [
            { required: true, message: "任务名称不能为空", trigger: "blur" },
            { required: true, message: "任务名称不能为空", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptIds: [
            { required: true, message: "请选择指定部门", trigger: "blur" }
          ],
        },
        form:{
          name:"",
          type:0,
          text:"",
        },
        textType:false,
        //数据范围列表
        optionsDataListOne:[
          {type: 1, value: "所有数据",},
          {type: 2, value: "本部门及下级部门数据",},
          {type: 3, value: "本部门及指定部门数据",},
        ],
        optionsDataList:[
          {type: 1, value: "所有数据",},
          {type: 2, value: "本部门及下级部门数据",},
          {type: 3, value: "本部门及指定部门数据",},
          {type: 4, value: "当前账号数据",},
        ],
        //数据范围部门弹窗
        deptOpen:false,
        deptOpenType:'',
        //部门数据结构树
        treeselectList:[],
        //指定部门数据
        deptForm:{
          deptIds:[],
          maxIndex:"",
          bigIndex:"",
          minIndex:"",
          dataScope:"",
        },
        //快捷权限列表
        templateList:[],
        templateKey:"",
        templateName:"",
        //权限勾选数据
        permissionOpen:false,
        permissionCheckData:{},
        allCheckType:false,
        maxIndex:'',
        bigIndex:'',
        minIndex:'',
      }
    },
    created() {

    },
    mounted(){
      this.getMenu();
      this.treeselect();
      this.getPermitOptionList();
    },
    methods:{
      //模板选中
      templateClick(id){
        let self = this;
        getPermitInfo(id).then(response => {
          for(let a=0;a<response.data.length;a++){
            if(response.data[a].isRequired == 1){
              response.data[a].checkType = true;
            }
          }
          let newList = JSON.parse(JSON.stringify(this.originalMenuList));
          for(let i=0;i<response.data.permitMenus.length;i++){
            for(let o=0;o<newList.length;o++){
              if(response.data.permitMenus[i].menuId == newList[o].menuId){
                newList[o].checkType = true;
                if(response.data.permitMenus[i].dataScope == 3){
                  newList[o].dataScope = response.data.permitMenus[i].dataScope;
                  newList[o].deptIds =response.data.permitMenus[i].deptIds;
                  newList[o].deptIdsList =response.data.permitMenus[i].deptIdsList;
                  newList[o].scopeCheckType = true;
                }else if(response.data.permitMenus[i].dataScope != 0){
                  newList[o].dataScope = response.data.permitMenus[i].dataScope;
                  newList[o].scopeCheckType = true;
                }
              }
              if(response.data.permitMenus[i].menuType == 'F' && response.data.permitMenus[i].parentId == newList[o].menuId && !newList[o].permissionCheckType){
                newList[o].permissionCheckType = true;
              }
            }
          }
          this.menuList = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
        });
        if(this.templateKey != id){
          this.templateKey = id;
          for(let i=0;i<self.templateList.length;i++){
            if(id == self.templateList[i].id){
              this.templateName = self.templateList[i].name;
            }
          }
        }else{
          this.templateKey = "";
          this.templateName = "";
        }
        this.$forceUpdate();
      },
      //清除模板选中
      templateDel(){
        this.templateKey = "";
        this.templateName = "";
        this.$set(this,'menuList',JSON.parse(JSON.stringify(this.menuListData)))
      },
      //权限详情按钮
      permissionDetails(obj,maxIndex,bigIndex,minIndex){
        let item = JSON.parse(JSON.stringify(obj));
        this.maxIndex = maxIndex;
        this.bigIndex = bigIndex;
        this.minIndex = minIndex;
        let num = 0;
        for(let i=0;i<item.children.length;i++){
          if(item.children[i].checkType){
            num++
          }
        }
        this.allCheckType = num != 0;
        this.$set(this,'permissionCheckData',item)
        this.permissionOpen = true;
      },
      surePermissionOpen(){
        if(this.maxIndex != undefined && this.bigIndex != undefined && this.minIndex != undefined){
          this.menuList[this.maxIndex].children[this.bigIndex].children[this.minIndex] = JSON.parse(JSON.stringify(this.permissionCheckData));
          this.menuList[this.maxIndex].children[this.bigIndex].children[this.minIndex].permissionCheckType = JSON.parse(JSON.stringify(this.allCheckType))
        }else if(this.maxIndex != undefined && this.bigIndex != undefined){
          this.menuList[this.maxIndex].children[this.bigIndex] = JSON.parse(JSON.stringify(this.permissionCheckData));
          this.menuList[this.maxIndex].children[this.bigIndex].permissionCheckType = JSON.parse(JSON.stringify(this.allCheckType))
        }else if(this.maxIndex != undefined){
          this.menuList[this.maxIndex] = JSON.parse(JSON.stringify(this.permissionCheckData));
          this.menuList[this.maxIndex].permissionCheckType = JSON.parse(JSON.stringify(this.allCheckType))
        }
        this.permissionOpen = false;
      },
      permissionOpenOff(){
        this.permissionOpen = false;
      },
      //展开时触发
      visibleChange(type,item,maxIndex,bigIndex,minIndex){
        if(type){
          if(minIndex!=undefined){
            this.deptOpenType = this.menuList[maxIndex].children[bigIndex].children[minIndex].dataScope
          }else{
            this.deptOpenType = this.menuList[maxIndex].children[bigIndex].dataScope
          }
        }
      },
      //数据范围选中指定部门
      optionChange(type,item,maxIndex,bigIndex,minIndex){
        if(type == 3){
          if(item.deptIdsList){
            this.deptForm.deptIds = JSON.parse(item.deptIdsList);
          }else{
            this.deptForm.deptIds = "";
          }
          this.deptForm.maxIndex = maxIndex;
          this.deptForm.bigIndex = bigIndex;
          this.deptForm.minIndex = minIndex;
          this.deptForm.dataScope = item.dataScope;
          this.deptOpen = true;
        }
        this.$forceUpdate()
      },
      //指定部门弹窗取消
      deptCancel(){
        if(this.deptForm.minIndex || this.deptForm.minIndex == 0){
          this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex].children[this.deptForm.minIndex],'dataScope',this.deptOpenType)
        }else{
          this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex],'dataScope',this.deptOpenType)
        }
        this.deptForm.deptIds = [];
        this.deptForm.maxIndex = "";
        this.deptForm.bigIndex = "";
        this.deptForm.minIndex = "";
        this.deptForm.dataScope = "";
        this.deptOpen = false;
        this.$forceUpdate()
      },
      //指定部门弹窗确定
      deptSure(){
        let self = this;
        this.$refs["deptForm"].validate(valid => {
          if (valid) {
            let list = [];
            for(let i=0;i<self.deptForm.deptIds.length;i++){
              for(let o=0;o<self.deptForm.deptIds[i].length;o++){
                list.push(self.deptForm.deptIds[i][o])
              }
            }
            let newList = [];
            for (var i = 0,len=list.length; i < len; i++) {
              if(newList.indexOf(list[i]) === -1){
                newList.push(list[i]);
              }
            }
            if(this.deptForm.minIndex || this.deptForm.minIndex == 0){
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex].children[this.deptForm.minIndex],'deptIds',newList)
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex].children[this.deptForm.minIndex],'deptIdsList',JSON.stringify(self.deptForm.deptIds))
            }else{
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex],'deptIds',newList)
              this.$set(this.menuList[this.deptForm.maxIndex].children[this.deptForm.bigIndex],'deptIdsList',JSON.stringify(self.deptForm.deptIds))
            }
            this.deptOpen = false;
            this.deptForm.deptIds = [];
            this.deptForm.maxIndex = "";
            this.deptForm.bigIndex = "";
            this.deptForm.minIndex = "";
            this.deptForm.dataScope = "";
            this.$forceUpdate()
          }
        });
      },
      //模块勾选逻辑
      itemCheckClick(status,type,item,bigItem,maxItem){
        if(status == 1 || status == 2 || status == 3){
          //一级菜单勾选
          if(item.children){
            for(let i=0;i<item.children.length;i++){
              item.children[i].checkType = !!type;
              if(item.children[i].children){
                for(let o=0;o<item.children[i].children.length;o++){
                  item.children[i].children[o].checkType = !!type;
                  if(item.children[i].children[o].children){
                    for(let x=0;x<item.children[i].children[o].children.length;x++){
                      item.children[i].children[o].children[x].checkType = !!type;
                    }
                  }
                  if(item.children[i].children[o].menuType == 'C'){
                    item.children[i].children[o].scopeCheckType = !!type;
                    item.children[i].children[o].dataScope = type?1:"";
                    item.children[i].children[o].permissionCheckType = !!type;
                  }
                }
              }
              if(item.children[i].menuType == 'C'){
                item.children[i].scopeCheckType = !!type;
                item.children[i].dataScope = type?1:"";
                item.children[i].permissionCheckType = !!type;
              }
            }
          }
          if(item.menuType == 'C'){
            item.scopeCheckType = !!type;
            item.dataScope = type?1:"";
            item.permissionCheckType = !!type;
          }
          if(bigItem&&type){
            bigItem.checkType = type;
          }
          if(maxItem&&type){
            maxItem.checkType = type;
          }
        }else if(status == 4){
          //数据范围勾选
          item.scopeCheckType = !!type;
          item.dataScope = type?1:"";
        }else if(status == 5){
          //管理权限勾选
          item.permissionCheckType = !!type;
          for(let i=0;i<item.children.length;i++){
            item.children[i].checkType = !!type;
          }
        }
      },
      //权限勾选逻辑
      permissionCheckClick(status,type){
        let self = this;
        if(status == 1){
          for(let i=0;i<self.permissionCheckData.children.length;i++){
            self.permissionCheckData.children[i].checkType = !!type;
            self.permissionCheckData.permissionCheckType = !!type;
          }
        }else if(status == 2){
          if(type&&!this.allCheckType){
            this.allCheckType = true;
            this.permissionCheckData.permissionCheckType = true;
          }else{
            let num = 0;
            for(let i=0;i<self.permissionCheckData.children.length;i++){
              if(!self.permissionCheckData.children[i].checkType){
                num++
              }
            }
            if(num == self.permissionCheckData.children.length){
              this.allCheckType = false;
              this.permissionCheckData.permissionCheckType = false;
            }
          }
        }
        this.$forceUpdate();
      },
      //返回事件
      outPageButton(){
        this.$parent.pageTypeClick(1);
      },
      //提交事件
      upDataButton(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            let list = this.toArray();
            console.log("list",list)
            let obj = {
              name:this.form.name,
              type:this.form.type,
              remark:this.form.text,
              permitMenus:[]
            };
            for(let i=0;i<list.length;i++){
              let minObj = {
                menuId:list[i].menuId,
              }
              if(list[i].dataScope){
                minObj.dataScope = list[i].dataScope
                if(list[i].dataScope == 3){
                  minObj.deptIds = list[i].deptIds
                  minObj.deptIdsList = list[i].deptIdsList;
                }
              }else{
                minObj.dataScope = 0
              }
              obj.permitMenus.push(minObj)
            }
            if(this.propsData.id){
              //修改
              obj.id = this.propsData.id;
              this.putSystemPermit(obj);
            }else{
              //发布
              this.addSystemPermit(obj);
            }
          }
        });
      },
      putSystemPermit(obj){
        putSystemPermit(obj).then(response => {
          if(response.code == 200){
            this.msgSuccess(response.msg);
            this.outPageButton();
          }
        });
      },
      addSystemPermit(obj){
        addSystemPermit(obj).then(response => {
          if(response.code == 200){
            this.msgSuccess(response.msg);
            this.outPageButton();
          }
        });
      },
      showText(){
        console.log("1")
        this.textType = true;
      },
      hideText(){
        console.log("2")
        this.textType = false;

      },
      /** 查询菜单列表 */
      getMenu() {
        let self = this;
        this.loading = true;
        listMenuAll(this.queryParams).then(response => {
          for(let a=0;a<response.data.length;a++){
            if(response.data[a].isRequired == 1){
              response.data[a].checkType = true;
            }
          }
          if(this.propsData.id){
            let newList = JSON.parse(JSON.stringify(response.data));
            this.form.name = this.propsData.name;
            this.form.type = this.propsData.type;
            this.form.text = this.propsData.remark;
            for(let i=0;i<self.propsData.permitMenus.length;i++){
              for(let o=0;o<newList.length;o++){
                if(self.propsData.permitMenus[i].menuId == newList[o].menuId){
                  newList[o].checkType = true;
                  if(self.propsData.permitMenus[i].dataScope == 3){
                    newList[o].dataScope = self.propsData.permitMenus[i].dataScope;
                    newList[o].deptIds =self.propsData.permitMenus[i].deptIds;
                    newList[o].deptIdsList =self.propsData.permitMenus[i].deptIdsList;
                    newList[o].scopeCheckType = true;
                  }else if(self.propsData.permitMenus[i].dataScope != 0){
                    newList[o].dataScope = self.propsData.permitMenus[i].dataScope;
                    newList[o].scopeCheckType = true;
                  }
                }
                if(self.propsData.permitMenus[i].menuType == 'F' && self.propsData.permitMenus[i].parentId == newList[o].menuId && !newList[o].permissionCheckType){
                  newList[o].permissionCheckType = true;
                }
              }
            }
            let newMenu1 = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
            let newMenu2 = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            let newMenu3 = JSON.parse(JSON.stringify(response.data));
            this.$set(this,'menuList',newMenu1);
            this.$set(this,'menuListData',newMenu2);
            this.$set(this,'originalMenuList',newMenu3);
            // this.menuList = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
            // this.menuListData = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            // this.originalMenuList = JSON.parse(JSON.stringify(response.data));
          }else{
            let newMenu1 = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            let newMenu2 = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            let newMenu3 = JSON.parse(JSON.stringify(response.data));
            this.$set(this,'menuList',newMenu1);
            this.$set(this,'menuListData',newMenu2);
            this.$set(this,'originalMenuList',newMenu3);
            // this.menuList = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            // this.menuListData = JSON.parse(JSON.stringify(this.handleTree(response.data, "menuId")))
            // this.originalMenuList = JSON.parse(JSON.stringify(response.data));
          }
          this.loading = false;
        });
      },
      //获取部门树形结构
      treeselect(){
        treeselect().then(response => {
          this.$set(this,'treeselectList',response.data[0].children);
        });
      },
      //获取快捷权限列表
      getPermitOptionList(){
        getPermitOptionList().then(response => {
          this.templateList = response.data
        });
      },
      //结构树转数组并筛选选中项
      toArray(){
        let list = [];
        let newList = JSON.parse(JSON.stringify(this.menuList));
        for(let i=0;i<newList.length;i++){
          pushNode(newList[i]);
        }
        function pushNode(node){
          if(node.children){
            for (let nodeItem of node.children){
              pushNode(nodeItem)
            }
            delete node.children;
            if(node.checkType){
              list.push(node)
            }
          }else{
            if(node.children){
              delete node.children
            }
            if(node.checkType){
              list.push(node)
            }
          }
        }
        return list
      }
    }
  }
</script>

<style scoped lang="scss">
  .managePermissionTemplates-addPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    *{
      margin:0;
    }
    .public-form-box{
      flex:1;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .top-title-p{
      font-size:18px;
      color:#0045AF;
      line-height:80px;
      padding:0 24px;
      border-bottom:1px solid #E0E0E0;
    }
    .top-title-one{
      display: flex;
      border-top:1px solid #E0E0E0;
      position: relative;
      .title-p{
        font-size:18px;
        color:#0045AF;
        line-height:80px;
        margin-left:24px;
      }
      .img-p{
        font-size:18px;
        margin:0 10px;
        line-height:80px;
        color:#FFC000;
      }
      .position-box{
        width: 420px;
        height: 194px;
        padding:20px;
        background: #F5F5F5;
        position: absolute;
        top:10px;
        left:134px;
        p{
          font-size:12px;
          line-height:18px;
          color:#333;
        }
      }
    }
    .name-input-box{
      height:100px;
    }
    .for-button-list{
      background: #E5F2FE;
      margin:0 20px;
      display: flex;
      .for-title-p{
        width:175px;
        height:80px;
        line-height:80px;
        font-size:16px;
        color:#333;
        text-align: center;
      }
      .for-button-max-box{
        flex:1;
        .for-button-min-box{
          font-size:16px;
          display: inline-block;
          overflow: hidden;
          height:30px;
          line-height:30px;
          border-radius:6px;
          margin:25px 28px 0 0;
          cursor: pointer;
          i{
            height:30px;
            line-height:30px;
            font-size:16px;
            color:#fff;
            margin-right:6px;
          }
        }
        .colorAA{
          color: #ffffff;
          background: #0183FA;
          padding:0 26px 0 16px;
        }
        .colorBB{
          padding:0 26px;
          color: #333;
          background: #E0E0E0;
        }
      }
    }
    .template-name-box{
      display: flex;
      .template-name-p{
        font-weight:500;
        height:80px;
        line-height:80px;
        font-size:16px;
        color:#333;
        margin-left:20px;
        flex: 1;
      }
      .template-name-button{
        width:80px;
        height:40px;
        line-height:40px;
        margin:20px 40px 0 0;
      }
    }
    .table-for-max-box{
      border:1px solid #D7D7D7;
      margin:0 20px;
      *{
        margin:0;
        padding:0;
      }
      .table-title-box{
        background: rgba(1,131,250,0.1);
        display: flex;
        p{
          font-size:14px;
          font-weight:700;
          color:#333;
          line-height:48px;
          padding-left:20px;
        }
        p:nth-child(1){
          width:615px;
          border-right:1px solid #D7D7D7;
        }
      }
      .table-for-big-box{
        border-top:1px solid #D7D7D7;
        display: flex;
        font-size:14px;
        .max-title-box-null{
          width:615px!important;
        }
        .max-title-box{
          width:230px;
          border-right:1px solid #D7D7D7;
          min-height:48px;
          position: relative;
          p{
            position: absolute;
            top:50%;
            left:20px;
            height:18px;
            line-height:18px;
            margin-top:-9px;
          }
        }
        .max-right-box{
          flex:5;
          min-height:48px;
          .big-box:nth-child(1){
            border:none!important;
          }
          .big-box-null{
            line-height:48px;
            margin-left:20px;
            color:#606266;
          }
          .big-box{
            display: flex;
            border-top:1px solid #D7D7D7;
            .big-title-box-null{
              width:385px!important;
            }
            .big-title-box{
              width:180px;
              border-right:1px solid #D7D7D7;
              min-height:48px;
              position: relative;
              overflow: hidden;
              p{
                position: absolute;
                top:50%;
                left:20px;
                height:48px;
                line-height:48px;
                margin-top:-24px;
              }
            }
            .big-right-box-null{
              display: flex;
              .scope-box{
                width:430px;
                position: relative;
                overflow: hidden;
                border-right:1px solid #D7D7D7;
                p{
                  position: absolute;
                  top:50%;
                  left:20px;
                  height:48px;
                  line-height:48px;
                  margin-top:-24px;
                }
              }
              .permission-box{
                flex:1;
                position: relative;
                overflow: hidden;
                display: flex;
                .check-left-p{
                  margin-left:20px;
                  height:48px;
                  line-height:48px;
                }
                .check-button-box{
                  width:130px;
                  height:36px;
                  margin:6px 0 0 36px;
                  line-height:36px;
                  display: flex;
                  color:#333;
                  cursor: pointer;
                  img{
                    width:16px;
                    height:16px;
                    margin:10px 14px 0 19px;
                  }
                }
                .check-button-box-colorA{
                  background: #CCE6FE;
                  color:#0183FA;
                }
                .check-button-box-colorB{
                  background: #E0E0E0;
                  color:#333;
                }
              }
            }
            .big-right-box{
              flex:5;
              min-height:48px;
              .min-box:nth-child(1){
                border:none!important;
              }
              .min-box{
                display: flex;
                border-top:1px solid #D7D7D7;
                .min-title-box{
                  width:205px;
                  border-right:1px solid #D7D7D7;
                  min-height:48px;
                  position: relative;
                  overflow: hidden;
                  p{
                    position: absolute;
                    top:50%;
                    left:20px;
                    height:48px;
                    line-height:48px;
                    margin-top:-24px;
                  }
                }
                .min-right-box{
                  flex:5;
                  min-height:48px;
                  display: flex;
                  .scope-box{
                    width:430px;
                    position: relative;
                    overflow: hidden;
                    border-right:1px solid #D7D7D7;
                    p{
                      position: absolute;
                      top:50%;
                      left:20px;
                      height:48px;
                      line-height:48px;
                      margin-top:-24px;
                    }
                  }
                  .permission-box{
                    flex:1;
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    .check-left-p{
                      margin-left:20px;
                      height:48px;
                      line-height:48px;
                    }
                    .check-button-box{
                      width:130px;
                      height:36px;
                      margin:6px 0 0 36px;
                      line-height:36px;
                      display: flex;
                      color:#333;
                      cursor: pointer;
                      img{
                        width:16px;
                        height:16px;
                        margin:10px 14px 0 19px;
                      }
                    }
                    .check-button-box-colorA{
                      background: #CCE6FE;
                      color:#0183FA;
                    }
                    .check-button-box-colorB{
                      background: #E0E0E0;
                      color:#333;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .textarea-box{
      margin-left:20px;
      .textarea-title-p{
        line-height:80px;
        font-size:16px;
        font-weight:500;
        color:#333;
      }
    }
    .bottom-button-box{
      display: flex;
      width:224px;
      margin:50px auto;
      p{
        font-size:14px;
      }
      p:nth-child(1){
        margin-right:24px;
      }
      p:nth-child(2){

      }
    }
  }
</style>
<style lang="scss">
  .table-for-max-box .scope-box .el-input--medium .el-input__inner{
    height:36px!important;
  }
  .table-for-max-box .scope-box .el-input--medium .el-input__icon {
    line-height: 46px;
  }
  .managePermissionTemplates-permission-dialog-box{
    *{
      margin:0;
    }
    .title-p{
      font-size:15px;
      font-weight:700;
      margin-bottom:30px;
    }
    .managePermissionTemplates-permission-dialog-form-box{
      .title-box{
        display: flex;
        height: 60px;
        background: #F5F5F5;
        .left-title-p{
          width:198px;
          border-right:1px solid #E0E0E0;
          font-size:15px;
          font-weight:700;
          padding-left:26px;
          line-height:60px;
          color:#333;
        }
        .right-box{
          flex:1;
          .right-box-min{
            height:20px;
            margin:20px 0 0 50px;
            .el-checkbox__label{
              font-size:15px;
              font-weight:700;
            }
          }
        }
      }
      .check-box{
        display: flex;
        .left-title-box{
          width:198px;
          border:1px solid #E0E0E0;
          position: relative;
          .left-title-p{
            position: absolute;
            left:27px;
            height:20px;
            line-height:20px;
            top:50%;
            margin-top:-10px;
          }
        }
        .right-box{
          padding:0 50px 41px 0;
          flex:1;
          border:1px solid #E0E0E0;
          border-left:none;
          .for-check-box{
            margin:41px 0 0 50px;
          }
        }
      }
    }
    .managePermissionTemplates-permission-dialog-button-box{
      display: flex;
      width:160px;
      margin:0 auto;
      p{
        margin:0;
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
      }
      p:nth-child(1){
        margin-right:20px;
      }
    }
  }
  .managePermissionTemplates-dept-dialog-box{
    *{
      margin:0;
    }
    .managePermissionTemplates-dept-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        margin:0;
        width:70px;
        height:30px;
        line-height:30px;
        font-size:14px;
      }
      p:nth-child(1){
        margin-right:50px;
      }
    }
  }
</style>
