<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-collection"></i>
					<router-link :to="{path:'/peerewer'}">
						<span class="top_dao"> Reviewer Article</span>
					</router-link>
					>> Reviewer Article Detail
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_l" v-loading="loading" element-loading-text="Loading..."
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			
			<el-card class="box-card">
				<div class="tet_list" :model="txt_mess">
					<h4>{{txt_mess.article_title}}</h4>
					<h5>{{txt_mess.title}}<span style="margin: 0 10px;"> >> </span> Manuscript ID:
						{{txt_mess.accept_sn}}
					</h5>
					<p style="display:inline-block;margin: 0 35px;"><b>Type :</b> {{txt_mess.atype}}</p>
					<p style="display:inline-block;"><b>Submitted time :</b> {{txt_mess.ctime}}</p>
					<p v-if="txt_mess.major!=undefined"><b>Major : </b>{{txt_mess.major}} > {{txt_mess.cmajor}}</p>
					<p><b>Abstract :</b> <br>{{txt_mess.abstrart}}</p>
					<div class="file_sty" v-for="item in fileList" style="margin-top: 15px;">
						<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
						{{item.type_name}}
						<span style="margin-left: 50px;color: #888;font-size: 13px;">{{item.ctime}}</span>
					</div>

					<div class="file_sty" v-for="item in picList">
						<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
						Figures And Tables
						<span style="margin-left: 50px;color: #888;font-size: 13px;">{{item.ctime}}</span>
						<br>
					</div>

					<!-- <p style="margin-top: 5px;color: #999;font-size: 14px;">
						<b style="color: #e41411;">Download failed？</b>
						<br>If you have upgraded the Google Chrome browser to version 86, released on October 6, 2020, you may have
						noticed that some file downloads don't work anymore in the browser. You click on the download link and nothing
						happens. 
						<br>1. Right now, the easiest option available is to 
						<b style="color: #e41411;">right-click on the download link and select "save link as".</b>
						The download is executed when you do that.
						<br>2. Please try to use a different browser for downloads. For now, a browser like Firefox, Internet Explorer,
						Brave, Vivaldi, the new Edge, or Opera all allow the download.
					</p> -->
				</div>
			</el-card>

			<el-card class="box-card" style="font-size: 15px;line-height: 24px;">
				<el-row :gutter="20" class="trah_c">
					<el-col :span="1"><img src="../../assets/img/icon_8.png" alt="" class="icon_img"></el-col>
					<el-col :span="23">
						<p>
							After reviewing the manuscript, you can decide to review or reject it.
						</p>
					</el-col>
				</el-row>
				<div style="text-align: center;margin-top: 12px;">
					<el-button type="success" @click="saveNow()" style="margin-right: 20px;width: 250px;">Review Now
					</el-button>
					<el-button type="danger" @click="saveRef()" style="width: 250px;">Reject to review</el-button>
				</div>
			</el-card>
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				Direct_log: this.$route.query.act,
				Art_id: this.$route.query.Art_id,
				txt_mess: {},
				fileList: [],
				picList: [],
				mediaUrl: this.Common.mediaUrl
			}
		},
		created() {
			if (this.Direct_log == null) {
				this.getData();
			} else {
				this.$api
					.post('api/Chief/autoLoginForChief', {
						'code': this.Direct_log
					})
					.then(res => {
						if (res.code == 0) {
							localStorage.setItem('U_role', res.data.roles);
							localStorage.setItem('U_name', res.data.user.account);
							localStorage.setItem('U_id', res.data.user.user_id);
							localStorage.setItem('U_relname', res.data.user.realname);
							this.$api
								.post('api/Reviewer/agreeReviewerArticle', {
									art_rev_id: this.Art_id
								})
								.then(res => {
									if (res.code == 0) {
										this.$message.success('Review now successfully!');
										this.getData();
									} else {
										this.$message.error(res.msg);
									}
								})
								.catch(err => {
									this.$message.error(err);
									this.loading = false;
								});
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			}
		},
		methods: {
			getData() {
				// 获取文章信息
				this.$api
					.post('api/Reviewer/getartrevdate', {
						'revid': this.Art_id,
						'human': 'reviewer'
					})
					.then(res => {
						let date = new Date(parseInt(res.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.ctime = Y + M + D;

						this.txt_mess = res
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('api/Reviewer/getAFilelistByID ', {
						'revid': this.Art_id
					})
					.then(res => {
						for (var i = 0; i < res.data.length; i++) {
							let date = new Date(parseInt(res.data[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[i].ctime = Y + M + D;
						}
						this.fileList = res.data
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('api/Reviewer/getBFilelistByID', {
						'revid': this.Art_id
					})
					.then(res => {
						for (var i = 0; i < res.data.length; i++) {
							let date = new Date(parseInt(res.data[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[i].ctime = Y + M + D;
						}
						this.picList = res.data
					})
					.catch(err => {
						this.$message.error(err);
					});
			},



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

			},

			// 拒绝
			saveRef() {
				// 二次确认
				this.$confirm('Are you sure you want to refuse?', 'Tips', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/Reviewer/refuseReviewerArticle', {
								art_rev_id: this.Art_id
							})
							.then(res => {
								if (res.code == 0) {
									this.$router.go(-1)
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
		},
		mounted() {

		},

	}
</script>

<style scoped>
	.tet_list {
		font-size: 20px;
	}

	.box-card {
		margin-bottom: 20px;
		line-height: 24px;
	}

	.upload-txtc .el-upload-list__item .el-icon-upload-success {
		display: none !important;
	}

	.tet_list h5 {
		font-size: 15px;
		margin: 20px 0 5px 0;
		font-weight: normal;
		display: inline-block;
	}

	.tet_list p {
		font-family: Calibri;
		line-height: 22px;
		font-size: 16px;
	}

	.file_sty {
		margin-bottom: 6px;
		font-size: 14px;
	}


	.red {
		color: #ff0000;
	}

	.el-collapse {
		border-top: 0;
		border-bottom: 0;
	}

	.top_dao:hover {
		text-decoration: underline;
		cursor: pointer;
	}

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

	.trah_c .icon_img {
		width: 24px;
		height: 24px;
		margin: 0 20px;
	}

	.el-divider {
		background-color: #006699;
	}
</style>
