<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-collection"></i> <span class="top_dao"> Peer Review</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-alert class="mes_alert" style="margin: 20px 0 10px 0;" :title="'Dear '+ user_name"
			description="Welcome to our submission system. In order to facilitate reviewers to review articles we have developed a new test product. if you have any suggestions about this, please do not hesitate to contact us: tmr@tmrjournals.com">
		</el-alert>
		<div class="container_l">
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="ma_title" style="height: 100%;">
						<h2>
							<!-- <img src="../../assets/img/icon_5.png" alt="" class="icon_img"> -->
							Under review
						</h2>
						In this column, the manuscripts that currently need your comments are displayed. You can click
						detail to review
						or change your comments.
					</div>
					<ul class="ta1_uli ta1_ulicad">
						<li v-for="(item,index) in tableData1">
							<!-- <h5>{{item.type}}</h5> -->
							<router-link :to="{path:'/per_text',query:{Art_id:item.art_rev_id}}">
								<h3><span
										style="margin-right: 6px;color: #006699;">{{index+1}}.</span>{{item.article_title}}
								</h3>
								<el-button type="primary" plain style="float: right;">Review</el-button>
							</router-link>
							<h4>
								<span>
									<font style="color: #006699;">Journal : </font>{{item.journal_title}}.
								</span>
								<span>
									<font style="color: #006699;">Type : </font>{{item.type}}
								</span>
								<span style="color: #888;margin-left: 20px;color: #006699;">
									{{item.ctime}}
								</span><br>
								<!-- <span v-if="item.abstrart!=''" style="max-width: 1000px;">
										<font style="color: #888;">Abstrart : </font>{{item.abstrart | ellipsis}}
									</span> -->
							</h4>
						</li>
						<p v-if="tableData1==''" style="color:#6f6f6f;font-size: 14px;margin: 20px 0 0 30px;">No article
						</p>
					</ul>
				</el-col>

				<el-col :span="24" v-if="tableData2!=''">
					<div style="background-color: #ccc;height: 2px;width: 100%;margin:20px 0 35px 0;"></div>
					<!-- <el-card class="box-card"> -->
					<div class="ma_title" style="margin-bottom: 5px;">
						<h2>
							<!-- <img src="../../assets/img/icon_1.png" alt="" class="icon_img"> -->
							Invitation for review
						</h2>
						This list will show you the manuscript that the editor invited you to review. You can click on
						the details to
						check the content and then decide whether to review the manuscript. In addtion, you can also
						refuse to review
						the manuscript.
					</div>
					<ul class="ta1_uli ta1_ulicad">
						<li v-for="(item,index) in tableData2">
							<div>
								<router-link :to="{path:'/per_text_yq',query:{Art_id:item.art_rev_id}}">
									<h3><span
											style="margin-right: 6px;color: #006699;">{{index+1}}.</span>{{item.title}}
									</h3>
									<el-button type="primary" plain style="float: right;">Detail</el-button>
								</router-link>
							</div>
							<h4>
								<span>
									<font style="color: #006699;">Journal : </font>{{item.journal_title}}.
								</span>
								<span>
									<font style="color: #006699;">Type : </font>{{item.type}}
								</span>
								<span style="color: #888;margin-left: 20px;color: #006699;">
									{{item.ctime}}
								</span><br>
								<span v-if="item.abstrart!=''" style="max-width: 1000px;">
									<font style="color: #006699;">Abstract : </font>{{item.abstrart | ellipsis}}
								</span>
							</h4>

							<div style="margin-top: 10px;">
								<el-button type="success" plain @click="wen_nowrw(item.art_rev_id)">Review</el-button>
								<!-- <el-button type="success" plain @click="wen_agree(item.art_rev_id)" style="margin: 0 10px 0 20px;">Review
										later</el-button> -->
								<el-button type="danger" plain @click="wen_refuse(item.art_rev_id)">Reject to review
								</el-button>
							</div>
						</li>
					</ul>
					<!-- </el-card> -->
				</el-col>

				<!-- <el-col :span="24">
					<div style="background-color: #ccc;height: 2px;width: 100%;margin: 30px 0 5px 0;"></div>
				</el-col>
				
				<el-col :span="24" style="margin-top: 20px;">
					<div class="ma_title">
						<h2>
							Awaiting reviewer assignment
						</h2>
						In this column, all the manuscripts of the TMR Publishing Group that need to be reviewed are displayed. You can
						click detail to view the content of the manuscript . If you have comments on the manuscript, you can apply for
						review. Sincerely look forward to your comments.
					</div>

					<ul class="ta1_uli ta1_ulicad">
						<li v-for="(item,index) in tableData3">
								<h3><span style="margin-right: 6px;">{{index+1+(TaBle3.pageIndex-1)*TaBle3.pageSize}}.</span>{{item.title}}</h3>
								<el-button type="primary" plain style="float: right;" @click="svAccept(item.article_id)">Agree review</el-button>
								<h4>
									<span>
										<font style="color: #006699;">Journal : </font>{{item.journal_title}}.
									</span>
									<span>
										<font style="color: #006699;">Type : </font>{{item.type}}
									</span>
									<span style="color: #888;margin-left: 20px;margin-bottom: 10px;color: #006699;">
										{{item.ctime}}
									</span><br>
									<span v-if="item.abstrart!=''" style="max-width: 1000px;">
										<font style="color: #006699;">Abstract : </font>
										<font style="font-size: 12px;" :class="{active: item.isShowMore}">{{item.abstrart}}</font>
										<font style="font-size: 12px;" :class="{active: !item.isShowMore}" v-if="item.isDescStatus">{{item.abstrart_}}</font>
										<span class="isShow" v-if="item.isDescStatus" @click="item.isShowMore = !item.isShowMore">
											{{item.isShowMore ? '... Open ↓' : 'Recover ↑'}}
										</span>
									</span>
								</h4>
						</li>
						<p v-if="tableData3==''" style="color:#6f6f6f;font-size: 14px;margin: 20px 0 0 30px;">No articles</p>
					</ul>
					<div class="pagination">
						<el-pagination layout="total, prev, pager, next" :current-page="TaBle3.pageIndex" :page-size="TaBle3.pageSize"
						 :total="link_Tota3" @current-change="handlePageChange3">
						</el-pagination>
					</div>

				</el-col> -->
			</el-row>

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

