<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-collection-tag"></i> 领域管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
		 element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Crease">添加</el-button>
			</div>
			<el-input placeholder="输入关键字" v-model="filterText" style="width: 200px;margin-bottom: 20px;"></el-input>
			<el-tree class="filter-tree" :data="treeData" :props="defaultProps" :expand-on-click-node="false" default-expand-all
			 :indent="4" :filter-node-method="filterNode" ref="tree">
				<div class="custom-tree-node" slot-scope="{ node, data }" @mouseover="mouseover(data)" @mouseleave="mouseout(data)">
					<span>{{ node.label }}</span>
					<span v-if="data.nickname!=''" style="margin-left: 20px;">({{ data.nickname }})</span>
					<div v-show="data.dropdownShow" class="drop_list">
						<!-- 新增下级 -->
						<span class="lev_add" @click="addChildrenTree(node,data)" v-if="node.level!=4">
							<i class="el-icon-plus"></i>
						</span>
						<!-- 修改 -->
						<span class="lev_edit" @click="updateTree(node,data)">
							<i class="el-icon-edit"></i>
						</span>
						<!-- 删除 -->
						<span class="lev_delete" @click="deleteTree(node,data)">
							<i class="el-icon-delete"></i>
						</span>
					</div>
				</div>
			</el-tree>
		</div>

		<!-- 按钮添加弹出框 -->
		<el-dialog title="添加 - 领域" :visible.sync="newVisible" width="500px">
			<el-form ref="new_Form" :model="newForm" :rules="rules" label-width="85px">
				<el-form-item label="父级" prop="pid">
					<el-cascader :options="opt_treeData" v-model="newForm.pid" :props="defaultParams" placeholder="请选择所属父级" @change="parent_downid"
					 style="width: 300px;">
					</el-cascader>
				</el-form-item>
				<el-form-item label="领域名称" prop="major_title">
					<el-input v-model="newForm.major_title"></el-input>
				</el-form-item>
				<el-form-item label="别称">
					<el-input v-model="newForm.nickname"></el-input>
				</el-form-item>
				<el-form-item label="权重">
					<el-input-number v-model="newForm.major_sort" :min="0"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="newVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveNew(newForm)">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加 - 领域" :visible.sync="addVisible" width="500px">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="85px">
				<el-form-item label="父级">
					{{addForm.fater}}
				</el-form-item>
				<el-form-item label="领域名称" prop="major_title">
					<el-input v-model="addForm.major_title"></el-input>
				</el-form-item>
				<el-form-item label="别称">
					<el-input v-model="addForm.nickname"></el-input>
				</el-form-item>
				<el-form-item label="权重">
					<el-input-number v-model="addForm.major_sort" :min="0"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdd(addForm)">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 按钮修改弹出框 -->
		<el-dialog title="修改 - 领域" :visible.sync="editVisible" width="500px">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="85px">
				<el-form-item label="领域名称" prop="major_title">
					<el-input v-model="editForm.major_title"></el-input>
				</el-form-item>
				<el-form-item label="别称">
					<el-input v-model="editForm.nickname"></el-input>
				</el-form-item>
				<el-form-item label="权重">
					<el-input-number v-model="editForm.major_sort" :min="0"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit(editForm)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Uw_url: 'special',
				// Uw_url: 'api',
				loading: false,
				filterText: '',
				newForm: {
					major_sort: 0
				},
				addForm: {
					major_sort: 0
				},
				editForm: {},
				newVisible: false,
				addVisible: false,
				editVisible: false,
				defaultParams: {
					label: 'major_title',
					value: 'major_id',
					children: 'children',
					checkStrictly: true,
				},
				opt_treeData: [],
				treeData: [],
				defaultProps: {
					label: 'major_title',
					value: 'major_id',
					children: 'children',
				},
				rules: {
					pid: [{
						required: true,
						message: '请选择父级',
						trigger: 'blur'
					}],
					major_title: [{
						required: true,
						message: '请输入领域名称',
						trigger: 'blur'
					}],
					major_sort: [{
						required: true,
						message: '请输入权重',
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		methods: {
			// 获取领域列表数据
			getData() {
				this.loading = true
				this.opt_treeData = []
				this.treeData = []
				this.$api
					.post(this.Uw_url + '/Major/getMajorList')
					.then(res => {
						if (res.code == 0) {
							this.treeData = res.data.majors
							this.opt_treeData = JSON.parse(JSON.stringify(res.data.majors));

							// 级联只获取前三层
							for (let i = 0; i < this.opt_treeData.length; i++) {
								if (this.opt_treeData[i].children) {
									for (let k = 0; k < this.opt_treeData[i].children.length; k++) {
										if (this.opt_treeData[i].children[k].children) {
											for (let p = 0; p < this.opt_treeData[i].children[k].children.length; p++) {
												if (this.opt_treeData[i].children[k].children[p].children != undefined) {
													delete this.opt_treeData[i].children[k].children[p].children
												}
											}
										}
									}
								}
							}
							this.opt_treeData.unshift({
								major_id: '0',
								major_title: '无',
							})

							this.loading = false
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 筛选
			filterNode(value, data) {
				if (!value) return true;
				return data.major_title.indexOf(value) !== -1;
			},

			// 点击上面按钮添加
			add_Crease() {
				this.newVisible = true
			},
			// 级联选择
			parent_downid(event) {
				this.newForm.pid = event[event.length - 1];
			},

			// 点击新增
			mouseover(data) { // 移入
				this.$set(data, 'dropdownShow', true)
			},
			mouseout(data) { // 移除
				this.$set(data, 'dropdownShow', false)
			},

			// 添加旧的
			addChildrenTree(node, data) {
				this.addForm.pid = data.major_id
				this.addForm.fater = data.major_title
				this.addVisible = true
			},
			// 编辑
			updateTree(node, data) {
				this.editForm = JSON.parse(JSON.stringify(data))
				this.editVisible = true
			},
			// 删除
			deleteTree(node, data) {
				// 二次确认删除
				this.$confirm('确定要删除 ' + data.major_title + ' (' + data.nickname + ')' + ' 吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post(this.Uw_url + '/Major/delMajor', data)
							.then(res => {
								if (res.code == 0) {
									this.$message.success(`删除成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 提交新增
			saveNew(newForm) {
				this.$refs.new_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Major/addMajor', this.newForm)
							.then(res => {
								if (res.code == 0) {
									this.newVisible = false;
									this.$refs.new_Form.resetFields();
									this.$message.success(`添加成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			saveAdd(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Major/addMajor', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success(`添加成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 提交修改
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post(this.Uw_url + '/Major/editMajor', this.editForm)
							.then(res => {
								if (res.code == 0) {
									this.editVisible = false;
									this.$refs.edit_Form.resetFields();
									this.$message.success(`修改成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

		},
	};
</script>

<style>
	.handle-box {
		margin-bottom: 20px;
	}

	.custom-tree-node {
		width: 100%;
	}

	.filter-tree {
		margin-top: 20px;
		padding-left: 10px;
	}


	.el-tree-node__content {
		height: 36px;
		margin-left: 12px;
	}

	.el-tree .el-tree-node__expand-icon.expanded {
		-webkit-transform: rotate(0deg);
		transform: rotate(90deg);
		transition: 2;
	}


	/* //有子节点 且未展开 */
	.el-tree .el-icon-caret-right:before {
		background: url('../../assets/img/wer_rig.png') no-repeat 0 0;
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		font-size: 16px;
		background-size: 16px;
	}

	/* //有子节点 且已展开 */
	.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		font-size: 16px;
		background-size: 16px;
	}

	/* //没有子节点 */
	.el-tree .el-tree-node__expand-icon.is-leaf::before {
		background: 0;
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		font-size: 16px;
		background-size: 16px;
	}

	.el-tree .el-tree-node__content>.el-tree-node__expand-icon {
		margin-left: -6px;
	}

	.drop_list {
		display: inline-block;
		margin-left: 40px;
		font-size: 14px;
	}

	.drop_list>span {
		margin-left: 15px;
		border-radius: 4px;
		width: 24px;
		height: 20px;
		padding: 2px 3px;
		text-align: center;
		/* border: 1px solid #dcdee2;
		color: #dcdee2; */
	}

	.drop_list>span.lev_add {
		border: 1px solid #42b983;
		color: #42b983;
	}

	.drop_list>span.lev_add:hover {
		background-color: #42b983;
		color: #fff;
	}

	.drop_list>span.lev_edit {
		border: 1px solid #e96900;
		color: #e96900;
	}

	.drop_list>span.lev_edit:hover {
		background-color: #e96900;
		color: #fff;
	}

	.drop_list>span.lev_delete {
		border: 1px solid #e90000;
		color: #e90000;
	}

	.drop_list>span.lev_delete:hover {
		background-color: #e90000;
		color: #fff;
	}

	.drop_list>span i {
		font-size: 14px;
		/* font-weight: bold; */
	}

	/* 竖线 */
	.filter-tree>.el-tree-node:after {
		border-top: none;
	}

	.filter-tree .el-tree-node {
		position: relative;
		padding-left: 10px;
	}

	/* //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉 */
	.filter-tree .el-tree-node__expand-icon.is-leaf {
		display: none;
	}

	.filter-tree .el-tree-node__children {
		padding-left: 10px;
	}

	.filter-tree .el-tree-node :last-child:before {
		height: 38px;
	}

	.filter-tree>.el-tree-node:before {
		border-left: none;
	}

	.filter-tree>.el-tree-node:after {
		border-top: none;
	}

	.filter-tree .el-tree-node:before {
		content: "";
		left: -5px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.filter-tree .el-tree-node:after {
		content: "";
		left: -5px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.filter-tree .el-tree-node:before {
		border-left: 2px dashed #4386c6;
		bottom: 0px;
		height: 100%;
		top: -19px;
		width: 1px;
	}

	.filter-tree .el-tree-node:after {
		border-top: 2px dashed #4386c6;
		height: 20px;
		top: 18px;
		width: 24px;
	}
</style>
