<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;
    margin-top: 5px;
    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;
  }

  .per_first_menu-set {
    overflow: hidden;
  }

  .per_first_menu-set li {
    float: left;
    margin-right: 30px;
    margin-top: 5px;
    position: relative;
    cursor: pointer;
    background: #fff;
    color: #999;
    width: 140px;
    font-size: 12px;
    height: 80px;
    padding: 0 10px;
    border-radius: 4px;
    border-bottom: 1px solid #eee
  }

  .per_first_menu-set li.FirsrMenuCked {
    background: #e95252;
    color: #f1f1f1;
  }

  .per_first_menu-set li i {
    font-size: 30px;
  }

</style>
<template>
  <div>
    <div class="per_title">{{$t('objFill.quanxianshezhi')}}</div>
    <div class="per_first_menu">
      <ul>
        <template v-for="(item,index) in MenuList">
          <li v-model="item.IsShow" @click="getSecondLevelMenu(index)" :key="`f_`+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>
        </template>
        <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.myOrdersAllType.baocuncdqxian')" placement="top-start">
          <el-button type="primary" class="normalBtn per_SaveBtn" :loading="saveLoading" @click="updateMenu()">
            {{$t('pub.saveBtn')}}</el-button>
        </el-tooltip>
      </ul>
    </div>
    <div class="per_detail_menu">
      <div class="per_secondMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null">
        <template v-for="(item,index) in MenuList[firstLevel].ChildMenu">
          <li v-model="item.IsShow" :class="{per_secondLevelCked:index==secondLevel}" :key="`f_`+firstLevel+`_s_`+index"
            @click="getThirdLevelMenu(index)">{{item.MenuName}}
            <div></div><span class="liSplit"></span></li>
        </template>
        <el-checkbox class='per_thirdLevelAllCked' @change='checkedAll($event)' v-model='secondChkAllState'>{{$t('system.table_chekAll')}}
        </el-checkbox>
      </div>
      <div class="per_thirdMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null">
        <template v-for="(item,index) in MenuList[firstLevel].ChildMenu[secondLevel].ChildMenu">
          <li v-model="item.IsShow" @click="thirdLevelMenuCked(item)" :class="{thirdLevelMenuCked:item.IsShow}"
            :key="`f_`+firstLevel+`_s_`+secondLevel+`_t_`+index">{{item.MenuName}}<i :class="[fontPub,item.icon]"></i>
          </li>
        </template>
      </div>
    </div>
    <el-row>
      <el-col :span="12">
        <div class="per_title">{{$t('objFill.gongnenggl')}}</div>
      </el-col>
      <el-col :span="12">
        <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.myOrdersAllType.baocungnengqx')" placement="top-start">
          <el-button type="primary" class="normalBtn per_SaveBtn" :loading="saveLoading" @click="saveAction()">
            {{$t('pub.saveBtn')}}</el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <div class="per_first_menu-set">
      <ul>
        <template v-for="(item,index) in actionList">
          <el-tooltip :key="`a_t_`+index" class="item" effect="dark" :content="item.Remarks" v-if="item.Remarks!=''"
            placement="top-start">
            <li v-model="item.IsShow" @click="item.IsShow = !item.IsShow" :key="`a_`+index">
              <el-checkbox type="checkbox" :value="item.IsShow" v-model="item.IsShow" v-bind:checked="item.IsShow">
              </el-checkbox>
              <i :class="[fontPub,item.icon]"></i>{{item.ActionName}}
              <div></div>
              <span>{{ item.ActionCode }}</span>
            </li>
          </el-tooltip>
        </template>
      </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: [],
        saveLoading: false,
      }
    },
    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;
          }
        }, 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.saveLoading = true;
        this.apipost("admin_post_UpdateVersionsPermission", this.updateMsg, res => {
          this.saveLoading = false;
          if (res.data.resultCode == 1) {
            this.$message.success(this.$t('tips.saveYes'))
          } else {
            this.$message.error(this.$t('objFill.baocunshibai'))
          }
        }, err => {
          this.saveLoading = false;
        })
      },
      //保存功能管理
      saveAction() {
        this.updateMsg.Permission = []
        this.getCkdActionId(this.actionList);
        this.saveLoading = true;
        this.apipost("admin_post_UpdateVersionsPermissionAction", this.updateMsg, res => {
          this.saveLoading = false;
          if (res.data.resultCode == 1) {
            this.$message.success(this.$t('tips.saveYes'))
          } else {
            this.$message.error(this.$t('objFill.baocunshibai'))
          }
        }, err => {
          this.saveLoading = false;
        })
      },
      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>