<template>
	<div>
		<el-row :gutter="10">
			<!-- 主体内容区域 -->
			<el-col :md="24" :lg="18">
				<el-card shadow="never" class="box-card" style="">
					<el-divider content-position="center">ARTICLE INFROMATION</el-divider>
					<!-- 文章信息 -->
					<div class="tet_list" :model="articleInfo">
						<h4>{{articleInfo.title}}</h4>
						<h5>
							<a :href="articleInfo.website" target="_blank"
								class="titlink">{{articleInfo.journal_title}}</a>
							<span style="margin: 0 10px;"> >> </span>
							Manuscript ID: {{articleInfo.accept_sn}}
						</h5>
						<!-- <p style="display:inline-block;margin: 0 35px;"><b>Type :</b> {{articleInfo.atype}}</p> -->
						<p style="display:inline-block; margin: 0 35px;"><b>Submitted time :</b>
							{{articleInfo.ctime|formatDate()}}
						</p>
						<div style="overflow: hidden;">
							<p><b>Abstract :</b> <br>{{articleInfo.abstrart}}</p>
							<el-row :gutter="10" style="margin: 30px 0;" class="flexbox">
								<el-col :span="12" class="file">
									<!-- 稿件主体 -->
									<h6>Manuscript:</h6>
									<div class="file_sty" v-for="item in fileList.manuscript">
										<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
										<a :href='mediaUrl+item.file_url' target="_blank" class="txt_pdf">
											<!-- {{item.type_name}}  -->
											<!-- Revised manuscript -->
											<span
												style="color: #888;font-size: 13px;">{{item.ctime|formatDate()}}</span>
											<i class="el-icon-download"
												style="margin-left: 20px;color: #66b1ff;font-weight: bold;"></i>
										</a><br>
									</div>
								</el-col>
								<el-col :span="12" class="file"
									v-if="fileList.response && fileList.response.length > 0">
									<!-- 作者对审稿人的话 -->
									<h6>Response to reviewers:</h6>
									<div class="file_sty" v-for="item in fileList.response">
										<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
										<a :href='mediaUrl+item.file_url' target="_blank" class="txt_pdf">response to
											reviewers
											<span
												style="margin-left: 50px;color: #888;font-size: 13px;">{{item.artr_ctime|formatDate()}}</span>
											<i class="el-icon-download"
												style="margin-left: 20px;color: #66b1ff;font-weight: bold;"></i>
										</a><br>
									</div>
								</el-col>
							</el-row>
							<el-row :gutter="10" style="margin: 30px 0;" class="flexbox">
								<el-col :span="12" class="file" v-if="fileList.figures && fileList.figures.length > 0">
									<!-- 任意类型的文件 -->
									<h6>Figures:</h6>
									<div class="file_sty" v-for="item in fileList.figures">
										<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
										<a :href='mediaUrl+item.file_url' target="_blank" class="txt_pdf">figures
											<span
												style="margin-left: 50px;color: #888;font-size: 13px;">{{item.ctime|formatDate()}}</span>
											<i class="el-icon-download"
												style="margin-left: 20px;color: #66b1ff;font-weight: bold;"></i>
										</a><br>
									</div>
								</el-col>
								<el-col :span="12" class="file"
									v-if="fileList.supplementary && fileList.supplementary.length > 0">
									<!-- 补充材料文件 -->
									<h6>Supplementary material:</h6>
									<div class="file_sty" v-for="item in fileList.supplementary">
										<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
										<a :href='mediaUrl+item.file_url' target="_blank" class="txt_pdf">supplementary
											material
											<span
												style="margin-left: 50px;color: #888;font-size: 13px;">{{item.ctime|formatDate()}}</span>
											<i class="el-icon-download"
												style="margin-left: 20px;color: #66b1ff;font-weight: bold;"></i>
										</a><br>
									</div>
								</el-col>
							</el-row>

						</div>
					</div>
					<!-- end -->
					<el-form :model="questionform" ref="question" label-width="300px" label-position="top"
						:rules="questionformRule">
						<el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
						<el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
							<el-radio-group v-model="questionform.recommend" style="line-height: 30px;">
								<el-radio :label="1">Accept</el-radio>
								<el-radio :label="2">Reject</el-radio>
								<!-- 退修改 -->
								<el-radio :label="3">Revison</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="Comments to the authors" v-if="questionform.recommend == 3">
							<el-input type="textarea" placeholder="please input content" v-model="questionform.content"
								:rows="8"></el-input>
						</el-form-item>
						<el-form-item label-width="0" style="text-align: center;">
							<el-button type="primary" @click="submit">Submit</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
			<!-- 既往审稿历史 -->
			<el-col :md="24" :lg="6" v-loading="loading">
				<el-card shadow="never" class="box-card" style="">
					<div slot="header" class="clearfix">
						<h4>Peer-review Archive</h4>
					</div>
					<div class="time">
						<el-timeline>
							<el-timeline-item reverse="true" :timestamp="item.ctime|formatDatehms" placement="top"
								v-for="(item, index) in recordList" :key="index">
								<el-card>
									<h4></h4>
									<div>
										<div v-if="index == recordList.length-1">
											<!-- 初审 -->
											<el-tag>Under review</el-tag>
											<p style="margin-top: 10px;">Comments: <el-button style="margin-left:10px;"
													type="text" @click="showUnderReview(item)"
													icon="el-icon-view">Details</el-button></p>

										</div>
										<div v-else>
											<!-- 复审 -->
											<el-tag type="success">Second review</el-tag>
											<p style="margin-top: 10px;">Comments: <el-button style="margin-left:10px;"
													type="text" @click="showSecondReview(item)"
													icon="el-icon-view">Details</el-button></p>
											<p v-if="item.stime>0" style="" class="stime">
												Response time: {{item.stime|formatDatehms}}
											</p>
											<p v-else style="" class="stime">
												Response time: Re-reviewing...
											</p>
										</div>
									</div>
								</el-card>
							</el-timeline-item>
						</el-timeline>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 初审问卷 -->
		<el-dialog title="Feedback questionnaire" :visible.sync="dialogFormVisible" width="900px"
			@close="closeUnderDia">
			<el-form :model="undeQuestion" ref="question" label-width="300px" label-position="top">
				<el-divider content-position="center">REFEREE'S ASSESSMENT</el-divider>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="1.Originality of the topic">
							<el-radio-group v-model="undeQuestion.qu1">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="2.Importance in its Field">
							<el-radio-group v-model="undeQuestion.qu3">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="3.Does the manuscript fall within the aim and scope of the journal?">
							<el-radio-group v-model="undeQuestion.qu6">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="4.English language">
							<el-radio-group v-model="undeQuestion.qu8">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="5.Readily Understandable">
							<el-radio-group v-model="undeQuestion.qu5">
								<el-radio :label="1">Excellent</el-radio>
								<el-radio :label="2">Good</el-radio>
								<el-radio :label="3">Fair</el-radio>
								<el-radio :label="4">Poor</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-collapse>
							<el-form-item label="6.Does the title represent manuscript's contents?">
								<el-col :span="8">
									<el-radio-group v-model="undeQuestion.qu9">
										<el-radio :label="true">Yes</el-radio>
										<el-radio :label="false">No</el-radio>
									</el-radio-group>
								</el-col>
								<el-col :span="12">
									<el-collapse-item name="1" style="margin-top: -10px;">
										<template slot="title">
											<i class="el-icon-edit"></i>Comments/ Suggestions
										</template>
										<el-input type="textarea" placeholder="please input content"
											v-model="undeQuestion.qu9contents" :rows="4"></el-input>
									</el-collapse-item>
								</el-col>
							</el-form-item>
						</el-collapse>
					</el-col>
				</el-row>


				<el-collapse>
					<el-form-item label="7.Is the Abstract accurate and concise?">
						<el-col :span="4">
							<el-radio-group v-model="undeQuestion.qu10">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="2" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content"
									v-model="undeQuestion.qu10contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="8.Are the approach/ methods properly described?">
						<el-col :span="4">
							<el-radio-group v-model="undeQuestion.qu11">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="3" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content"
									v-model="undeQuestion.qu11contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="9.Are the conclusions and interpretations sound?">
						<el-col :span="4">
							<el-radio-group v-model="undeQuestion.qu12">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="4" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content"
									v-model="undeQuestion.qu12contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>
					<el-form-item label="10.Are the references properly cited?">
						<el-col :span="4">
							<el-radio-group v-model="undeQuestion.qu13">
								<el-radio :label="true">Yes</el-radio>
								<el-radio :label="false">No</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="20">
							<el-collapse-item name="5" style="margin-top: -10px;">
								<template slot="title">
									<i class="el-icon-edit"></i>Comments/ Suggestions
								</template>
								<el-input type="textarea" placeholder="please input content"
									v-model="undeQuestion.qu13contents" :rows="4"></el-input>
							</el-collapse-item>
						</el-col>
					</el-form-item>

					<el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
					<el-form-item label="Overall the Paper is Rated">
						(Poor------------------------Excellent)
						<br />
						<el-radio-group v-model="undeQuestion.rated" size="small">
							<el-radio-button label="1"></el-radio-button>
							<el-radio-button label="2"></el-radio-button>
							<el-radio-button label="3"></el-radio-button>
							<el-radio-button label="4"></el-radio-button>
							<el-radio-button label="5"></el-radio-button>
							<el-radio-button label="6"></el-radio-button>
							<el-radio-button label="7"></el-radio-button>
							<el-radio-button label="8"></el-radio-button>
							<el-radio-button label="9"></el-radio-button>
							<el-radio-button label="10"></el-radio-button>
						</el-radio-group>
						<span style="margin-left: 20px;">>Your score:{{undeQuestion.rated}}</span>
					</el-form-item>
					<el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
						<el-radio-group v-model="undeQuestion.recommend" style="line-height: 30px;">
							<el-radio :label="1">Accept with minor revision</el-radio>
							<br />
							<el-radio :label="2">Accept with major revision</el-radio>
							<br />
							<el-radio :label="3">Reject in current form, but may be resubmitted</el-radio>
							<br />
							<el-radio :label="4">Reject, with no resubmission</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="OTHER SPECIFIC CRITICISMS">
						<el-radio-group v-model="undeQuestion.other" style="line-height: 30px;">
							<el-radio :label="1">Imperfect style</el-radio>
							<br />
							<el-radio :label="2">Too long</el-radio>
							<br />
							<el-radio :label="3">References incorrectly presented</el-radio>
							<br />
							<el-radio :label="4">Typographical and Grammatical errors</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="Comments for the Authors">
						<el-input type="textarea" placeholder="please input content" v-model="undeQuestion.comments"
							:rows="8"></el-input>
					</el-form-item>
					<el-form-item label="Confidential Comments to the Editor">
						<el-input type="textarea" placeholder="please input content" v-model="undeQuestion.confidential"
							:rows="8"></el-input>
					</el-form-item>
					<el-form-item label="Please choose disclose your name or remain anonymous.">
						<el-radio-group v-model="undeQuestion.is_anonymous" style="line-height: 30px;">
							<el-radio :label="0">Disclose name</el-radio>
							<br />
							<el-radio :label="1">Remain anonymous</el-radio>
						</el-radio-group>
						<p style="line-height: 20px;color: #aaa;font-size: 13px;margin: 12px 0 0 0;">
							If you agree to disclose your name, we will acknowledge you by name in the published
							PDF. However, if you prefer to remain anonymous, we will still express our gratitude
							by thanking you as an anonymous reviewer.
							<br />For example, {{articleInfo.journal_title}} would like to thank AAAAAAAA, BBBBBBBB, and
							other anonymous reviewers for their
							invaluable contributions to the peer review process of this paper.
						</p>
					</el-form-item>
				</el-collapse>
			</el-form>
		</el-dialog>
		<!-- 复审问卷 -->
		<el-dialog title="Second review questionnaire" :visible.sync="FdialogFormVisible" width="900px"
			@close="closeSecDia">
			<el-form :model="ReReviewQuestion" ref="question" label-width="300px" label-position="top">
				<el-divider content-position="center">REFEREE'S RECOMMENDATIONS</el-divider>
				<el-form-item label="REFEREE'S RECOMMENDATIONS" prop="recommend">
					<el-radio-group v-model="ReReviewQuestion.recommend" style="line-height: 30px;">
						<el-radio :label="1">Accept</el-radio>
						<el-radio :label="2">Reject</el-radio>
						<!-- 退修改 -->
						<el-radio :label="3">Revison</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="Comments to the authors" v-if="ReReviewQuestion.recommend == 3">
					<el-input type="textarea" placeholder="please input content" v-model="ReReviewQuestion.content"
						:rows="8"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				questionform: {
					art_rev_rep_id: null,
					recommend: null,
					content: ''
				},
				// form:{},
				questionformRule: {
					recommend: [{
						required: true,
						message: 'Please select your recommendation',
						trigger: 'blur'
					}, ]
				},
				recordList: [],
				articleInfo: {},
				fileList: {},
				mediaUrl: this.Common.mediaUrl,
				dialogFormVisible: false,
				txt_mess: {},
				undeQuestion: {},
				FdialogFormVisible: false,
				ReReviewQuestion: {}
			}
		},
		created() {
			this.getHistoryList()
		},
		methods: {
			// 显示复审对话框
			showSecondReview(item) {
				this.FdialogFormVisible = true
				this.ReReviewQuestion = item
			},
			// 关闭初审对话框
			closeUnderDia() {
				this.dialogFormVisible = false
				this.undeQuestion = {}
			},
			closeSecDia() {
				this.FdialogFormVisible = false
				this.ReReviewQuestion = {}
			},
			// 显示初审对话框
			showUnderReview(item) {
				this.dialogFormVisible = true
				this.undeQuestion = item
			},
			// 提交复审
			submit() {
				this.$refs['question'].validate((valid) => {
					if (valid) {
						// console.log(this.questionform,'this.questionform')                   
						this.$api
							.post('api/Reviewer/questionRepeat', this.questionform)
							.then(res => {
								this.loading = false;
								if (res.code == 0) {
									this.$message.success('successed !')
									this.$router.push('/peerewer')
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.loading = false;
								console.log(err);
							});
					}
				})
			},

			// 获取历史审稿列表
			getHistoryList() {
				this.loading = true
				this.$api
					.post('api/Reviewer/getReviewerRepeatDetail', {
						'art_rev_id': this.$route.query.Art_id
					})
					.then(res => {
						this.loading = false;
						if (res.code == 0) {
							this.questionform.art_rev_rep_id = res.data.art_rev_info.question[res.data.art_rev_info
								.question.length - 1].art_rev_rep_id
							this.articleInfo = res.data.article_info
							this.fileList = res.data.files
							this.recordList = res.data.art_rev_info.question.reverse()

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.loading = false;
						console.log(err);
					});
			}
		}
	}
</script>

<style scoped>
	.time p {
		color: #606266;
	}

	.flexbox {
		display: flex;
	}

	.file_sty {
		margin-bottom: 6px;
	}

	.titlink {
		color: #006699;
		text-decoration: underline;
		cursor: pointer;
	}

	.file:not(:first-child) {
		padding-left: 15px !important;
	}

	.file_sty a {
		color: #606266;
		font-size: 14px;
	}

	.file_sty a:hover {
		text-decoration: underline;
	}

	.file_sty .icon_img {
		vertical-align: middle;
		margin-right: 10px;
	}

	.tet_list {
		font-size: 20px;
	}

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

	.tet_list h6 {
		margin-top: 0;
		margin-bottom: 15px;
	}

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

	}
</style>