<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;
  }

  .per_first_menu {
    overflow: hidden;
  }

  .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;
  }

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

  .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;
  }

  .per_secondMenu {
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .per_secondMenu li {
    float: left;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    padding: 0 30px;
    position: relative;
  }

  .per_secondMenu li>div {
    width: 0;
    height: 3px;
    background: #F26262;
    margin: 5px auto 0;
  }

  .per_secondMenu li:hover>div {
    width: 17px;
    transition: width .3s;
  }

  .per_secondMenu li.per_secondLevelCked>div {
    width: 17px;
  }

  .per_secondMenu li .liSplit {
    height: 12px;
    width: 1px;
    background: #DCDFE6;
    position: absolute;
    right: 0;
    top: 2px;
  }

  .per_thirdMenu 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;
  }

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

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

  .per_thirdMenu li.thirdLevelMenuCked {
    background: #E95252;
    color: #f1f1f1;
  }

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

  .per_thirdLevelAllCked {
    float: right;
  }

</style>
<template>

  <div>
    <div class="per_title">权限设置</div>
    <div class="per_first_menu">
      <ul>
        <li v-model="item.IsShow" v-for="(item,index) in MenuList" @click="getSecondLevelMenu(index)"
          :class="{FirsrMenuCked:index==firstLevel}">
          <i :class="[fontPub,item.icon]"></i><br />{{item.MenuName}}
          <el-checkbox :indeterminate="item.choseParent" class="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="per_secondMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null">
        <li v-model="item.IsShow" :class="{per_secondLevelCked:index==secondLevel}"
          v-for="(item,index) in MenuList[firstLevel].ChildMenu" @click="getThirdLevelMenu(index)">{{item.MenuName}}
          <div></div><span class="liSplit"></span></li>
        <el-checkbox class='per_thirdLevelAllCked' @change='checkedAll($event)' v-model='secondChkAllState'>全选
        </el-checkbox>
      </div>
      <div class="per_thirdMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null">
        <li v-model="item.IsShow" @click="thirdLevelMenuCked(item)" :class="{thirdLevelMenuCked:item.IsShow}"
          v-for="(item,index) in MenuList[firstLevel].ChildMenu[secondLevel].ChildMenu">{{item.MenuName}}<i
            :class="[fontPub,item.icon]"></i></li>
      </div>
    </div>

    <div class="per_title">功能管理</div>
    <div class="per_first_menu">
      <ul>
        <li v-model="item.IsShow" v-for="(item,index) in actionList" @click="item.IsShow = !item.IsShow;">
          <i :class="[fontPub,item.icon]"></i><br />{{item.ActionName}}
          <el-checkbox class="per_firstLevelCkbox" type="checkbox" :value="item.IsShow" v-model="item.IsShow"
            v-bind:checked="item.IsShow"></el-checkbox>
        </li>
        <input type="button" value="保存" class="normalBtn per_SaveBtn" @click="saveAction()" />
      </ul>
    </div>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        fontPub: 'iconfont',
        MenuList: [],
        thirdLevelMenu: [],
        msg: {
          VersionsId: 0
        },
        updateMsg: {
          VersionsId: 0,
          Permission: [],
        },
        firstLevel: 0,
        secondLevel: 0,
        secondChkAllState: false,

        //功能菜单
        actionList: [],

      }
    },
    mounted() {
      this.updateMsg.VersionsId = this.msg.VersionsId = this.$route.query.id
      let sysId = this.$route.query.sysId
      this.getMenu();
      this.getActionMenu();
    },
    methods: {
      getActionMenu() {
        this.apipost("admin_get_GetVersionsPermissionAction", this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            let tempList = res.data.data;
            this.actionList = tempList;
          } else {}
        }, err => {})
      },
      getMenu() {
        this.apipost("admin_get_GetVersionsPermission", this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            let tempList = res.data.data
            tempList.forEach(x => {
              if (x.ParentId == 0) {
                let menuStyle = JSON.parse(x.MenuStyle)
                x.icon = menuStyle.icon
                x.color = menuStyle.color
                x.choseParent = false
                this.initParentChk(x)
                this.MenuList.push(x)
              }
            })
          } else {}
        }, err => {})
      },
      updateMenu() {
        this.MenuList.forEach(x => {})
        this.updateMsg.Permission = []
        this.getCkdId(this.MenuList);
        this.apipost("admin_post_UpdateVersionsPermission", this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success('保存成功！')
          } else {
            this.$message.error('保存失败！')
          }
        }, err => {})
      },
      //保存功能管理
      saveAction() {
        this.updateMsg.Permission = []
        this.getCkdActionId(this.actionList);
        this.apipost("admin_post_UpdateVersionsPermissionAction", this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success('保存成功！')
          } else {
            this.$message.error('保存失败！')
          }
        }, err => {})
      },

      getSecondLevelMenu(index) {

        this.firstLevel = index;
        this.secondLevel = 0;
        this.threeChange();
        this.getThirdLevelMenu(0);
      },
      getThirdLevelMenu(index) { //三级菜单
        this.secondLevel = index;
        this.MenuList[this.firstLevel].ChildMenu[index].ChildMenu.forEach(x => {
          let menuStyle = JSON.parse(x.MenuStyle)
          x.icon = menuStyle.icon
          x.color = menuStyle.color
          this.thirdLevelMenu.push(x)
        })
        this.threeChange()
      },
      thirdLevelMenuCked(item) {
        item.IsShow = !item.IsShow
        this.threeChange()
      },
      firstCheckAll() {
        this.MenuList[this.firstLevel].ChildMenu.forEach(x => {
          x.IsShow = this.MenuList[this.firstLevel].IsShow
          x.ChildMenu.forEach((item, index) => {
            item.IsShow = x.IsShow
          })
        })
        this.MenuList[this.firstLevel].choseParent = false
        this.threeChange()
      },
      checkedAll() {
        let thirdMenuLength = this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.length;
        let chkNo = 0;
        this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.forEach((item) => {
          if (item.IsShow == true)
            chkNo++
        })
        if (chkNo == thirdMenuLength) {
          this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.forEach((item) => {
            item.IsShow = false
          })
        } else {
          this.MenuList[this.firstLevel].ChildMenu[this.secondLevel].ChildMenu.forEach((item) => {
            item.IsShow = true
          })
        }
        this.threeChange()

      },
      threeChange() {
        let chkCount = 0
        let count = 0
        this.MenuList[this.firstLevel].ChildMenu.forEach((x, i) => {
          let secondCheckCount = 0
          x.ChildMenu.forEach((item, index) => {
            count++
            if (item.IsShow) {
              chkCount++
              secondCheckCount++
            }
          })
          if (this.secondLevel == i) {
            if (x.ChildMenu.length > 0) {
              this.secondChkAllState = x.ChildMenu.length == secondCheckCount
            } else
              this.secondChkAllState = false
          }
          x.IsShow = secondCheckCount > 0
        })

        this.MenuList[this.firstLevel].IsShow = chkCount > 0
        this.MenuList[this.firstLevel].choseParent = chkCount > 0 && chkCount < count
      },
      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.IsShow == 1 || x.IsShow == true) {
            this.updateMsg.Permission.push(x.MenuId)
            if (x.ChildMenu) {
              this.getCkdId(x.ChildMenu)
            }
          }
        })
      },
      //过滤获取功能管理id
      getCkdActionId(array) {
        array.forEach(x => {
          if (x.IsShow == 1 || x.IsShow == true) {
            this.updateMsg.Permission.push(x.Id);
          }
        })
      },
      goback() {
        history.back(-1)
      }
    }
  }

</script>