<template>
  <div class="page-container smallProgramLimits">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">小程序权限配置</p>
      <p class="page-top-title-out-p" @click="outPageButton">返回</p>
      <p class="page-top-title-submit-p" @click="upDataButton">提交</p>
    </div>
    <div class="public-form-box">
      <!--权限模块-->
      <div class="table-for-max-box">
        <div class="table-title-box">
          <p>模块菜单</p>
          <!--<p>权限</p>-->
        </div>
        <div class="table-max-box scrollbar-box">
          <div class="for-max-big-box" v-for="(item1,index1) in menuList" :key="index1">
            <!-- 一级 -->
            <div class="check-max-box">
              <p><el-checkbox v-model="item1.checked" @change="(type)=>itemCheckClick(type,item1)">{{item1.menuName}}</el-checkbox></p>
            </div>
            <!-- 二级 -->
            <div class="list-max-box" v-if="item1.children">
              <div class="for-max-box" v-for="(item2,index2) in item1.children" :key="index2">
                <!-- 二级 -->
                <div class="check-max-box">
                  <p><el-checkbox v-model="item2.checked" @change="(type)=>itemCheckClick(type,item2)">{{item2.menuName}}</el-checkbox></p>
                </div>
                <!-- 三级 -->
                <div class="list-max-box" v-if="item2.children">
                  <div class="for-max-box" v-for="(item3,index3) in item2.children" :key="index3">
                    <!-- 三级 -->
                    <div class="check-max-box">
                      <p><el-checkbox v-model="item3.checked" @change="(type)=>itemCheckClick(type,item3)">{{item3.menuName}}</el-checkbox></p>
                    </div>
                    <!-- 四级 -->
                    <div class="list-max-box" v-if="item3.children">
                      <div class="for-max-box" v-for="(item4,index4) in item3.children" :key="index4">
                        <!-- 四级 -->
                        <div class="check-max-box">
                          <p><el-checkbox v-model="item4.checked" @change="(type)=>itemCheckClick(type,item4)">{{item4.menuName}}</el-checkbox></p>
                        </div>
                        <!-- 五级 -->
                        <div class="list-max-box" v-if="item4.children">
                          <div class="for-max-box" v-for="(item5,index5) in item4.children" :key="index5">
                            <!-- 五级 -->
                            <div class="check-max-box">
                              <p><el-checkbox v-model="item5.checked" @change="(type)=>itemCheckClick(type,item5)">{{item5.menuName}}</el-checkbox></p>
                            </div>
                            <!-- 六级 -->
                            <div class="list-max-box" v-if="item5.children">
                              <div class="for-max-box" v-for="(item6,index6) in item5.children" :key="index6">
                                <!-- 六级 -->
                                <div class="check-max-box">
                                  <p><el-checkbox v-model="item6.checked" @change="(type)=>itemCheckClick(type,item6)">{{item6.menuName}}</el-checkbox></p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { systemAppletRoleGetRoleMenu,systemAppletRoleSaveRolePermission  } from "@/api/systemManagement/index";
  export default {
    name: 'smallProgramLimits',
    props:{
      propsData:{},
    },
    data() {
      return {
        menuList:[],
        originalMenuList:[],
        form:{
          roleName:"",     //姓名
          roleKey:"",
          dataScope:null,
        },
        //数据范围部门弹窗
        deptOpen:false,
        deptOpenType:'',
        //部门数据结构树
        treeselectList:[],
        //指定部门数据
        deptForm:{
          deptIds:[],
        },
        checkDeptType:null,
        checkAllType:false,
      }
    },
    created(){

    },
    mounted(){
      this.getMenu();
    },
    methods:{
      //提交按钮
      upDataButton(){
        let obj = {
          roleId:this.propsData.roleId,
          menuIds : this.toArray(),
        }
        systemAppletRoleSaveRolePermission(obj).then(response => {
          this.msgSuccess(response.message);
          this.$parent.goPage(4);
        });
      },
      //模块勾选逻辑
      itemCheckClick(type,item){
        //向下修改
        if(item.children){
          this.childBottomCheck(type,item);
        }
        //向上修改
        if(type){
          this.childTopCheck(this.menuList,item);
        }
        this.$forceUpdate();
      },
      //向上勾选
      childTopCheck(list,item){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(item.menuId == list[i].menuId){
            return true
          }else if(list[i].children){
            let type = self.childTopCheck(list[i].children,item);
            if(type){
              list[i].checked = true;
              return true
            }
          }
        }
      },
      //向下勾选
      childBottomCheck(type,item){
        let self = this;
        if(item.children){
          for(let i=0;i<item.children.length;i++){
            item.children[i].checked = type;
            if(item.children[i].children){
              self.childBottomCheck(type,item.children[i]);
            }
          }
        }
      },
      getMenu() {
        this.loading = true;
        systemAppletRoleGetRoleMenu({roleId:this.propsData.roleId}).then(response => {
          let newList = JSON.parse(JSON.stringify(response.data));
          this.menuList = this.handleTree(response.data, "menuId");
          // this.menuList = JSON.parse(JSON.stringify(this.handleTree(newList, "menuId")))
          this.loading = false;
        });
      },
      //返回事件
      outPageButton(){
        this.$parent.goPage(1);
      },
      //结构树转数组并筛选选中项
      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.checked){
              list.push(node)
            }
          }else{
            if(node.children){
              delete node.children
            }
            if(node.checked){
              list.push(node)
            }
          }
        }
        let idList = [];
        for(let i=0;i<list.length;i++){
          idList.push(list[i].menuId)
        }
        return idList
      }
    }
  }
