<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 process_new">
			<p style="font-size: 16px;font-weight: bolder;">
				<span class="art_type">{{ellType(artMes.type)}}</span>
				{{artMes.title}}
			</p>
			<p style="color: #7f8790;margin: 10px 0 0 0;font-size: 14px;">Follow the progress of your submission.</p>
			<div class="tit_head">
				This submission is <b>{{statetostr(artMes.laststate)}}</b>
				at <b>{{artMes.journalname}}.</b>
			</div>

			<p style="width: 100%;height: 1px;background-color: #eee;margin: 35px 0 30px 0;"></p>

			<el-row :gutter="80">
				<el-col :span="24">
					<h2 style="font-size: 18px;margin: 0 0 30px 0;float: left;">Manuscript process</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">
										: <b style="margin-left: 5px;">First submitted to {{artMes.journalname}}</b>
									</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==4">
										:
										<router-link :to="{path:'/articleList',query:{art_id:artMes.article_id}}" v-if="item.back==1">
											<b style="margin-left: 5px;color: #006699;text-decoration: underline;">Major revision</b>
										</router-link>
										<b style="margin-left: 5px;color: #888;text-decoration: underline;" v-if="item.back==0">
											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>
				</el-col>
				<!-- <el-col :span="9">
					<h2 style="font-size: 18px;margin: 0 0 30px 0;">Talking</h2>
					<el-button type="primary" icon="el-icon-edit" round style="margin-left: 28px" @click="authormsg">Edit message</el-button>
				</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: ''
				},
				prossMsgs: [],
				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 && 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 = '#f3170f'
								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;
						console.log(this.prossMsgs)
					})
					.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.content == '') {
					this.$message.error('Please input messages');
					return false;
				}
				this.saveloading = true;
				this.$api.post('api/Article/authorMessage', this.msgform)
					.then((res) => {
						this.saveloading = false;
						this.$message.success('Sent successfully');
						this.$router.go(0);
					});
			},
			statetostr(mystate) {
				let str = '';
				switch (mystate) {
					case -1:
						str = 'Manuscript Submission';
						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 = 'Fininal decision';
						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 '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;
					default:
						frag = 'OTHERS';
				}
				return frag;
			},

		},
		filters: {

		}
	};
</script>


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

	.process_new {
		color: #333;
	}

	.art_type {
		color: #fff;
		background-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: 30px 0;
		background-color: #fcfcfc;
	}

	.tit_head b:nth-child(1) {
		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__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;
	}
</style>
