<!-- 角色管理 -->
<template>
	<div class='roleManage'>
		<div style="height: 100%;">
			<el-row :gutter="30" style="height: 100%">
				<el-col :span="8" style="height: 100%">
					<div style="height: 100%">
						<el-input
										placeholder="输入关键字进行过滤"
										v-model="filterText">
						</el-input>
						<div class="companyTitle" @click="companyClick">
							<img src="../../assets/images/companyIcon.png"/>
							<span :style="{color: compantClick}">{{this.companyData.name}}</span>
						</div>
						<div style="height: 84%;border-right: 1px solid #a7acea;">
							<el-tree
											class="filter-tree"
											:data="data"
											:props="defaultProps"
											default-expand-all
											:expand-on-click-node="false"
											:filter-node-method="filterNode"
											@node-click="handleNodeClick"
											@current-node-key="currentDepartment"
											ref="tree">
							</el-tree>
						</div>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="roleTableDiv">
						<el-table
										:data="tableRoleData"
										border
										align="center"
										style="width: 100%">
							<el-table-column
											align="center"
											prop="department"
											label="部门名称">
							</el-table-column>
							<el-table-column
											align="center"
											prop="name"
											label="角色名称">
							</el-table-column>
							<el-table-column
											align="center"
											prop="description"
											label="角色描述">
							</el-table-column>
							<el-table-column
											align="center"
											prop="authorities"
											label="拥有权限">
								<template slot-scope="scope">
									<span v-for="(item, index) in scope.row.authorities" :key="index">{{item.name}}<span v-show="(index + 1) !== scope.row.authorities.length">、</span></span>
								</template>
							</el-table-column>
							<el-table-column
											label="操作"
											align="center"
											width="200">
								<template slot-scope="scope">
									<div class="roleBtnStyle">
										<el-button @click="editRole(scope.row)"  size="small">编辑<i class="el-icon-edit-outline"></i></el-button>
										<el-button style="background: #EE4B4C" @click="deleteRole(scope.row)" size="small">删除<i class="el-icon-delete"></i></el-button>
									</div>
								</template>
							</el-table-column>
						</el-table>
						<div style="text-align: center;margin-top: 20px;">
							<el-button type="primary" icon="el-icon-plus" @click="addRole">新增</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<roleDialog :showRoleDialog="showRoleDialog" :authorityLists="authorityLists" :roleDetails="roleDetails" ref="dialogRole" @close="closeRoleDialog"></roleDialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import roleDialog from '../../components/roleDialog';
	export default {
		name: "RoleManage",
//import引入的组件需要注入到对象中才能使用
		components: {roleDialog},
		data () {
//这里存放数据
			return {
				defaultProps: {
					children: 'departments',
					label: 'name'
				},
				filterText: '',
				data: [],
				tableRoleData: [],
				showRoleDialog: false,
				roleDetails: {
					name: '',
					isLeader: '',
					description: '',
					authorities: [],
					department: ''
				},
				currentDepartment: '', // 当前
				authorityLists: [],
				companyData: '',
				compantClick: '#000000'
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			companyClick() { // 获取部门
				let data = JSON.parse(JSON.stringify(this.companyData));
				this.compantClick = '#5059d5';
				this.$axios.postDepartmentList().then((res) => {
					if (res.request.status === 200) {
						this.data = res.data[0].departments;
					}
				})
				this.handleNodeClick(data);
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.name.indexOf(value) !== -1;
			},
			postDepartmentList() {
				this.$axios.postDepartmentList().then((res) => {
					// console.log(res)
					if (res.request.status === 200) {
						this.companyData = res.data[0];
						this.data = res.data[0].departments;
						if (res.data[0].departments.length > 0) {
							this.currentDepartment = res.data[0].departments[0];
							this.handleNodeClick(res.data[0].departments[0]);
						} else {
							this.currentDepartment = res.data[0];
							this.handleNodeClick(res.data[0])
						}
					}
				})
			},
			handleNodeClick(data) {
				// console.log(data);
				if (JSON.stringify(data) === JSON.stringify(this.companyData)) {
					this.compantClick = '#5059d5';
				} else {
					this.compantClick = '#000000';
				}
				this.currentDepartment = data;
				this.$axios.getRoleFindDepartment(data.id).then((res) => {
					// console.log(res)
					if (res.request.status === 200) {
						res.data.forEach((v, i) => {
							v.department = data.name;
						})
						this.tableRoleData = res.data;
					}
				})
			},
			addRole() {
				// console.log(this.currentDepartment.id)
				this.roleDetails = {
					name: '',
					isLeader: '',
					description: '',
					authorities: [],
					departmentId: this.currentDepartment.id
				}
				this.showRoleDialog = true;
			},
			editRole(val) {
				// console.log(val);
				this.showRoleDialog = true;
				this.roleDetails = val;
			},
			deleteRole(val) {
				// console.log(val)
				this.$axios.deleteRole(val.id).then((res) => {
					// console.log(res)
					if (res.request.status === 200) {
						this.$message({
							message: '删除角色成功!',
							type: 'success'
						});
						this.handleNodeClick(this.currentDepartment);
					}
				})
			},
			closeRoleDialog() {
				this.showRoleDialog = false;
				this.handleNodeClick(this.currentDepartment);
			},
			getAuthorityList() {
				this.$axios.putAuthority().then((res) => {
					// console.log(res)
					if (res.request.status === 200) {
						this.authorityLists = res.data;
					}
				})
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.postDepartmentList();
			this.getAuthorityList();
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.roleManage{
		height: 99%;
		margin-top: 30px;
	}

	.leftTreeTitle{
		height: 60px;
		text-align: center;
		border-bottom: 1px solid #dedede;
		line-height: 60px;
		font-size: 30px;
	}

	.companyTitle{
		line-height: 40px;
		margin: 10px 0;
		font-size: 20px;
		cursor: pointer;
	}

	.companyTitle:hover{
		color: #5059D5;
	}

	.companyTitle img{
		width: 21px;
		margin-right: 10px;
		margin-bottom: 3px;
	}

	.roleTableDiv{
		/*margin-top: 30px;*/
	}

	/deep/ .el-tree .is-current{
		color: #5059D5;
	}

	/deep/ .el-tree .is-current .el-tree-node__children{
		color: #000;
	}

	.roleBtnStyle /deep/ .el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #5059D5;
		border: none;
		color: #FFF;
		-webkit-appearance: none;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		-webkit-transition: .1s;
		transition: .1s;
		font-weight: 500;
		padding: 10px 15px;
		font-size: 16px;
		border-radius: 20px;
		margin-right: 10px;
		box-shadow: 3px 1px 3px #D3D3D3;
	}
</style>
