<template>
	<el-container class="mainBox">
		<el-header>
			<div class="left-panel">
				<span class="roleName">{{name}}</span>角色信息：
				<template v-for="(item,index) in user_roles" :key="index">
					<span class="roleTag">
						<el-tag class="ml-2" :type="index==1?'success':index==2?'info':index==3?'danger':index==4?'warning':''">{{item}}</el-tag>
					</span>
				</template>
			</div>
			<div class="right-panel">
				<el-alert title="个人用户权限不可编辑，需要编辑请到到角色编辑对应的权限" type="warning" :closable="false" />
			</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" :disabled="showPermission" 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)" :disabled="showPermission" :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" :disabled="showPermission" :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,li)" v-model="li.checked" :disabled="showPermission" :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,li)" v-model="li.checked" :disabled="showPermission" :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: "",
	data(){
		return{
			size:'default',
			id: this.$route.query.id,
			name:this.$route.query.name,
			user_roles:[],
			list:[],
			showPermission:false,
			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 = {
				user_id:this.id
			}
			this.loading = true;
			const res = await this.$API.system.user.userPermission.post(params);
			this.loading = false;
			this.user_roles = res.data && res.data.role?res.data.role:[];
			if(res.data && res.data.menu && res.data.menu.length>0){
				res.data.menu.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.menu;
			}
		},
		allCheckChange(){
			return
		},
		menuCheckChange(em){
			em.checked = !em.checked;
			return
		},
		moduleCheckChange(_a,em){
			em.checked = !em.checked;
			return
		},
		checkChange(_a,_b,em){
			em.checked = !em.checked;
			return
		}
	}
}
</script>

<style lang="scss" scoped>
.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;
		}
		.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;
}
.roleName{
	color: var(--el-color-primary);
	margin-right: 10px;
}
.roleTag{
	margin-right: 10px;
}
</style>
