<template>
	<!-- 角色配置 -->
	<div class="pageBody">
		<el-row class="h100">
			<el-col :span="12" class="h100">
				<div class="role">
					<div class="roleHead">
						<el-button type="primary" @click="addRole">添加角色</el-button>
					</div>
					<div class="roleBody" v-loading="roleLoading">
						<ul class="roleName">
							<li v-for="(item,index) in roleList" :key="index" :class="[ item.status == 0 ? 'open' : 'close']" @click.stop="getRoleMenu(item)">
								<p class="name">{{item.name}} <span v-show="item.status == 2" class="status">[已禁用]</span></p>
								<p class="desc">{{item.description}}</p>
								<span class="action">
									<el-button type="primary" icon="el-icon-edit" circle size="mini" title="编辑" @click.stop="edit(item)"></el-button>
									<el-button type="danger" icon="el-icon-delete" circle size="mini" title="删除" @click.stop="del(item)"></el-button>
									<el-button type="info" icon="el-icon-remove" circle size="mini" title="禁用" @click.stop="edStatus(item)"></el-button>
								</span>
							</li>
						</ul>
					</div>
				</div>
			</el-col>
			<el-col :span="12" class="h100">
				<div class="role">
					<div class="roleHead">
						<el-button type="primary">角色权限配置</el-button>
					</div>
					<div class="roleBody">
						<div class="roleTree">
							<div class="roleTreeHead">
								{{activeTreeLable}}  
									<el-button 
										type="primary" 
										@click="saveTree" 
										v-show="roleTree.length > 0" 
										size="small" 
										class="fr saveTree">保存</el-button>
							</div>
							<div class="roleTreeBody" v-loading="roleTreeLoading">
								<el-tree
								  :data="roleTree"
								  node-key="id"
								  ref="tree"
								  :show-checkbox="true"
								  :default-checked-keys="checkedkey"
								  :default-expand-all="true"
								  :props="optionProps"
								  @check-change="checkChange">
								</el-tree>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<addedit-mobiel
			v-if="modal.visible"
			:modalTitle="modal.title"
			:modalVisible="modal.visible"
			:action="modal.action"
			:editData='editData'
			@closeModal="closeModal"
		></addedit-mobiel>
	</div>
</template>

