<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:{
               	RoleId:0
               },
               updateMsg:{
               	RoleId:0,
               	Permission:[],
               },
               firstLevel:0,
               secondLevel:0,
			   secondChkAllState:false,
			   
			   //功能菜单
			   actionList:[],
			}
		},
		mounted() {
		    this.updateMsg.RoleId=this.msg.RoleId = this.$route.query.id
		    let sysId=this.$route.query.sysId
			this.getMenu()
			this.getActionMenu();
		},
		methods: {
			getActionMenu() {
				this.apipost("admin_get_RoleGetPostPermissionAction", this.updateMsg, res => {
					if(res.data.resultCode == 1) {
						let tempList=res.data.data;
						this.actionList = tempList;
					}else{}
				}, err => {})
			},
			getMenu() {
				this.apipost("admin_get_RoleGetPostPermission", 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_RoleUpdateRolePermission", 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
			},
			//保存功能管理
			saveAction() {
				this.updateMsg.Permission=[]
				this.getCkdActionId(this.actionList);
				this.apipost("admin_post_RoleUpdateRolePermissionAction", this.updateMsg, res => {
					if(res.data.resultCode == 1) {
					 this.$message.success('保存成功！')
					}else{
						this.$message.error('保存失败！')
					}
				}, err => {})
			},

			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>