<script>
	export default {
		data() {
			return {
				user_name: localStorage.getItem('U_relname'),
				query: {
					user_id: localStorage.getItem('U_id')
				},
				Art_id: this.$route.query.Art_id,
				tableData1: [],
				tableData2: [],
				tableData3: [],
				TaBle2: {
					user_id: localStorage.getItem('U_id'),

				},
				TaBle3: {
					user_id: localStorage.getItem('U_id'),
					journal_id: 0,
					pageIndex: 1,
					pageSize: 5
				},
				link_Tota3: 0,
			};
		},
		mounted() {

		},
		created() {
			this.getData();
		},
		methods: {
			// 获取数据
			getData() {
				this.$api
					.post('api/Reviewer/getReviewerListPending', this.query)
					.then(res => {
						if (res.code == 0) {
							for (let i = 0; i < res.data.lists.length; i++) {
								let date = new Date(parseInt(res.data.lists[i].ctime) * 1000);
								let Y = date.getFullYear() + '-';
								let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date
								.getMonth() + 1 + '-';
								let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
								res.data.lists[i].ctime = Y + M + D;
							}
							this.tableData1 = res.data.lists;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('api/Reviewer/getInvitatReviewList', this.TaBle2)
					.then(res => {
						if (res.code == 0) {
							if (res.data.articles != '') {
								for (let i = 0; i < res.data.articles.length; i++) {
									let date = new Date(parseInt(res.data.articles[i].ctime) * 1000);
									let Y = date.getFullYear() + '-';
									let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date
										.getMonth() + 1 + '-';
									let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
									res.data.articles[i].ctime = Y + M + D;
								}
							}
							this.tableData2 = res.data.articles;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('api/Reviewer/getAllReviewerList', this.TaBle3)
					.then(res => {
						if (res.code == 0) {
							if (res.data.articles != '') {
								for (let i = 0; i < res.data.articles.length; i++) {
									let date = new Date(parseInt(res.data.articles[i].ctime) * 1000);
									let Y = date.getFullYear() + '-';
									let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date
										.getMonth() + 1 + '-';
									let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
									res.data.articles[i].ctime = Y + M + D;

									if (res.data.articles[i].abstrart.length > 380) {
										res.data.articles[i].isShowMore = true;
										res.data.articles[i].isDescStatus = true;
										res.data.articles[i].abstrart_ = JSON.parse(JSON.stringify(res.data.articles[i]
											.abstrart)).slice(0, 380);
										res.data.articles[i].abstrart_ = res.data.articles[i].abstrart_.slice(0, res
											.data.articles[i].abstrart_.lastIndexOf(
												" "));
									} else {
										res.data.articles[i].isShowMore = false;
										res.data.articles[i].isDescStatus = false;
									}
								}
							}

							this.tableData3 = res.data.articles;
							this.link_Tota3 = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 分页导航
			handlePageChange3(val) {
				this.$set(this.TaBle3, 'pageIndex', val);
				this.getData();
			},

			// 马上同意
			wen_nowrw(index) {
				// 二次确认
				this.$confirm('Are you sure you want to review now？', 'Tips', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/Reviewer/agreeReviewerArticle', {
								art_rev_id: index
							})
							.then(res => {
								if (res.code == 0) {
									this.$router.push('/per_text?Art_id=' + index);
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 同意
			wen_agree(index) {
				// 二次确认
				this.$confirm(
						'Are you sure you want to agree？You can click on the details to check the content and then decide whether to review the manuscript？',
						'Tips', {
							type: 'warning'
						})
					.then(() => {
						this.$api
							.post('api/Reviewer/agreeReviewerArticle', {
								art_rev_id: index
							})
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Agree successful!');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 拒绝
			wen_refuse(index) {
				// 二次确认
				this.$confirm('Are you sure you want to refuse？', 'Tips', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/Reviewer/refuseReviewerArticle', {
								art_rev_id: index
							})
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Reject successful!');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 申请
			svAccept(parem) {
				// 二次确认
				this.$confirm('I am willing to review this manuscript.', ' ', {
						type: 'warning',
						confirmButtonText: 'Yes'
					})
					.then(() => {
						this.$api
							.post('api/Reviewer/launchReviewer', {
								article_id: parem,
								user_id: localStorage.getItem('U_id')
							})
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Successful application!');
									this.$router.push('/per_text?Art_id=' + res.data.art_rev_id);
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});

			},


		},
		filters: {
			ellipsis(value) {
				if (!value) return "";
				if (value.length > 380) {
					value = value.slice(0, 380);
					return value.slice(0, value.lastIndexOf(" ")) + "...";
				}
				return value;
			}
		},
		watch: {

		}
	};
</script>

<style scoped>
	.ma_title {
		margin-bottom: 20px;
		font-size: 14px;
		/* border-right: 1px solid #e1e1e1; */
		padding: 0 20px;
		line-height: 20px;
	}

	.ma_title h2 {
		font-size: 16px;
		margin: 10px 0;
		/* white-space: nowrap; */
	}

	.ma_title .icon_img {
		width: 20px;
		height: 20px;
		margin-right: 10px;
		vertical-align: middle;
	}

	/* 	.top_card_b::-webkit-scrollbar {
		width: 5px;
		height: 10px;
	}

	.top_card_b::-webkit-scrollbar-thumb {
		background-color: #c9c9cc;
		border-radius: 3px;
	} */

	.ta1_uli {}

	.ta1_uli li {
		list-style: none;
		/* border-bottom: 1px dashed #e0e0e0; */
		/* box-shadow: 0 0 10px #e1e1e1; */
		/* padding: 10px 20px 20px 20px; */
		padding-bottom: 8px;
		background-color: #fff;
		margin-top: 10px;
	}

	.ta1_ulicad li {
		margin-top: 0;
		padding: 20px;
	}

	.ta1_ulicad li:nth-child(2n+1) {
		background-color: #f8fbff;
		box-shadow: 2px 30px 15px -20px #ebf5ff inset;
	}

	.ta1_ulicad li:nth-child(2n) {
		background-color: #fff;
	}

	.ta1_uli li:hover {
		/* background: #fafafa; */
	}

	.ta1_uli li h3 {
		color: #006699;
		margin-top: 8px;
		margin-right: 150px;
		font-family: "Helvetica Neue", Helvetica, Georgia, sans-serif;
		font-size: 16px;
		word-wrap: break-word;
		line-height: 22px;
	}

	.ta1_uli li h3:hover {
		/* text-decoration: underline; */
		cursor: pointer;
	}

	.ta1_uli li h4 {
		/* color: #6f6f6f; */
		margin-top: 8px;
		margin-right: 150px;
		font-weight: normal;
		font-size: 14px;
		line-height: 22px;
	}

	.ta1_uli li h4 span {
		margin-right: 20px;
		display: inline-block;
		margin-bottom: 2px;
	}

	.ta1_uli li h4 span>font {
		font-size: 13px;
	}

	.ta1_uli li h5 {
		color: #006699;
		margin-top: 5px;
		padding-bottom: 10px;
		font-weight: normal;
		border-bottom: 1px solid #f1f1f1;
	}

	.ta1_uli li h6 {
		font-weight: normal;
		font-family: Calibri;
		font-size: 16px;
		margin-top: 10px;
	}


	.mes_alert .el-alert__content {
		margin-bottom: 10px;
	}

	.mes_alert .el-alert__content .el-alert__title {
		font-size: 18px !important;
		margin: 10px 0 !important;
		display: block;
	}

	.mes_alert .el-alert__description {
		font-size: 16px !important;
	}

	.ta1_uli li .active {
		display: none;
	}

	.ta1_uli li .isShow {
		color: #006699;
		cursor: pointer;
		font-size: 12px;
		font-weight: bold;
		margin-left: 5px;
	}
</style>
