<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">
			<div style="display: flex;" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
			 element-loading-background="rgba(0, 0, 0, 0.8)">
				<div class="oftalk_jour">
					<div v-for="item in jourData" @click="JourCode(item.issn)" :class="activeClass ==item.issn?'j_yans':''">
						{{item.title}}
					</div>
				</div>
				<div style="float: left;padding-right:50px;height:900px;overflow-y: scroll;">
					<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" show-checkbox
					 :indent="4" default-expand-all :filter-node-method="filterNode" ref="tree" node-key="major_id" :check-strictly="true"
					 @check="treeChange" :highlight-current='true'>
						<div class="custom-tree-node" slot-scope="{ node, data }">
							<div :style="true ==node.checked?'background:#c5ecff':''">
								<span>{{ node.label }}</span>
								<span v-if="data.nickname!=''" style="margin-left: 20px;">({{ data.nickname }})</span>
							</div>
						</div>
					</el-tree>
				</div>
				<br clear="both">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Uw_url: 'special',
				// Uw_url: 'api',
				loading: false,
				activeClass: '2413-3973',
				jourData: [],
				filterText: '',
				treeData: [],
				tree_check: [],
				defaultProps: {
					label: 'major_title',
					value: 'major_id',
					children: 'children'
				},
				selectTreeArr: []
			};
		},
		created() {
			this.getData();
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		methods: {
			getJourMaj() {
				this.$api
					.post(this.Uw_url + '/Major/getJournalMajorList', {
						'journal_issn': this.activeClass
					})
					.then(res => {
						if (res.code == 0) {
							this.tree_check = []
							this.pushAttr(res.data.majors)
							this.$refs.tree.setCheckedKeys(this.tree_check);
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 默认选中已经选中的
			pushAttr(data) {
				data.forEach(item => {
					this.tree_check.push(item.major_id)
					if (item.children && item.children.length !== 0) {
						this.pushAttr(item.children);
					}
				});
			},

			// 选中的变色
			colorAttr(data) {
				data.forEach(item => {
					item.check_color = 0
					for (let i = 0; i < this.tree_check.length; i++) {
						if (item.major_id == this.tree_check[i]) {
							item.check_color = 1
						}
					}
					if (item.children && item.children.length !== 0) {
						this.colorAttr(item.children);
					}
				});
			},

			getData() {
				this.loading = true;
				// 获取期刊列表数据
				this.$api
					.post(this.Uw_url + '/Major/getAllJournals', {
						'editor_id': localStorage.getItem('admin_id')
					})
					.then(res => {
						if (res.code == 0) {
							this.jourData = res.data.journals;
							this.activeClass = this.jourData[0].issn;
							this.getJourMaj();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				// 获取领域树数据
				this.treeData = []
				this.$api
					.post(this.Uw_url + '/Major/getMajorList')
					.then(res => {
						if (res.code == 0) {
							this.treeData = res.data.majors
							this.loading = false;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 切换期刊
			JourCode(event) {
				this.loading = true;
				this.activeClass = event
				this.getJourMaj();
				this.loading = false;
			},

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

			// 点击领域添加
			treeChange(e, m) {
				let pan_daun = this.Uw_url + '/Major/addJournalMajor'
				for (var i of this.tree_check) {
					if (e.major_id == i) {
						pan_daun = this.Uw_url + '/Major/delJournalMajor'
					}
				}
				this.$api
					.post(pan_daun, {
						'major_id': e.major_id,
						'journal_issn': this.activeClass
					})
					.then(res => {
						if (res.code == 0) {
							this.getJourMaj()
						} else {
							this.$message.error(res.msg);
							this.$refs.tree.setCheckedKeys([]);
							this.$refs.tree.setCheckedKeys(this.tree_check);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			}
			
		}
	};
</script>

<style>
	.oftalk_jour {
		float: left;
		border-right: 2px solid #e4e7ed;
		margin-right: 50px;
	}

	.oftalk_jour>div {
		text-align: right;
		font-size: 14px;
		line-height: 40px;
		padding-right: 50px;
		margin-right: -2px;
		font-weight: bold;
		border-right: 2px solid #e4e7ed;
		color: #333;
		cursor: pointer;
	}

	.oftalk_jour>div.j_yans {
		color: #006699;
		border-right: 2px solid #006699;
	}

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

	/* 竖线 */
	.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>
