<!-- 角色添加修改 -->
<template>
	<div class='roleDialog'>
		<el-dialog title="" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogRoleVisible">
			<div slot="title" class="header-title">
				<span class="dialogHeader">{{dialogName}}</span>
				<img @click="closeDialog('roleForm')" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
			</div>
			<div class="roleDivs">
				<el-form :hide-required-asterisk="true" :model="roleForm" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="角色名称" prop="name">
						<el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
					</el-form-item>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="角色职位" prop="isLeader">
								<el-radio-group v-model="roleForm.isLeader">
									<el-radio label="0">部门领导</el-radio>
									<el-radio label="1">普通员工</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item v-if="roleForm.isLeader === '0'" label="正副级" prop="isPlus">
								<el-radio-group v-model="roleForm.isPlus">
									<el-radio label="0">正</el-radio>
									<el-radio label="1">副</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="角色权限" prop="authorities">
						<el-checkbox-group v-model="roleForm.authorities">
							<el-checkbox v-for="(item,index) in authorityList" :label="item.id" :key="index">{{item.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="角色描述" prop="description">
						<el-input type="textarea" rows="5" v-model="roleForm.description"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="dialogBtns">
				<el-button class="mrgt" type="primary" @click="roleSubmit('roleForm')">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "roleDialog",
//import引入的组件需要注入到对象中才能使用
		components: {},
		props: {
			showRoleDialog: { type: Boolean, default: false },
			roleDetails: {type: Object},
			authorityLists: {type: Array},
		},
		data () {
//这里存放数据
			return {
				dialogRoleVisible: false,
				roleForm: {
					name: '',
					isLeader: '',
					description: '',
					authorities: [],
					departmentId: '',
					isPlus: '',
				},
				rules:{
					name: [
						{ required: true, message: '请输入角色名称', trigger: 'blur' },
					],
					authorities: [
						{ type: 'array', required: true, message: '请至少选择一个角色权限', trigger: 'change' }
					],
					isLeader: [
						{ required: true, message: '请选择角色职位', trigger: 'change' }
					],
					isPlus: [
						{ required: true, message: '请选择正副级', trigger: 'change' }
					],
					description: [
						{ required: true, message: '请填写角色描述', trigger: 'blur' }
					]
				},
				dialogName: '',
				authorityList: []
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			showRoleDialog:{
				immediate: true,
				handler(showRoleDialog) {
					// console.log(showViewTrain)
					this.dialogRoleVisible = showRoleDialog;
					// if (showRoleDialog === true) {
					// this.getAuthorityList();
					// }
				}
			},
			authorityLists:{
				immediate: true,
				handler(authorityLists) {
					console.log(authorityLists)
					this.authorityList = authorityLists;
				}
			},
			roleDetails: {
				immediate: true,
				handler(roleDetails) {
					console.log(roleDetails)
					this.dialogName = roleDetails.name === '' ? '新增角色' : '修改角色';
					if (roleDetails.authorities === null) {
						roleDetails.authorities = [];
						this.roleForm = roleDetails;
					} else {
						let arr = [];
						roleDetails.authorities.forEach((v, i) => {
							console.log(v, i)
							arr.push(v.id);
						})
						console.log(arr)
						let data = JSON.parse(JSON.stringify(roleDetails));
						data.authorities = arr;
						this.roleForm = data;
					}
				}
			}
		},
//方法集合
		methods: {
			// getAuthorityList() {
			// 	this.$axios.putAuthority().then((res) => {
			// 		console.log(res)
			// 		if (res.request.status === 200) {
			// 			this.authorityList = res.data;
			// 		}
			// 	})
			// },
			closeDialog(val) {
				console.log(val)
				this.roleForm.name = '';
				this.roleForm.isLeader = '';
				this.roleForm.description = '';
				this.roleForm.authorities = [];
				this.roleForm.isPlus = '';
				this.$refs[val].resetFields();
				this.$emit('close', false);
			},
			roleSubmit(val) {
				console.log(this.roleForm)
				this.$refs[val].validate((valid) => {
					if (valid) {
						console.log(this.authorityLists)
						let arr = []
						for (let i = 0; i < this.authorityLists.length; i++) {
							for (let j = 0; j < this.roleForm.authorities.length; j++) {
								if (this.authorityLists[i].id === this.roleForm.authorities[j]) {
									arr.push(this.authorityLists[i]);
								}
							}
						}
						console.log(arr)
						let data = JSON.parse(JSON.stringify(this.roleForm));
						data.authorities = arr;
						if (data.isPlus !== '0' && data.isPlus !== '1') {
							data.isPlus = null;
						}
						console.log(data)
						console.log(this.dialogName)
						if (this.dialogName === '修改角色') {
							this.$axios.putRoles(data).then((res) => {
								console.log(res)
								if (res.request.status === 200) {
									this.$message({
										message: `${this.dialogName}角色成功!`,
										type: 'success'
									});
									this.closeDialog('roleForm');
								}
							})
						} else {
							this.$axios.postRole(data).then((res) => {
								console.log(res)
								if (res.request.status === 200) {
									this.$message({
										message: `${this.dialogName}角色成功!`,
										type: 'success'
									});
									this.closeDialog('roleForm');
								}
							})
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.header-title{
		text-align: center;
		font-size: 26px;
		position: relative;
		height: 30px;
	}
	.dialogHeaderClose{
		position: absolute;
		top: -10px;
		right: 0px;
		cursor: pointer;
	}

	.dialogBtns{
		position: fixed;
		bottom: 0;
		left: 10%;
		width: 80%;
		margin: 80px auto;
		text-align: center;
		border-top: 2px solid #5059D5;
	}

	.mrgt{
		margin-top: 20px;
	}

	.roleDivs{
		width: 90%;
		margin: 30px auto;
		text-align: left;
	}

	/deep/ .el-form-item__label {
		text-align: center;
		vertical-align: middle;
		float: none;
		font-size: 18px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/deep/ .el-form-item__content {
		line-height: 40px;
		position: relative;
		font-size: 14px;
		font-weight: bold;
		margin-left: 0 !important;
	}

	/deep/ .el-textarea__inner {
		display: block;
		resize: vertical;
		padding: 5px 15px;
		line-height: 1.5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		font-size: 18px;
		color: #606266;
		background-color: #EFF2FA;
		background-image: none;
		border: 1px solid #DCDFE6; /*no*/
		border-radius: 4px;
		-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	}

	/deep/ .el-radio__label {
		font-size: 16px;
		padding-left: 10px;
	}

	/deep/ .el-checkbox__label {
		display: inline-block;
		padding-left: 10px;
		line-height: 19px;
		font-size: 16px;
	}

	/deep/ .el-input__inner{
		border-color: #a8acea;/*no*/
		font-size: 18px;
	}

	/deep/ .el-input__inner:hover {
		border-color: #5059d5;
	}

	/deep/ .el-input.is-active .el-input__inner, .el-input__inner:focus {
		border-color: #5059d5;
		outline: 0;
	}

	/deep/ .el-textarea__inner{
		border-color: #a8acea;
	}

	/deep/ .el-textarea__inner:hover {
		border-color: #5059d5;
	}

	/deep/ .el-textarea__inner:focus {
		outline: 0;
		border-color: #5059d5;
	}
</style>
