<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i>
					<router-link :to="{path:'/articleList'}">
						<span class="top_dao"> Manuscript list</span>
					</router-link>
					>> Manuscript process
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state">
			<p style="color: #888;margin: 10px 0 5px 0;">ID : {{artMes.accept_sn}}</p>
			<p style="font-size: 16px;font-weight: bolder;letter-spacing: -0.5px;">
				<!-- <span class="art_type">{{ellType(artMes.type)}}</span> -->
				{{artMes.title}}
			</p>
			<!-- <p style="color: #7f8790;margin: 10px 0 0 0;">Follow the progress of your submission.</p> -->
			<div class="tit_head">
				Status : <b style="margin: 0 50px 0 0;">{{statetostr(artMes.laststate)}}</b>
				Journal : <b>{{artMes.journalname}}</b>
			</div>
			<el-row :gutter="30">
				<el-col :span="15">
					<div class="process_new">

						<!-- <p style="width: 100%;height: 1px;background-color: #eee;margin: 35px 0 30px 0;"></p> -->
						<h2 style="font-size: 18px;margin: 0 0 10px 0;float: left;letter-spacing: -0.8px;">Manuscript
							Tracking</h2>
						<!-- <div class="radio" style="float: right;">
						<el-radio-group v-model="reverse">
							<el-radio-button :label="false">Ascending</el-radio-button>
							<el-radio-button :label="true">Descending</el-radio-button>
						</el-radio-group>
					</div> -->
						<br clear="both">
						<el-timeline :reverse="reverse" class="author_tree">
							<el-timeline-item v-for="(item, index) in prossMsgs" :icon="item.icon" :color="item.color"
								size="large" :key="index" :timestamp="formatDate(item.ctime)" placement="top" v-if="item.ftype == 0">
								<el-card>
									<p>
										<font>{{ statetostr(item.state_to) }}</font>
										<!-- 提交 -->
										<font v-if="item.state_to==-1">
											<!-- : <font style="margin-left: 5px;">First submitted to <b>{{artMes.journalname}}</b></font> -->
										</font>
										<!-- 给编辑 -->
										<font v-if="item.state_to==1">
											<!-- : <b style="margin-left: 5px;"> Submission checks complete</b> -->
										</font>
										<!-- 审查中 -->
										<font v-if="item.state_to==2">
											<!-- : <b style="margin-left: 5px;"> Editor assigned</b> -->
										</font>
										<!-- 拒绝 -->
										<font v-if="item.state_to==3">
											<!-- : <b> Reject manuscript</b> -->
										</font>
										<!-- 修改 -->
										<font v-if="item.state_to==4">
											:
											<router-link
												:to="{path:'/articleProcessRevision',query:{id:artMes.article_id}}"
												v-if="item.back==1">
												<b style="margin-left: 5px;color: #006699;text-decoration: underline;">Upload
													Major Revision</b>
											</router-link>
											<b style="margin-left: 5px;color: #888;text-decoration: underline;"
												v-if="item.back==0">
												Upload Major Revision (Completed)
											</b>
										</font>
										<!-- 接收 -->
										<font v-if="item.state_to==5">
											<!-- : <b style="margin-left: 5px;"> Successfully received manuscript</b> -->
										</font>
									</p>
								</el-card>
							</el-timeline-item>
						</el-timeline>
					</div>
				</el-col>
				<el-col :span="9">
					<!-- 审稿人列表 -->
					<!-- <div class="art_process_">
						<h2>
							Coment from reviewers
						</h2>
						<div style="max-height: 300px;overflow-y: auto;">
							<div class="art_process_list">
								<b>1</b>reviewers <span>202-50-60</span>
								<p>reviewersreviewersreviewersreviewersreviewers</p>
							</div>
							<div class="art_process_list">
								<b>1</b>reviewers <span>202-50-60</span>
								<p>reviewersreviewersreviewersreviewersreviewers</p>
							</div>
						</div>
					</div> -->

					<!-- 对话列表 -->
					<div class="kuang_communtion">
						<h2>
							Communication
						</h2>
						<div v-for="item in talkMsgs" class="kuang_communtion_conmt">
							<div v-if="item.user_id != artMes.user_id" class="talk_aued">
								<p>
									Editor :
								</p>
								<el-card>
									<p style="white-space: pre-wrap;">{{ item.ad_content }}</p>
								</el-card>
								<b>{{formatDate(item.ad_ctime)}}</b>
							</div>
							<div v-if="item.user_id == artMes.user_id" class="talk_aued talk_edit">
								<p>
									Author :
								</p>
								<el-card>
									<p style="white-space: pre-wrap;">{{ item.ad_content }}</p>
								</el-card>
								<b>{{formatDate(item.ad_ctime)}}</b>
							</div>
						</div>

						<div class="kuang_communtion_input">
							<p v-if="talkMsgs"></p>
							<span class="text_bor_ghu">
								<el-input type="textarea" rows="3" v-model="msgform.ad_content"
									placeholder="You can initiate short conversations with the editor." resize="none">
								</el-input>
								<el-button type="primary" @click="saveMsg">Send</el-button>
							</span>

							<font style="font-size: 12px;color: #999;padding:12px 5px 0 5px;display: block;">
								This column is served as an instant correspondence between the editor and authors,
								aiming to acquire a faster
								way of communication than E-Mail. If you have any questions, please start the instant
								corresponding, and the
								editors will reply to you in 24 hours.
								<br>
								<font style="color: #006699;">Please Attention</font>
								<br>
								<font style="color: #006699;">1.</font> If you need to send files as attachments, please
								send them to
								tmr@tmrjournals.com
								<br>
								<font style="color: #006699;">2.</font> Please do not upload the primary documents like
								the cover letter, the
								reply to the reviewer comments,
								etc.
							</font>
						</div>
					</div>
					<p style="line-height: 20px;color: #999;padding: 0 15px 0 15px;">
						We encourage authors to upload a Cover Letter file and make sure the Highlights part in the main
						manuscript is
						after the abstract and keywords. That will help authors let editors quickly obtain information
						and evaluate the
						scientific value of their research correctly.
						<br>Please remind our editor in the cover letter if you want your manuscript processed quickly.
						<br>Please note that manuscripts with at least one of the following characteristics will be
						included in the
						journal's manuscript fast track:
						<br>
						<font style="color: #006699;">1.Interest:</font> This manuscript has a novel perspective.
						<br>
						<font style="color: #006699;">2.Importance:</font> This manuscript belongs to the focus area.
						<br>
						<font style="color: #006699;">3.Value:</font> This manuscript belongs to the advanced topic and
						can attract wide
						attention.
					</p>
				</el-col>
			</el-row>

		</div>

		<el-dialog title="Message" :visible.sync="editVisible" width="40%">
			<el-form ref="msgform" :model="msgform" label-width="80px">
				<el-form-item label="Message">
					<el-input type="textarea" rows="5" v-model="msgform.content" placeholder="Author messages">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveMsg" :loading="saveloading">save</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				articleId: this.$route.query.id,
				userName: localStorage.getItem('U_name'),
				loading: false,
				reverse: false,
				artMes: {
					articleId: this.$route.query.id
				},
				msgform: {
					username: localStorage.getItem('U_name'),
					article_id: this.$route.query.id,
					ad_content: ''
				},
				query_review: {
					articleId: this.$route.query.id,
					pageIndex: 1,
					pageSize: 10
				},
				prossMsgs: [],
				talkMsgs: [],
				review_Data: [],

				editVisible: false,
				saveloading: false
			};
		},
		created: function() {
			this.initarticle();
		},
		computed: {

		},
		methods: {
			//初始化文章信息
			initarticle() {
				this.$api
					.post('api/Article/getArticleDetail', {
						articleId: this.articleId,
						human: 'author'
					})
					.then((res) => {
						let back_num = 0
						// 添加投递稿件条目
						res.msg.unshift({
							state_to: -1,
							ctime: res.article.ctime,
							color: '#B5C334',
							icon: 'el-icon-collection-tag',
							ftype: 0,
						});
						for (let i = res.msg.length - 1; i >= 0; i--) {
							if (res.msg[i].state_to == 4 && res.msg[i + 1] == undefined && back_num == 0) {
								res.msg[i].back = 1;
								back_num = 1
							} else {
								res.msg[i].back = 0;
							}
							if (res.msg[i].state_to == 1) {
								res.msg[i].color = '#f75822'
								res.msg[i].icon = 'el-icon-document-checked'
							}
							if (res.msg[i].state_to == 2) {
								res.msg[i].color = '#0ebee1'
								res.msg[i].icon = 'el-icon-document'
							}
							if (res.msg[i].state_to == 3) {
								res.msg[i].color = '#888'
								res.msg[i].icon = 'el-icon-close'
							}
							if (res.msg[i].state_to == 4) {
								res.msg[i].color = '#5a90e1'
								res.msg[i].icon = 'el-icon-edit-outline'
							}
							if (res.msg[i].state_to == 5) {
								res.msg[i].color = '#91cc75'
								res.msg[i].icon = 'el-icon-check'
							}
							if (res.msg[i].state_to == 6) {
								res.msg[i].color = '#27727B'
								res.msg[i].icon = 'el-icon-star-off'
							}
						}
						this.artMes = res.article;
						this.artMes.laststate = res.msg[res.msg.length - 1].state_to;
						this.prossMsgs = res.msg;
					})
					.catch((err) => {
						console.log(err);
					});

				// 留言板列表
				this.$api
					.post('api/Article/getArticleDialogs', {
						article_id: this.$route.query.id
					})
					.then((res) => {
						this.talkMsgs = res.data.dialogs;
					})
					.catch((err) => {
						console.log(err);
					});

				// 获取编辑列表数据
				this.$api
					.post('api/Article/getReviewerList', this.query_review)
					.then((res) => {
						this.review_Data = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 日期
			formatDate(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + ' ' + h + ':' + m + ':' + s;
			},

			// 对话框
			authormsg() {
				this.editVisible = true;
			},

			// 保存留言
			saveMsg() {
				if (this.msgform.ad_content == '') {
					this.$message.error('Please input messages');
					return false;
				}
				this.loading = true;
				this.$api.post('api/Article/pushArticleDialog', this.msgform)
					.then((res) => {
						this.loading = false;
						this.$message.success('Sent successfully');
						this.initarticle()
					});
			},

			statetostr(mystate) {
				let str = '';
				switch (mystate) {
					case -1:
						str = 'Submitted';
						break;
					case 0:
						str = 'Received';
						break;
					case 1:
						str = 'With editor';
						break;
					case 2:
						str = 'Under review';
						break;
					case 3:
						str = 'Reject';
						break;
					case 4:
						str = 'Revision';
						break;
					case 5:
						str = 'Accepted';
						break;
					case 6:
						str = 'Pre-accept';
						break;
					default:
						str = 'error!!';
				}
				return str;
			},

			ellType(e) {
				let frag = '';
				switch (e) {
					case "A":
						frag = 'Article';
						break;
					case 'B':
						frag = 'Review';
						break;
					case 'C':
						frag = 'Case report';
						break;
					case 'P':
						frag = 'Research proposal';
						break;
					case 'N':
						frag = 'News';
						break;
					case 'T':
						frag = 'Comment';
						break;
					case 'CT':
						frag = 'Correction';
						break;
					case 'HT':
						frag = 'Hypothesis';
						break;
					case 'PF':
						frag = 'Preface';
						break;
					case 'ET':
						frag = 'Editorial';
						break;
					case 'RP':
						frag = 'Report';
						break;
					case 'LR':
						frag = 'Letter';
						break;
					case 'EF':
						frag = 'Empirical formula';
						break;
					case 'EM':
						frag = 'Evidence-based medicine';
						break;
					case 'EC':
						frag = 'Expert consensus';
						break;
					case 'LTE':
						frag = 'Letter to editor';
						break;
					case 'QI':
						frag = 'Questionnaire investigation';
						break;
					case 'PT':
						frag = 'Protocol';
						break;
					case 'CS':
						frag = 'Case Series';
						break;
					case 'RT':
						frag = 'Retraction';
						break;
					case 'MR':
						frag = 'Mini Review';
						break;
					default:
						frag = 'Others';
				}
				return frag;
			},

		},
		filters: {

		}
	};
</script>


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

	.process_new {
		border: 1px solid #dcdfe6;
		padding: 20px;
		background-color: #fff;
		border-radius: 5px;
	}

	.art_type {
		/* background-color: #ddeef7; */
		color: #006699;
		padding: 2px 5px;
		border-radius: 5px;
		font-size: 12px;
		margin: 0 10px 0 0;
	}

	.tit_head {
		border-radius: 5px;
		border: 1px solid #EBEEF5;
		padding: 20px;
		font-size: 15px;
		margin: 20px 0 30px 0;
		background-color: #fff;
		/* background-color: #fcfcfc; */
	}

	.tit_head b {
		color: #006699;
		/* text-decoration: underline; */
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		background-color: #006699;
		border-color: #006699;
	}

	.author_tree {
		margin: 40px 0 0 10px;
	}

	.author_tree .el-timeline-item {
		padding-bottom: 1px;
	}

	.author_tree .el-timeline-item__node--large {
		left: 155px;
		width: 30px;
		height: 30px;
	}

	.author_tree .el-timeline-item__wrapper {
		padding-left: 0;
		margin: 0 0 50px 0;
	}

	.author_tree .el-timeline-item__timestamp.is-top {
		padding-top: 10px;
		margin-bottom: 13px;
		font-size: 14px;
	}

	.author_tree .el-timeline-item__content {
		margin: -50px 0 0 210px;
	}

	.author_tree .el-timeline-item__tail {
		height: auto;
		bottom: 15px;
		top: 45px;
		border-left: 3px solid #E4E7ED;
		/* border-left: 2px solid #66a3c2; */
		left: 168px;
	}

	.art_process_ {
		margin-bottom: 30px;
		border: 1px solid #dcdfe6;
		padding: 20px;
		background-color: #fff;
		border-radius: 5px;
	}

	.art_process_>h2 {
		font-size: 18px;
		margin: 0 0 2px 0;
		letter-spacing: -0.8px;
	}

	.art_process_list {
		border-bottom: 1px solid #dcdfe6;
		padding: 15px 0 25px 10px;
	}

	.art_process_ .art_process_list:last-child {
		border-bottom: 0;
		padding-bottom: 5px;
	}

	.art_process_list b {
		background-color: #006699;
		color: #fff;
		display: inline-block;
		width: 18px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		margin: 0 10px 0 0;

	}

	.art_process_list span {
		color: #888;
		margin: 0 0 0 15px;
	}

	.art_process_list p {
		margin: 10px 0 0 28px;
	}
</style>
