<template>
	<el-container class="mainBox">
		<el-header>
			<div class="left-panel">
				<el-button type="primary" :size="size" @click="savePermission">保存权限</el-button>
			</div>
			<div class="right-panel"><div class="companyName">{{name}}</div></div>
		</el-header>
		<el-main class="nopadding" v-loading="loading" element-loading-text="加载中...">
			<el-scrollbar>
				<div class="treeTable">
					<div :class="list.length===0?'thenTitle thenTitleBottom':'thenTitle'">
						<div class="tr">
							<div class="th module">功能模块</div>
							<div class="th check"><el-checkbox :indeterminate="isCheckFun" @change="allCheckChange" v-model="checkedFun" :size="size" /></div>
							<div class="th thFlex">
								<div class="menu name">菜单</div>
								<div class="th authority">数据操作权限</div>
							</div>
						</div>
					</div>
					<div class="tableBody">
						<div class="tr" v-for="(item,index) in list" :key="index">
							<div class="td module">{{item.meta.title}}</div>
							<div class="td check"><el-checkbox v-model="item.checked" :indeterminate="item.isCheck" @change="menuCheckChange(item)" :size="size" /></div>
							<div class="td tdChild">
								<div class="nextTd" v-for="(em,ind) in item.children" :key="ind">
									<div class="tdName menu">
										<el-checkbox @change="moduleCheckChange(item,em)" :indeterminate="em.isCheck" v-model="em.checked" :size="size">{{em.meta.title}}</el-checkbox>
									</div>
									<div class="tdName authority">
										<div class="childTr">
											<div class="preBox" v-for="(li,lidex) in em.meta.data_permission" :key="lidex">
												<span v-if="li.title.length<9">
													<el-checkbox @change="checkChange(item,em)" v-model="li.checked" :size="size"><span class="name">{{li.title}}</span></el-checkbox>
												</span>
												<el-tooltip :content="li.title" placement="top" v-else>
													<el-checkbox @change="checkChange(item,em)" v-model="li.checked" :size="size"><span class="name">{{li.title}}</span></el-checkbox>
												</el-tooltip>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "addPermission",
	data(){
		return{
			size:'small',
			id: this.$route.query.id,
			name:this.$route.query.name,
			list:[],
			loading:false
		}
	},
	computed:{
		isCheckFun(){
			let isTrue = false;
			let num = this.list.length;
			let checkNum = this.list.filter((item)=>item.checked).length;
			let isCheckNum = this.list.filter((item)=>item.isCheck).length;

			isTrue = checkNum>0 && checkNum == num?false:checkNum>0 || isCheckNum>0 ? true:false;
			return isTrue
		},
		checkedFun(){
			let isTrue = false;
			let num = this.list.length;
			let checkNum = this.list.filter((item)=>item.checked).length;

			isTrue = checkNum>0 && checkNum == num?true:false;
			return isTrue
		}
	},
	mounted() {
		this.getPermission();
	},
	methods:{
		async getPermission() {
			let params = {
				company_id:this.id
			}
			this.loading = true;
			const res = await this.$API.system.company.permission.post(params);
			this.loading = false;
			res.data.forEach(item=>{
				if(item.children){
					item.children.forEach(em=>{
						if(em.meta.data_permission && em.meta.data_permission.length>0){
							let check = em.meta.data_permission.filter((li)=>li.checked).length;
							let ed = em.meta.data_permission.length;
							em.isCheck = check>0 && check != ed?true:false;
							if(ed>0){
								em.checked = check>0 && check== ed?true:false;
							}
						}
					})
					let check = item.children.filter((em)=>em.checked).length;
					let isCheck = item.children.filter((em)=>em.isCheck).length;
					let ed = item.children.length;
					item.isCheck = (check>0 && check != ed) || (isCheck>0 && check!=ed)?true:false;
					item.checked =  check>0 && check== ed?true:false;
				}
			})
			this.list = res.data;
		},
		allCheckChange(e){
			this.list.forEach(item=>{
				item.checked = e;
				if(item.children){
					item.children.forEach(em=>{
						em.checked = e;
						if(em.meta.data_permission && em.meta.data_permission.length>0){
							em.meta.data_permission.forEach((li)=>{
								li.checked = e;
							})
						}
						if(em.checked){
							em.isCheck = false;
						}
					})
					if(item.checked){
						item.isCheck = false;
					}
				}
			})
		},
		menuCheckChange(e){
			this.list.forEach(item=>{
				if(e.id == item.id){
					if(item.children){
						item.children.forEach(em=>{
							em.checked = e.checked;
							if(em.meta.data_permission && em.meta.data_permission.length>0){
								em.meta.data_permission.forEach((li)=>{
									li.checked = e.checked;
								})
							}
							if(em.checked){
								em.isCheck = false;
							}
						})
					}
					if(item.checked){
						item.isCheck = false;
					}
				}
			})
		},
		moduleCheckChange(pre,e){
			this.list.forEach(item=>{
				if(pre.id == item.id){
					if(item.children){
						item.children.forEach(em=>{
							if(em.id == e.id){
								if(em.meta.data_permission && em.meta.data_permission.length>0){
									em.meta.data_permission.forEach((li)=>{
										li.checked = e.checked;
									})
								}
								if(e.checked){
									e.isCheck = false;
								}
							}
						})
						let check = item.children.filter((em)=>em.checked).length;
						let isCheck = item.children.filter((em)=>em.isCheck).length;
						let ed = item.children.length;
						item.checked = check>0 && check == ed?true:false;
						item.isCheck = (check>0 || isCheck>0) && ed!=check?true:false;
					}
				}
			})
		},
		checkChange(max,pre){
			this.list.forEach(item=>{
				if(item.id == max.id){
					if(item.children){
						item.children.forEach((em)=>{
							if(pre.id == em.id){
								let check = em.meta.data_permission.filter((em)=>em.checked).length;
								let ed = em.meta.data_permission.length;
								em.checked = check>0 && check == ed?true:false;
								em.isCheck = check>0 && check != ed?true:false;
							}
						})
					}
					let check = item.children.filter((em)=>em.checked).length;
					let isCheck = item.children.filter((em)=>em.isCheck).length;
					let ed = item.children.length;
					item.checked = check>0 && check == ed?true:false;
					item.isCheck = (check>0 || isCheck>0) && ed!=check?true:false;
				}
			})
		},
		async savePermission() {
			let params = this.setList();
			const res = await this.$API.system.company.moduleAdd.post(params);
			if(res.code == 200){
				this.$message.success("授权成功");
				await this.getPermission();
			}
		},
		setList(){
			let obj = {
				company_id:this.id,
				menu_permission:[],
				data_permission:[]
			}
			this.list.forEach(item=>{
				if(item.checked || item.isCheck){
					obj.menu_permission.push(item.meta.code);
				}
				if(item.children){
					item.children.forEach(em=>{
						if(em.checked || em.isCheck){
							obj.menu_permission.push(em.meta.code);
						}
						if(em.meta.data_permission && em.meta.data_permission.length>0){
							let list = em.meta.data_permission.filter(e=>e.checked).map(u=>{
								let obj = {
									actions:u.actions,
									title:u.title
								}
								return obj
							});
							if(list.length>0){
								obj.data_permission.push({[em.meta.code]:list})
							}
						}
						if(em.children && em.children.length>0){
							em.children.forEach(daList=>{
								if(em.checked || em.isCheck && daList.meta.hidden){
									obj.menu_permission.push(daList.meta.code);
								}
							})
						}
					})
				}
			})
			return obj
		}
	}
}
</script>

