<template>
	<div class="authManage_container">
		<div class="auth_cont_top">
			<span>角色</span>
			<el-select v-model="role" placeholder="请选择角色" style="width:360px;marginLeft:30px;">
				<el-option
					v-for="item in roleList"
					:key="item"
					:label="item.RoleName"
					:value="item.RoleId">
				</el-option>
			</el-select>
		</div>
		<div class="auth_bot">
			<div class="menu_auth_cont">
				<h3 style="color:#333;fontSize:14px;">菜单权限</h3>
				<ul class="menu_lists">
					<li v-for="item in authList" :key="item.id" class="menu_item">
						<el-checkbox  :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAll(item)" :disabled="isLook">{{item.Name}}</el-checkbox>
						<div style="min-height:238px;marginTop: 15px; padding:30px 60px 10px 30px;border:1px solid #DCDFE6;width:220px;" v-if="item.Child">
							<el-checkbox-group v-model="item.CheckList" @change="handleChecked(item)" :disabled="isLook">
								<el-checkbox v-for="list in item.Child" :label="list.MenuId" :key="list.MenuId">{{list.Name}}</el-checkbox>
							</el-checkbox-group>
						</div>
					</li>
				</ul>
			</div>
			<div class="menu_auth_cont" style="marginTop:30px;" v-if="isShowCheck">
				<h3 style="color:#333;fontSize:14px;marginRight:30px;">功能权限</h3>
				<ul class="menu_lists">
					<template v-for="(item,index) in btnList">
						<li :key="index" class="menu_item" v-if="item.isSHow">
							<span :style="`fontSize:14px;color:${isLook?'#C0C4CC':'#333'}`">{{item.name}}</span>
							<div style="min-height:238px;marginTop: 15px; padding:30px 60px 10px 30px;border:1px solid #DCDFE6;width:220px;">
								<el-checkbox-group v-model="btnCheck" :disabled="isLook" @change="handleChecked2()">
									<el-checkbox v-for="list in item.List" :label="list.MenuButtonId" :key="list.MenuButtonId">{{list.ButtonName}}</el-checkbox>
								</el-checkbox-group>
							</div>
						</li>
					</template>
				</ul>
			</div>
			<el-row :span="24" justify="center" type="flex" style="marginTop:90px;">
				<el-button  type="primary" style="marginRight:50px;width:140px;" @click="saveAuth" v-if="!isLook">确定</el-button>
				<!-- <el-button  type="primary" plain @click="$router.replace({path:'/Sysrole'})">返回</el-button> -->
			</el-row>
		</div>
	</div>
</template>

