<style>
  .per_title {
    font-size: 14px;
    color: #333;
    border-left: 3px solid #E95252;
    height: 14px;
    line-height: 14px;
    margin: 40px 0;
    padding-left: 15px;
  }

  .mentTable {
    background: #BCBCBC;
    width: 100%;
    font-size: 14px;
  }

  .mentTable td {
    background: #fff;
    height: 30px;
  }

  .appMenu_per_first_menu {
    overflow: hidden;
  }

  .appMenu_per_first_menu li {
    float: left;
    margin-right: 30px;
    position: relative;
    cursor: pointer;
    background: #fff;
    color: #999;
    width: 80px;
    font-size: 12px;
    height: 60px;
    padding: 10px 0;
    border-radius: 4px;
    text-align: center;
  }

  .appMenu_per_first_menu li.FirsrMenuCked {
    background: #E95252;
    color: #f1f1f1;
  }

  .appMenu_per_first_menu li i {
    font-size: 30px;
    line-height: 35px;
  }

  .per_detail_menu {
    width: 100%;
    height: 300px;
    padding: 20px;
    margin: 40px 0;
    background: #fff;
    border-radius: 8px;
  }

  .appMenu_per_secondMenu li {
    float: left;
    margin: 0 50px 50px 0;
    width: 80px;
    cursor: pointer;
    height: 85px;
    padding: 15px 10px 0;
    position: relative;
    font-size: 12px;
    color: #666;
    text-align: center;
    border-radius: 4px;
    background: #EBEBEB;
  }

  .appMenu_per_secondMenu li i {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
  }

  .per_SaveBtn {
    float: right;
    margin-top: 50px;
    margin-left: 15px;
  }

  .appMenu_per_secondMenu li.secondLevelMenuCked {
    background: #E95252;
    color: #f1f1f1;
  }

  .appMenu_per_firstLevelCkbox {
    position: absolute !important;
    right: 3px;
    top: 0;
  }

  .appMenu_per_thirdLevelAllCked {
    float: right;
  }

  .appMenu_toolBarImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>

  <div>
    <div class="per_title">权限设置</div>
    <div class="appMenu_per_first_menu">
      <ul>
        <li v-model="item.IsShow" v-for="(item,index) in MenuList" @click="getSecondLevelMenu(index)"
            :class="{FirsrMenuCked:index==firstLevel}">
          <img class="appMenu_toolBarImg" :src="item.Image">
          <br/>{{item.MenuName}}
          <el-checkbox :indeterminate="item.choseParent" class="appMenu_per_firstLevelCkbox" type="checkbox"
                       :value="item.IsShow" v-model="item.IsShow"
                       @change="firstCheckAll" v-bind:checked="item.IsShow"></el-checkbox>
        </li>

        <input type="button" value="保存" class="normalBtn per_SaveBtn" @click="updateMenu()"/>
        <input type="button" value="返回" class="hollowFixedBtn per_SaveBtn" @click="goback"/>
      </ul>
    </div>
    <div class="per_detail_menu">
      <div class="appMenu_per_secondMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null">
        <li v-model="item.IsShow" @click="secondLevelMenuCked(item)" :class="{secondLevelMenuCked:item.IsShow}"
            v-for="(item,index) in MenuList[firstLevel].ChildMenu">
          <img class="appMenu_toolBarImg" :src="item.Image">
          <br/>{{item.MenuName}}
        </li>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        fontPub: 'iconfont',
        MenuList: [],
        thirdLevelMenu: [],
        msg: {
          RoleId: 0
        },
        updateMsg: {
          RoleId: 0,
          Permission: [],
        },
        firstLevel: 0,
        secondLevel: 0,
        secondChkAllState: false
      }
    },
    mounted() {
      this.updateMsg.RoleId = this.msg.RoleId = this.$route.query.id
      let sysId = this.$route.query.sysId
      this.getMenu()
    },
    methods: {
      getMenu() {
        this.apipost("admin_get_AppRoleGetPostPermission", this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            let tempList = res.data.data
            tempList.forEach(x => {
              if (x.ParentId == 0) {
                x.choseParent = false
                this.initParentChk(x)
                this.MenuList.push(x)
              }
            });
            this.addSaveMenuItem(this.MenuList);
          } else {
          }
        }, err => {
        })
      },
      addSaveMenuItem(array) {
        array.forEach(x => {
          if(x.IsShow){
            x.SaveMenuId = true;
          }else{
            x.SaveMenuId = false;
          }
          if (x.ChildMenu) {
            this.addSaveMenuItem(x.ChildMenu)
          }
        })
      },
      updateMenu() {
        this.updateMsg.Permission = []
        this.getCkdId(this.MenuList);
        this.apipost("admin_post_AppRoleUpdateRolePermission", this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success('保存成功！')
          } else {
            this.$message.error('保存失败！')
          }
        }, err => {
        })
      },
      getSecondLevelMenu(index) {
        this.firstLevel = index;
        //this.secondLevel = 0;
      },
      secondLevelMenuCked(item) {
        item.IsShow = !item.IsShow
        this.secondChange()
      },
      firstCheckAll() {
        if(this.MenuList[this.firstLevel].ChildMenu != null) {
          this.MenuList[this.firstLevel].ChildMenu.forEach(x => {
            x.IsShow = this.MenuList[this.firstLevel].IsShow;
          });
          this.secondChange();
        }else{
          this.MenuList[this.firstLevel].choseParent = false;
          this.MenuList[this.firstLevel].SaveMenuId = this.MenuList[this.firstLevel].IsShow;
        }
      },
      secondChange() {
        let secondMenuChoseCount = 0;
        this.MenuList[this.firstLevel].SaveMenuId =false;
        this.MenuList[this.firstLevel].ChildMenu.forEach((x, i) => {
          if (x.IsShow) {
            this.MenuList[this.firstLevel].SaveMenuId = true;
            x.SaveMenuId = true;
            secondMenuChoseCount++;
          }else{
            x.SaveMenuId = false;
          }
        });
        this.MenuList[this.firstLevel].IsShow = secondMenuChoseCount === this.MenuList[this.firstLevel].ChildMenu.length;
        this.MenuList[this.firstLevel].choseParent = secondMenuChoseCount > 0 && secondMenuChoseCount < this.MenuList[this.firstLevel].ChildMenu.length;
      },
      initParentChk(p) {
        if (!p.ChildMenu || p.ChildMenu.length == 0 || p.ChildMenu)
          return
        let chkCount = 0
        let count = 0
        p.ChildMenu.forEach(x => {
          x.ChildMenu.forEach((item, index) => {
            count++
            if (item.IsShow) {
              chkCount++
            }
          })
        })
        p.choseParent = chkCount > 0 && chkCount < count
        p.IsShow = chkCount > 0
      },
      getCkdId(array) {
        array.forEach(x => {
          if (x.SaveMenuId == 1 || x.SaveMenuId == true) {
            this.updateMsg.Permission.push(x.MenuId)
            if (x.ChildMenu) {
              this.getCkdId(x.ChildMenu)
            }
          }
        })
      },
      goback() {
        history.back(-1)
      }
    }
  }
</script>