<!-- 部门新增 -->
<template>
	<div class='departmentAddDialog'>
		<div>
			<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="dialogDepartmentAddVisible">
				<div slot="title" class="header-title">
					<span class="dialogHeader">添加部门</span>
					<img @click="closeDepartmentDialog('departmentForm')" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
				</div>
				<div>
					<div class="formDepart">
						<el-form :model="departmentForm" :rules="rules" ref="departmentForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="部门名称" prop="name" placeholder="请输入部门名称">
								<el-input v-model="departmentForm.name"></el-input>
							</el-form-item>
							<el-form-item label="部门描述" prop="description">
								<el-input type="textarea" :rows="12" placeholder="请输入部门名称" v-model="departmentForm.description"></el-input>
							</el-form-item>
							<!--<el-form-item>-->
								<!--<el-button type="primary" @click="addSubmit('departmentForm')">确定</el-button>-->
							<!--</el-form-item>-->
						</el-form>
					</div>
					<div class="dialogBtns">
						<el-button class="mrgt" type="primary" @click="addSubmit('departmentForm')">确定</el-button>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

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

	export default {
		name: "departmentAddDialog",
//import引入的组件需要注入到对象中才能使用
		props: ['showDepartmentDialog', 'currrentId'],
		components: {},
		data () {
//这里存放数据
			return {
				dialogDepartmentAddVisible: false,
				departmentForm: {
					name: '',
					description: '',
				},
				rules: {
					name: [
						{ required: true, message: '请输入部门名称', trigger: 'blur' },
					],
					description: [
						{ required: true, message: '请填写部门描述', trigger: 'blur' }
					]
				}
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			showDepartmentDialog: {
				immediate: true,
				handler(showDepartmentDialog) {
					this.dialogDepartmentAddVisible = showDepartmentDialog;
					console.log(this.currrentId);
				}
			},
		},
//方法集合
		methods: {
			closeDepartmentDialog(formName) {
				this.$refs[formName].resetFields();
				this.$emit('close', false);
			},
			addSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.departmentForm)
						let data = JSON.parse(JSON.stringify(this.departmentForm));
						data.parentId = this.currrentId;
						console.log(data)
						this.$axios.postAddDepartment(data).then((res) => {
							console.log(res);
							if (res.request.status === 200) {
								this.$message({
									message: '新增部门成功!',
									type: 'success'
								});
								this.closeDepartmentDialog('departmentForm');
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

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

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	/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;
		margin-left: 0 !important;
	}

	.formDepart{
		width: 50%;
		margin: 60px auto;
	}

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

	/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: inherit;
		color: #000;
		background-color: #EFF2FA;
		background-image: none;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	}

	.mrgt{
		margin-top: 30px;
	}

	/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>