<style lang="scss" scoped>
.companyName{
	color: var(--el-color-primary);
	font-size: 14px;
}
.nopadding{
	padding: 10px 0;
}
.module{
	flex-basis: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.check{
	flex-basis: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menu{
	flex-basis: 180px;
}
.authority{
	flex:1;
	text-align: center;
}
.treeTable{
	border: 1px solid var(--el-border-color-light);
}
.thenTitle .tr {
	display: flex;
	align-items: stretch;
	border-bottom:1px solid var(--el-border-color-light);
	height: 40px;
	background: var(--el-bg-color-overlay);
	.th{
		padding: 0 10px;
		border-left: 1px solid var(--el-border-color-light);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.th:first-child{
		border-left: none;
	}
	.thFlex{
		display: flex;
		flex: 1;
		padding: 0;
		.name{
			flex-basis: 180px;
			padding: 10px;
		}
	}
}
.thenTitleBottom .tr{
	border-bottom: 0;
}
.tableBody .tr{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom:1px solid var(--el-border-color-light);
	.td{
		padding: 0 10px;
		border-left: 1px solid var(--el-border-color-light);
		.nextTd{
			display: flex;
			align-items: center;
			border-bottom:1px solid var(--el-border-color-light);
		}
		.nextTd:last-child{
			border-bottom: 0;
		}
	}
	.td:first-child{
		border-left: 0;
	}
	.tdChild{
		flex: 1;
		padding: 0;
		border-left: 1px solid var(--el-border-color-light);
		.tdName:last-child{
			border-left: 1px solid var(--el-border-color-light);
		}
		.tdName{
			padding: 0 10px;
			min-height: 33px;
			display: flex;
			align-items: center;
		}
		.childTr{
			display: flex;
			flex-wrap: wrap;
			flex: 1;
			.preBox{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-right: 20px;
				width: 110px;
				.name{
					width: 100px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					display: block;
					text-align: left;
				}
			}
		}
	}
}
.tableBody .tr:last-child{
	border-bottom: 0;
}

</style>