</script>
<style scoped lang="scss">
  .smallProgramLimits{
    flex:1;
    display: flex;
    .public-form-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px 0 !important;
      .top-title-box{
        border-bottom:1px solid #E0E0E0;
        margin-bottom:20px;
        display: flex;
        p:nth-child(1){
          color:#0045AF;
          line-height:80px;
          margin-left:24px;
          font-size:18px;
          flex:1;
        }
        p:nth-child(2){
          border:1px solid #0045AF;
          color:#0045AF;
          width:80px;
          height:30px;
          text-align: center;
          font-size:16px;
          border-radius: 6px;
          line-height:30px;
          margin:25px 20px 0 0;
          cursor: pointer;
        }
      }
      .table-for-max-box{
        border:1px solid #D7D7D7;
        margin:0 20px;
        overflow: hidden;
        display: flex;
        flex: 1;
        flex-direction: column;
        *{
          margin:0;
          padding:0;
        }
        .table-title-box{
          background: rgba(1,131,250,0.1);
          display: flex;
          border-bottom:1px solid #D7D7D7;
          p{
            font-size:14px;
            font-weight:700;
            color:#333;
            line-height:48px;
            padding-left:20px;
          }
          p:nth-child(1){
            width:616px;
            /*border-right:1px solid #D7D7D7;*/
          }
        }
        .table-max-box{
          flex:1;
          display: flex;
          flex-direction: column;
          .for-max-big-box{
            display: flex;
            flex:1;
            .check-max-box{
              flex:1;
              border-right:1px solid #dedede;
              display: inline-block;
              width:240px;
              min-height:48px;
              position: relative;
              overflow: hidden;
              border-bottom:1px solid #D7D7D7;
              p{
                position: absolute;
                top:50%;
                left:20px;
                height:48px;
                line-height:48px;
                margin-top:-24px;
              }
            }
            .for-max-box:nth-child(1){
              border-top:none!important;
            }
            .for-max-box{
              flex:1;
              display: flex;
            }
          }
        }
        .table-for-big-box{
          border-top:1px solid #D7D7D7;
          display: flex;
          font-size:14px;
          .max-title-box-null{
            width:616px!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:386px!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{
                flex:1;
                padding:14px 0 0 20px;
                div{
                  display: inline-block;
                  margin:0 20px 14px 0;
                }
              }
              .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{
                    display: flex;
                    flex-direction: column;
                    border-right:1px solid #D7D7D7;
                    min-height:48px;
                    position: relative;
                    overflow: hidden;
                    .title-left-box{
                      width:205px;
                      display: flex;
                      .min-title-box-null{
                        flex:1;
                      }
                      p{
                        width:205px;
                        position: absolute;
                        top:50%;
                        left:20px;
                        height:48px;
                        line-height:48px;
                        margin-top:-24px;
                      }
                    }
                  }
                  .min-right-box{
                    flex:1;
                    padding:14px 0 0 20px;
                    div{
                      display: inline-block;
                      margin:0 20px 14px 0 ;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .bottom-button-box{
        display: flex;
        width:600px;
        margin:30px auto 10px;
        .null-p{
          flex:1;
        }
        .button-p-1{
          width:100px;
          margin-right:20px;
        }
        .button-p-2{
          width:100px;
          margin-right:20px;
        }
        .button-p-3{
          width:180px;
        }
      }
    }
  }
</style>