<script>
import {departInterence} from '@/api/api.js';
export default {
	name:'',
	components: {},
	data () {
		return {
			role:'',//角色
			roleList:[],//角色列表
			authList:[],//权限列表
			checkList:[],
			isShowCheck:false,//是否显示功能列表
			isLook:false,//是否是查看权限
			btnList:[],//功能权限列表
			btnCheck:[],
			loading:null,//loading
		};
	},
	watch:{
		/* 检测权限列表联动功能列表 */
		'authList': {
			handler(newVal) {
				newVal.forEach(item => {
					/* 选中菜单显示对应的功能权限 */
					if(this.btnList.length) {
						let B_arr =[]
						this.btnList.forEach(item2 => {
							/* 选中的有审核列表或客户列表 */
							B_arr.push(item.CheckList.indexOf(item2.MenuId) !== -1)
							if(item.CheckList.indexOf(item2.MenuId) !== -1) {
								item2.isSHow = true;
							}else {
								item2.isSHow = false;
							}
						})
						let bol = B_arr.some(item => {
							return item
						})
						if(bol) {
							this.isShowCheck = true;
						}else {
							this.isShowCheck = false;
						}
					}
				})
			},
			deep:true,
		},
		// 监测角色改变对应的权限也改变
		role() {
			this.loading = this.$loading({
				lock: true,
				target:'.authManage_container',
				text: '切换角色中...',
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.8)'
			});
			this.getBtnList();
		}
	},
	methods: {
		/* 获取已有角色列表 */
		getRoles() {
			departInterence.getRole().then(res => {
				if(res.Ret === 200) {
					this.roleList = res.Data.List;
					if(res.Data.List.length && !this.role) {
						this.role = res.Data.List[0].RoleId
					}
				}
			})
		},
		/* 根据角色id获取已有权限 */
		getAuth() {
			departInterence.getAuthList({
				RoleId:Number(this.role)
			}).then(res => {
				if(res.Ret === 200) {
					let list = [];
					res.Data.List.length&&res.Data.List.forEach(item => {
						item.CheckList = item.CheckList || [];
						let obj;
						if(item.Child && item.Child.length) {
							obj = {
								checkAll:item.CheckList&&item.CheckList.length===item.Child.length?true:false,
								isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Child.length,
								...item,
							}
						}else {
							obj = {
								...item,
							}
						}
						list.push(obj)
					})
					this.authList = list;
					if(this.loading) {
						setTimeout(()=> {
							this.loading.close();
						},300)
					}
				}
			})
		},
		/* 获取功能列表 */
		getBtnList() {
			departInterence.getBtnAuth({
				RoleId:Number(this.role)
			}).then(res => {
				if(res.Ret === 200) {
					this.btnCheck = res.Data.CheckList;
					//处理结构
					let filterArr = [];
					res.Data.List.forEach(item => {
						let obj = {
							isSHow:false,
							...item
						}
						filterArr.push(obj)
					})
					this.btnList = filterArr;
					/* 先获取功能权限再获取菜单权限 监听菜单权限控制功能权限的显示和隐藏 */
					this.getAuth();
				}
			})
		},
		/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// console.log(item)
			// 取到所有的子菜单id
			let ids = item.Child.map(item =>{
				return item.MenuId
			})
			item.CheckList = item.checkAll ? ids : [];	
        	item.isIndeterminate = false;
		},
		/* 复选框組选中时 */
		handleChecked(item) {
			let len = item.CheckList.length;
			item.checkAll = len === item.Child.length;
			item.isIndeterminate = len > 0 && len < item.Child.length;
		},
		/* 功能复选框 */
		handleChecked2() {
			// console.log(this.btnCheck)
		},
		// 保存
		saveAuth() {
			let checkArr = [];
			this.authList.forEach(item => {
				if(item.CheckList.length) {
					checkArr.push(item.MenuId)
					checkArr.push(item.CheckList)
				}
			})
			// console.log(checkArr.flat(2).join(','))
			// console.log(this.btnCheck)	
			let MenuButtonIdStr = Array.from(new Set(this.btnCheck));//去重
			let params = {
				MenuIdStr:checkArr.flat(2).join(','),
				RoleId:Number(this.role),
				MenuButtonIdStr:MenuButtonIdStr.join(',')
			}
			departInterence.saveAuth(params).then(res => {
				if(res.Ret === 200) {
					this.$message.success(res.Msg);
					// this.getAuth();
					this.getBtnList();
				}
			})
		}
	},
	created() {
		//只查看权限 不可编辑
		if(this.$route.query.id) {
			this.role = Number(this.$route.query.id);
			this.isLook = true;
		}
	},
	mounted() {
		this.getRoles();
		// this.getBtnList()
	},
}
</script>
<style lang='scss' >
.authManage_container {
	* {
		box-sizing: border-box;
	}
	// reset
	.el-checkbox__input.is-disabled+span.el-checkbox__label {
		color: #666 !important;
	}
	.el-checkbox-group .el-checkbox{
		margin-bottom: 20px !important;
	}
	.auth_cont_top {
		font-size: 16px;
		color: #333;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		border: 1px solid #ECECEC;
		padding: 20px 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.auth_bot {
		min-height: calc(100vh - 224px);
		padding: 30px;
		background: #fff;
		margin-top: 20px;
		position: relative;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
		.menu_lists {
			margin-top: 30px;
			font-size: 16px;
			display: flex;
			flex-wrap: wrap;
			.menu_item {
				margin-right: 80px;
				margin-bottom: 30px;
			}
		}
		.auth_Handle {
			display: flex;
			align-items:center;
		}
	}
}
</style>