<!-- 部门管理 -->
<template>
	<div class='departmentManage'>
		<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">
							<img src="../../assets/images/companyIcon.png"/>
							<span>{{this.companyData.name}}</span>
							<el-button style="margin-left: 50px;" type="primary" icon="el-icon-plus" @click="openDialog">添加部门</el-button>
						</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">
								<span style="width: 100%;position:relative;" slot-scope="{ node, data }">
        <span class="dpName">{{ node.label }}</span>
        <span style="text-align: right;margin-right: 20px;position: absolute;right: 0px;bottom: -1px;">
					<span title="添加" class="addIcon" @click="append(data)">
						<img src="../../assets/images/departmentAddIcon.png"/>
					</span>
					<span title="删除" class="deleteIcon" @click="deleteDepartment(data)">
						<img src="../../assets/images/departmentDeleteIcon.png"/>
					</span>
        </span>
      </span>
							</el-tree>
						</div>
					</div>
				</el-col>
				<el-col :span="16">
					<div style="text-align: right;">
						<el-button style="margin-left: 50px;" type="primary" @click="editSubmitForm('departmentForm')">
							<span style="margin-right: 5px;">
								<img class="btnImgDe" src="../../assets/images/saveIcon.png"/>
							</span>保存
						</el-button>
					</div>
					<div class="departmentContents">
						<el-form :model="departmentForm" :rules="rules" ref="departmentForm" label-width="100px" class="demo-ruleForm">
							<el-form-item label="部门名称" prop="name">
								<el-input style="width: 60%;" v-model="departmentForm.name"></el-input>
							</el-form-item>
							<el-form-item label="部门描述" prop="description">
								<el-input type="textarea" :rows="20" v-model="departmentForm.description"></el-input>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
		</div>
		<!--<div style="border: 1px solid #dedede;height: 100%;">-->
			<!--<el-row :gutter="30" style="height: 100%;">-->
				<!--<el-col :span="4">-->
					<!--<div class="leftTreeTitle">部门列表</div>-->
					<!--<div class="leftTree">-->
						<!--<el-tree :data="data" @current-node-key="currentDepartment" :default-expand-all="true" :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
					<!--</div>-->
				<!--</el-col>-->
				<!--<el-col :span="20" style="height: 100%;">-->
					<!--<div style="border-left: 1px solid #dedede;height: 100%;">-->
						<!--<div style="float: right;margin: 20px 30px 100px 30px;">-->
							<!--<el-button type="primary" icon="el-icon-plus" @click="addDepartment('departmentForm')">新增</el-button>-->
						<!--</div>-->
						<!--<div class="details" v-show="showDetail === true">-->
							<!--<div style="padding: 35px 100px 20px 100px;">-->
								<!--<el-form :model="departmentForm" :rules="rules" ref="departmentForm" label-width="100px" class="demo-ruleForm">-->
									<!--<el-form-item label="当前选择部门">-->
										<!--<span>{{currentDepartment.name}}</span>-->
									<!--</el-form-item>-->
									<!--<el-form-item label="部门名称" prop="name">-->
										<!--<el-input v-model="departmentForm.name"></el-input>-->
									<!--</el-form-item>-->
									<!--&lt;!&ndash;<el-form-item label="部门等级" prop="level">&ndash;&gt;-->
										<!--&lt;!&ndash;<el-input v-model="departmentForm.level"></el-input>&ndash;&gt;-->
									<!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
									<!--<el-form-item label="部门描述" prop="description">-->
										<!--<el-input type="textarea" v-model="departmentForm.description"></el-input>-->
									<!--</el-form-item>-->
								<!--</el-form>-->
								<!--<div style="text-align: center;">-->
									<!--<el-button type="primary" v-show="!isShowDelete" @click="submitForm('departmentForm')">保存</el-button>-->
									<!--<el-button type="primary" v-show="isShowDelete" @click="editSubmitForm('departmentForm')">保存</el-button>-->
									<!--<el-button v-show="isShowDelete" @click="deleteDepartment('departmentForm')">删除</el-button>-->
								<!--</div>-->
							<!--</div>-->
						<!--</div>-->
					<!--</div>-->
				<!--</el-col>-->
			<!--</el-row>-->
		<!--</div>-->
		<add-dialog :showDepartmentDialog="showDepartmentDialog" :currrentId="currentDepartment.id" @close="closeDialog"></add-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import addDialog from '../../components/departmentAddDialog'
	export default {
		name: "departmentMAnage",
//import引入的组件需要注入到对象中才能使用
		components: {addDialog},
		data () {
//这里存放数据
			return {
				defaultProps: {
					children: 'departments',
					label: 'name'
				},
				filterText: '',
				data: [],
				departmentForm: {
					name: '',
					// level: '',
					description: '',
				},
				rules: {
					name: [
						{ required: true, message: '请输入部门名称', trigger: 'blur' }
					],
					// level: [
					// 	{ required: true, message: '请输入部门等级', trigger: 'blur' }
					// ],
					description: [
						{ required: true, message: '请输入部门描述', trigger: 'blur' }
					]
				},
				companyData: '',
				showDetail: false,
				currentDepartment: '', // 当前
				authorityLists: [],
				isShowDelete: false,
				showDepartmentDialog: false,
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
//方法集合
		methods: {
			openDialog() {
				this.showDepartmentDialog = true;
			},
			closeDialog() {
				this.showDepartmentDialog = false;
				this.postDepartment();
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.name.indexOf(value) !== -1;
			},
			postDepartment() {
				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])
						}
						console.log(this.currentDepartment)
					}
				})
			},
			handleNodeClick(data) {
				console.log(data);
				this.$refs['departmentForm'].resetFields();
				this.showDetail = true;
				this.isShowDelete = true;
				this.departmentForm = JSON.parse(JSON.stringify(data));
				// this.departmentForm.name = data.name;
				// // this.departmentForm.level = data.level;
				// this.departmentForm.description = data.description;
				this.currentDepartment = JSON.parse(JSON.stringify(data));
			},
			addDepartment(formName) {
				this.showDetail = true;
				this.isShowDelete = false;
				let obj = {
					name: '',
					description: ''
				}
				this.departmentForm = obj;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.departmentForm)
						let data = JSON.parse(JSON.stringify(this.departmentForm));
						data.parentId = this.currentDepartment.id
						console.log(data)
						this.$axios.postAddDepartment(data).then((res) => {
							console.log(res);
							if (res.request.status === 200) {
								this.$message({
									message: '新增部门成功!',
									type: 'success'
								});
								this.postDepartment();
								this.showDetail = false;
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			editSubmitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.departmentForm)
						this.$axios.putDepartmentList(this.departmentForm).then((res) => {
							console.log(res);
							if (res.request.status === 200) {
								this.$message({
									message: '保存部门成功!',
									type: 'success'
								});
								this.postDepartment();
								this.showDetail = false;
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			deleteDepartment(val) {
				this.$axios.deleteDepartmentList(val.id).then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.$message({
							message: '删除部门成功!',
							type: 'success'
						});
						this.postDepartment();
					}
				})
			},
			append(val) {
				console.log(val);
				this.currentDepartment = val;
				this.showDepartmentDialog = true;
			},
			remove(node, data) {
				console.log(node ,data);
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.postDepartment()
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.departmentManage{
		height: 97%;
		margin: 30px 0px;
	}
	.leftTreeTitle{
		height: 60px;
		text-align: center;
		border-bottom: 1px solid #dedede; /*no*/
		line-height: 60px;
		font-size: 30px;
	}

	.details{
		clear: both;
		margin: 40px 100px;
		border: 1px solid #dedede; /*no*/
	}

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

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

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

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

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

	.btnImgDe{
		width: 15px;
		height: 17px;
		vertical-align: top;
	}

	.departmentContents{
		padding: 20px 20px;
		border-top: 2px solid #5059D5; /*no*/
		margin-top: 20px;
	}

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

	/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; /*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);
	}

	.addIcon{
		display: inline-block;
		padding: 4px 4px;
		border-radius: 4px;
	}

	.addIcon:hover{
		background: #5059D5;
	}

	.addIcon:hover img{
		content: url("../../assets/images/departmentAddIconHover.png");
	}

	.deleteIcon{
		display: inline-block;
		padding: 4px 4px;
		border-radius: 4px;
		margin-left: 10px;
	}

	.deleteIcon:hover{
		background: #ee4b4c;
	}

	.deleteIcon:hover img{
		content: url("../../assets/images/departmentDeleteHover.png");
	}

	.dpName{
		font-size: 20px;
		vertical-align: middle;
	}

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