<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-document-copy"></i> 文章 - 相关文章</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="title_header">
				<span>{{title_header}}</span>
			</div>
			<p class="reta_tit" style="margin-bottom: 15px;">已选相关文章</p>
			<div>
				<div v-for="item in chooseData" class="choose_list" @mouseover="mouseover(item)"
					@mouseleave="mouseout(item)">
					<div>
						<p class="choose_title">
							<b>{{item.journal_title}}</b>
							<span>——</span>
							{{ item.title }}
						</p>
					</div>
					<!-- 删除 -->
					<el-button v-show="item.dropdownShow" class="choose_btn" size="mini" type="danger" plain
						@click="deleteTree(item)">删 除
					</el-button>
				</div>
				<p v-if="chooseData==''" style="color: #777;padding: 5px 0 0 15px;">No Articles</p>
			</div>
			<p class="reta_tit">未选文章</p>
			<div v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)">
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="journal_list">
							<div v-for="item in alljourData" @click="steps_title(item.journal_id)"
								:class="steps_jour ==item.journal_id?'Tab_col':''">
								<p>{{item.title}}</p>
							</div>
						</div>

					</el-col>
					<el-col :span="18">
						<div v-for="item in selectedData" class="selected_vol_list">
							<p class="reta_riqi">{{item.stage_year}} Vol. {{item.stage_vol}} Issue. {{item.stage_no}}
								{{item.stage_pagename}}
								{{item.stage_page}}
							</p>
							<div>
								<div v-for="note in item.articles" class="selected_list">
									<div>
										<p class="selected_title">{{ note.title }}</p>
									</div>
									<!-- 添加 -->
									<el-button class="selected_btn" size="mini" type="success" plain
										@click="addTree(note.article_id)">添 加</el-button>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>


			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				steps_jour: 0,
				title_header: '',

				alljourData: [],
				chooseData: [],
				selectedData: [],
				loading: false
			};
		},
		created() {
			this.getData();
			this.getJourData();
		},
		methods: {
			// 获取当前文章信息，相关文章，分期文章文章数据
			getData() {
				this.loading = true
				this.$api
					.post('master/Article/getArticleBase', {
						'article_id': this.$route.query.article_num
					})
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.articleInfo.title
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('master/Article/getRelatedArticles', {
						'article_id': this.$route.query.article_num
					})
					.then(res => {
						if (res.code == 0) {
							this.chooseData = res.data.articles
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},

			getJourData() {
				this.$api
					.post('master/Journal/getJournals')
					.then(res => {
						if (res.code == 0) {
							this.alljourData = res.data.journals;
							this.steps_jour = res.data.journals[0].journal_id
							this.getActicleData(this.steps_jour)
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			getActicleData(e) {
				this.$api
					.post('master/Article/getArticlesByStages', {
						'journal_id': e
					})
					.then(res => {
						if (res.code == 0) {
							this.selectedData = res.data.stages
							this.loading = false
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 切换期刊
			steps_title(e) {
				this.steps_jour = e
				this.getActicleData(e)
			},

			// 鼠标状态
			mouseover(item) { // 移入
				this.$set(item, 'dropdownShow', true)
			},
			mouseout(item) { // 移除
				this.$set(item, 'dropdownShow', false)
			},

			// 删除
			deleteTree(e) {
				// 二次确认删除
				this.$confirm('确定要删除 ' + e.title + ' 吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Article/delRelatedArticle', {
								'article_id': this.$route.query.article_num,
								'del_article_id': e.article_id
							})
							.then(res => {
								if (res.code == 0) {
									this.$message.success(`删除成功`);
									this.getData();
									this.getActicleData(this.steps_jour);
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 添加
			addTree(e) {
				this.$api
					.post('master/Article/addRelatedArticle', {
						'article_id': this.$route.query.article_num,
						'add_article_id': e
					})
					.then(res => {
						if (res.code == 0) {
							this.$message.success('添加相关期刊成功！');
							this.getData();
							this.getActicleData(this.steps_jour);
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},
		}
	};
</script>

<style scoped>
	.journal_list {
		border-right: 2px solid #e4e7ed;
		margin: 0 8px 0 0;
		padding: 10px 0;
	}

	.journal_list>div.Tab_col {
		color: #006699;
		font-weight: bold;
		border-right: 2px solid #006699;
		margin-right: -2px;
		letter-spacing: -0.5px;
	}

	.journal_list>div>p {
		margin-bottom: 10px;
		padding: 8px 0;
		cursor: pointer;
		font-size: 15px;
		line-height: 20px;
	}

	.reta_tit {
		margin: 30px 0 30px 0;
		font-weight: bold;
		font-size: 17px;
	}

	.reta_riqi {
		font-weight: bold;
		font-size: 17px;
		margin: 18px 0 20px 15px;
	}

	.choose_list {
		padding: 14px 15px;
		margin-bottom: 10px;
		border-bottom: 1px solid #ebf5ff;
		background-color: #f8fbff;
		-webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
		box-shadow: inset 2px 30px 15px -20px #ebf5ff;
		position: relative;
	}

	.selected_vol_list {
		padding: 0 0 20px 0;
		border-bottom: 2px solid #eee;
	}

	.selected_list {
		padding: 15px 15px;
		border-radius: 10px;
		position: relative;
	}

	.selected_list:nth-child(2n+1) {
		background-color: #f8fbff;
		/* 		-webkit-box-shadow: 2px 30px 15px -20px #ebf5ff inset;
		box-shadow: inset 2px 30px 15px -20px #ebf5ff; */
	}
	
	.selected_list:hover {
		background-color: #ebf5ff;
	}

	.choose_title,
	.selected_title {
		font-size: 14px;
		line-height: 22px;
		margin-right: 65px;
	}

	.choose_title>span {
		margin: 0 10px;
	}

	.choose_time {
		font-size: 15px;
		color: #888;
		margin: 0 0 10px 0;
	}

	.choose_btn,
	.selected_btn {
		position: absolute;
		right: 10px;
		top: 10px;
	}
</style>