<script>
import addeditMobiel from './modal/addeditMobiel'
export default {
	components:{
		addeditMobiel
	},
	data() {
		return {
			modal:{
				title:'角色增加',
				visible:false,
				action:''
			},
			roleLoading:true,
			roleTreeLoading:false,
			roleList:{},
			editData:{},
			roleTree:[],
			checkedkey:[],
			activeTreeLable:'后台管理权限',
			activeRoleId:'',
			optionProps: {
				children: 'children',
				label: 'name'
			}
		};
	},
	created() {
		this.getRoleList()
	},
	methods:{
		addRole(){
			this.modal.title = "角色添加"
			this.modal.visible = true
			this.modal.action = 'add'
		},
		edit(item){
			this.modal.title = "角色编辑"
			this.modal.visible = true
			this.modal.action = 'edit'
			this.editData = item
		},
		del(item){
			this.$confirm('此操作将永久删除此角色, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				let params = {
					roleId:item.id
				}
				this.$port.delRole(params).then(res =>{
					if(!res.code){
						this.$message({
							type: 'success',
							message: '删除成功!',
							duration:800
						});
						this.getRoleList()
					}
				})
			}).catch(() => {
			            
			});
		},
		edStatus(item){
			if(item.status == 0){
				item.status = 2
			}else if(item.status == 2){
				item.status = 0
			}
			let params = {
				status:item.status,
				id:item.id
			};
			this.$port.updateRoleItem(params).then(res => {
				if(!res.code){
					this.$message({
					  message: item.status == 0 ? '该角色已被开启!':'该账号已被禁用!',
					  type: 'success',
					  duration:800
					});
				}
			})
		},
		getRoleList(){
			this.roleLoading = true
			this.$port.getRoleList()
				.then(res=>{
					this.roleLoading = false
					if(!res.code){
						this.roleList = res.list
					}
				})
		},
		getRoleMenu(item){
			this.roleTreeLoading = true
			this.activeRoleId = item.id
			let params = {
				roleId:item.id
			}
			this.$port.getRoleMenu(params)
				.then(res => {
					this.roleTreeLoading = false
					let tree = res.list.filter(v => v.sysId === '900004')  //只显示后台管理权限菜单
					this.roleTree = tree[0].list
					console.log(tree[0])
					let checkedList = tree[0].checkedList
					this.activeTreeLable = item.name + "-" +  tree[0].sysName
					if(checkedList.length >0){
						this.checkedkey = []
						this.$nextTick(()=>{
							this.checkedkey = checkedList
						})
					}else{
						this.checkedkey = []
						this.$refs.tree.setCheckedKeys([]);
					}
				})
		},
		//保存权限
		saveTree(){
			const loading = this.$loading({
				  lock: true,
				  text: '正在努力保存!',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
			});
			let sourceTree = this.roleTree
			let activeKeyArr = this.$refs.tree.getCheckedKeys()
			let aKey = this.getCheckedKeys(sourceTree,activeKeyArr, "id")
			let params = {
				roleId:this.activeRoleId,
				menuReq:aKey
			}
			this.$port.saveRoleMenu(params)
				.then(res=>{
					if(!res.code){
						setTimeout(() => {
						  loading.close();
						  this.$message({
						    message: '权限菜单已保存!',
						    type: 'success',
							duration:800
						  });
						}, 1000);
					}
				})
		},
		//点击子节点获取父节点id
		getCheckedKeys (data, keys, key) {
			// console.log(data,keys,key)
			let res = [];
			recursion(data, false);
			return res;
			// arr -> 树形总数据
			// keys -> getCheckedKeys获取到的选中key值
			// isChild -> 用来判断是否是子节点
			function recursion (arr, isChild) {
				let aCheck = [];
				for ( let i = 0; i < arr.length; i++ ) {
					let obj = arr[i];
					aCheck[i] = false;
					if ( obj.children ) {
						aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
						if ( aCheck[i] ) {
							res.push(obj[key]);
						}
					}
					for ( let j = 0; j < keys.length; j++ ) {
						if ( obj[key] == keys[j] ) {
							aCheck[i] = true;
							if ( res.indexOf(obj[key]) == -1 ) {
								res.push(obj[key]);
							}
							break;
						}
					}
				}
				if ( isChild ) {
					return aCheck.indexOf(true) != -1;
				}
			}
		},
		checkChange(data, checked, indeterminate){
			// console.log(data, checked, indeterminate);
		},
		closeModal(flag = false){
			this.modal.visible = false
			flag && this.getRoleList()
		}
	}
};
</script>

<style scoped lang="less">
.h100 {
	height: 100%;
}
.fr{
	float:right;
}
.pageBody {
	height: 100%;
	overflow:hidden;
}
.role {
	height: 100%;
	border-right: 1px solid #dcdfe6;
	.roleHead {
		height: 60px;
		border-bottom: 1px solid #dcdfe6;
		text-align: center;
	}
	.roleBody {
		height:100%;
		overflow:auto;
		.roleName {
			margin: 0;
			padding:0 0 60px 0;
			list-style: none;
		}
		.roleName li {
			display: block;
			position: relative;
			height: 80px;
			margin: 0 15px;
			padding: 16px 15px 0 15px;
			border-bottom: 1px solid #dcdfe6;
			line-height:25px;
			cursor:pointer;
			p{
				font-size:14px;
			}
			p.name{
				color:#409EFF;
				.status{
					margin-left:10px;
					color:red;
					font-weight:block;
				}
			}
			p.desc{
				color:#999;
			}
		}
		.roleName li span.action {
			display: none;
			position: absolute;
			right: 10px;
			top: 25px;
		}
		.roleName li:hover {
			color: #1e9fff;
			background: #f5f5f5;
		}
		.roleName li:hover span.action {
			display: block;
		}
		.roleName li.close p{
			color:#dcdfe6;
		}
		.roleTree{
			.roleTreeHead{
				height:55px;
				line-height:55px;
				text-indent:15px;
				color:#666;
				border-bottom:1px dashed #ddd;
			}
			.roleTreeBody{
				padding:10px;
			}
		}
		.saveTree{
			margin:12px 30px 0 0;
		}
	}
}
</style>
