<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> Manuscript list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state">
			<div class="handle-box" style="margin: 20px 0;">
				<el-select v-model="query.journal" @change="getdate" placeholder="Please select journal"
					style="width: 180px;">
					<el-option :key="0" label="All journals" :value="0"></el-option>
					<el-option v-for="item in items" :key="item.journal_id" :label="item.title"
						:value="item.journal_id"></el-option>
				</el-select>
				<el-select v-model="query.state" @change="getdate" placeholder="Please select status"
					style="margin-left:10px;width: 110px;">
					<el-option :key="0" label="All status" :value="0"></el-option>
					<el-option :key="1" :label="$t('artstate.state1')" :value="1"></el-option>
					<el-option :key="2" :label="$t('artstate.state2')" :value="2"></el-option>
					<el-option :key="3" :label="$t('artstate.state3')" :value="3"></el-option>
					<el-option :key="4" :label="$t('artstate.state4')" :value="4"></el-option>
					<el-option :key="5" :label="$t('artstate.state5')" :value="5"></el-option>
				</el-select>
				<el-input v-model="query.name" placeholder="Title" style="margin:0 10px;width: 190px;"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">Search</el-button>
				<el-button type="primary" icon="el-icon-edit-outline" @click="addArticle"
					style="float: right;width: 190px;">New
					Submission</el-button>
			</div>

			<!-- <el-table :data="tableData" border ref="multipleTable">
				<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
				<el-table-column label="Title" align="center">
					<template slot-scope="scope">
						<el-badge is-dot :hidden="scope.row.editor_act==1?false:true" class="item">
							{{scope.row.title}}
						</el-badge>
					</template>
				</el-table-column>
				<el-table-column prop="journalname" label="Journal" align="center"></el-table-column>
				<el-table-column prop="accept_sn" label="Manuscript ID" align="center"></el-table-column>
				<el-table-column prop="state" label="Status" :formatter="stateFormat" align="center" width="100"></el-table-column>
				<el-table-column label="" width="180" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain icon="el-icon-tickets" @click="showdetail(scope.row)">detail</el-button>
					</template>
				</el-table-column>
			</el-table> -->

			<div shadow="never" v-for="item in tableData" class="mangu_list" :style="item.state,'1' | stateChange">
				<div style="padding: 20px 20px 20px 20px;position: relative;" :style="item.state,'2' | stateChange">
					<p class="man_title" @click="esy_mtps(item.article_id)">
						<el-badge is-dot :hidden="item.editor_act==1?false:true">
							{{item.title}}
						</el-badge>
					
					</p>
					
					<p style="margin-bottom: 8px;">
						<font style="color: #666b7a;">ID : </font>
						{{item.accept_sn}}
						<font style="color: #666b7a;margin-left: 50px;">Type : </font>
						{{item.type | ellipsis}}
					</p>
					<p class="man_con">
						<!-- <span>{{item.type | ellipsis}}</span> -->
						<font style="color: #666b7a;">Journal : </font>
						<b style="font-weight: normal;">{{item.journalname}}</b>
					</p>
					<p v-if="item.state != 6">
						<font style="color: #666b7a;">
							<i class="el-icon-time" style="margin: 0 5px 0 0;"></i>
							Update Time :
						</font>
						<b style="font-weight: normal;margin: 0 0 0 5px;">{{item.ctime}}</b>
					</p>
					
					<div class="man_state" :style="item.state,'3' | stateChange" >
						<b :style="item.state,'4' | stateChange">
							{{item.state,'tst' | stateChange}}
						</b>
					</div>
					
					<div class="man_btn">
						
						<span @click="esy_mtps(item.article_id)">
							<i class="el-icon-collection"></i>Manuscript Tracking
						</span>
						<font> | </font>
						<span @click="esy_review(item.article_id)">
							<i class="el-icon-document-copy"></i>Reviewer Comments
						</span>
						<font> | </font>
						<span @click="esy_deta(item.article_id)">
							<i class="el-icon-paperclip"></i>My Manuscript
						</span>
						<span v-if="item.state == 6" style="text-decoration: none;">
							<font> | </font>
							<span @click="goPre_ingested(item.article_id)" class="preButton">
								<!-- <el-badge is-dot class="item" > -->
								<i class="el-icon-edit"></i>Enter Pre-accept Process
								<!-- </el-badge>  -->
							</span>
						</span>
						
						
					</div>
					<!-- <el-button v-if="item.state == 6&&item.is_buy==0" size="mini" type="primary"  style="position: absolute;top: 38%;right: 10px;background: #ff5000 !important;border-color: #ff5000 !important;" @click="goOrderConfirmation(item)">Payment</el-button> -->
					<!-- <el-button v-if="item.is_buy==1" size="mini" type="text"  style="position: absolute;top: 38%;right: 10px;color: #ff5000 !important;">{{ $t('pendingPayment.state1') }}</el-button> -->
					<!-- v-if="item.state == 6&&item.is_buy==0" -->
					<!-- <common-paypal-button 
                        :amount="item.article_id"
                        :orderId="item.article_id"
                        @payment-success="handlePaymentSuccess"
                        @payment-error="handlePaymentError"
                    /> -->
				</div>

				<div class="man_progess" v-if="item.state==4" :style="item.state,'2' | stateChange">
					<font style="color: #666b7a;">
						Current Status :
					</font>
					<b style="margin: 0 0 0 5px;color: #5a90e1;">{{item.state,'tst' | stateChange}} </b>
					<router-link :to="{path:'/articleProcessRevision',query:{id:item.article_id}}" style="color: #333;">
						<span style="margin: 0 4px 0 5px;">Click here to :</span>
						<b>Upload Major Revision</b>
					</router-link>
				</div>

				<div class="man_progess" v-if="item.state==3&&item.transinfo!=null"
					:style="item.state,'2' | stateChange">
					<font style="color: #666b7a;">
						Current Status :
					</font>
					<b style="margin: 0 0 0 5px;color: #333;">{{item.state,'tst' | stateChange}} </b>
					<router-link :to="{path:'/articleProcessSwitch',query:{id:item.article_id}}" style="color: #333;">
						<span style="margin: 0 4px 0 5px;">Click here to :</span>
						<b style="color:#333">Transfer Manuscript</b>
					</router-link>
				</div>

				<div class="man_progess" v-if="item.proof==1" :style="7,'7' | stateChange">
					<font style="color: #666b7a;">
						Current Status :
					</font>
					<b style="margin: 0 0 0 5px;color: #5fab3b;">{{7,'tst' | stateChange}} </b>
					<router-link :to="{path:'/articleProcessConfirm',query:{id:item.article_id}}" style="color: #333;">
						<span style="margin: 0 4px 0 5px;">Click here to :</span>
						<b style="color: #5fab3b;">Confirm the Proof</b>
					</router-link>

				</div>

			</div>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 文章内容 -->
		<el-dialog title="Manuscript Basic Information" :visible.sync="artextVisible" width="800px">
			<div class="art_state_message">
				<p>
					<font>Title :</font><b>{{artextForm.title}}</b>
				</p>
				<p>
					<font>ID : </font><b>{{artextForm.accept_sn}}</b>
				</p>
				<p>
					<font>Type :</font><b>{{artextForm.type | ellipsis}}</b>
				</p>
				<p>
					<font>Ethical Approval :</font><b>{{artextForm.approval?'Yes':'No'}}</b>
					<a target="_blank" :href="mediaUrl + artextForm.approval_file" v-if="artextForm.approval==1&&artextForm.approval_file!=''" style="color: #777;">
						<img src="../../assets/img/icon_0.png" style="vertical-align: text-bottom;margin: 0 10px 0 30px;width: 15px;">
						<font>Ethical approval file</font>
						<i class="el-icon-download download" style="vertical-align: middle;margin:0 20px;font-weight: bold;color: #75abf1;"></i>
					</a>
				</p>
				<p v-if="artextForm.approval==0&&artextForm.approval_content!=''">
					<font>Explain the reason clearly :</font><b>{{artextForm.approval_content}}</b>
				</p>
				<p v-if="artextForm.special_num > 0">
					<font>Special Issues :</font><b>{{ artextForm.special_title }}</b>
				</p>
				<p>
					<font>Journal :</font><b>{{artextForm | journal_me}}</b>
				</p>
				<p>
					<font>Major :</font><b>{{artextForm.major}}</b>
				</p>
				<el-collapse v-model="activeNames" class="auth_colla auth_colla_new">
					<el-collapse-item :title="authorList_name" name="1">
						<div v-for="(item, index) in artextForm.authors" class="auth_mess">
							<h4 style="font-weight: bolder;">
								<img src="../../assets/img/state_one.png" v-if="item.isSuper"
									style="width: 15px;margin: 0 2px 0 0;vertical-align: text-bottom;">
								{{item.firstname}} {{item.lastname}} {{item.isSuper?'#':''}}{{item.isReport?'*':''}}
							</h4>
							<div>
								<p v-if="item.email">
									<img src="../../assets/img/state_email.png" v-if="item.isReport"
										style="width: 14px;margin: 0 8px 0 0;vertical-align: text-bottom;">
									<font>Email : </font>{{item.email}}
								</p>
								<p v-if="item.orcid">
									<font>ORCID iD : </font>{{item.orcid}}
								</p>
								<p>
									<font>First Author : </font>
									<b v-if="item.isSuper">Yes</b>
									<b v-if="!item.isSuper">No</b>
								</p>
								<p>
									<font>Corresponding Author :</font>
									<b v-if="item.isReport">Yes</b>
									<b v-if="!item.isReport">No</b>
								</p>
								<p v-if="item.address">
									<font>Address : </font>{{item.address}}
								</p>
								<p v-if="item.company">
									<font>Affiliation : </font>{{item.company}}
								</p>
								<p v-if="item.department">
									<font>Department : </font>{{item.department}}
								</p>
								<p v-if="item.title">
									<font>Title : </font>{{item.title}}
								</p>
								<p v-if="item.country">
									<font>Country : </font>{{item.country}}
								</p>
							</div>
						</div>
					</el-collapse-item>
				</el-collapse>
				<el-collapse class="auth_colla auth_colla_new" style="margin-top: -15px;border-top: 0;">
					<el-collapse-item>
						<template slot="title">
							Abstract
							<font v-if="artextForm.keywords" style="margin-left: 3px;">, Keywords</font>
							<font v-if="artextForm.fund" style="margin-left: 3px;">, Fund</font>
						</template>
						<p>
							<font>Abstract :</font><b>{{artextForm.abstrart}}</b>
						</p>
						<p v-if="artextForm.keywords">
							<font>Keywords :</font><b>{{artextForm.keywords}}</b>
						</p>
						<p v-if="artextForm.fund">
							<font>Fund :</font><b>{{artextForm.fund}}</b>
						</p>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="art_file" style="margin-top: 0;border-top-color:#fff;padding-top: 0;">
				<h4 v-if="coverLetterFileList">Cover letter : </h4>
				<p v-if="coverLetterFileList">
					<a v-for="item in coverLetterFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="coverLetterFileList">
				<h4 v-if="picturesAndTablesFileList">Figures : </h4>
				<p v-if="picturesAndTablesFileList">
					<a v-for="item in picturesAndTablesFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="picturesAndTablesFileList">
				<h4 v-if="totalpageFileList">Title page : </h4>
				<p v-if="totalpageFileList">
					<a v-for="item in totalpageFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="totalpageFileList">
				<h4 v-if="supplementaryFileList">Supplementary Material : </h4>
				<p v-if="supplementaryFileList">
					<a v-for="item in supplementaryFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="supplementaryFileList">
				<h4>Manuscirpt : </h4>
				<p>
					<a v-for="item in manuscirptFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both">
			</div>
		</el-dialog>

		<!-- 审稿人列表 -->
		<el-dialog title="Comments from reviewers" :visible.sync="comentVisible" width="800px">
			<el-collapse v-model="activeComment" v-if="comentDeploy!=''">
				<el-collapse-item v-for="(item,index) in comentDeploy" :name="index" class="art_author_list">
					<template slot="title">
						<b class="com_shu">{{index+1}}</b>
						Reviewer Comment
						<font style="margin: 0 0 0 50px;color: #888;">
							<i class="el-icon-time" style="margin:0 2px 0 0;"></i>
							{{formatDate1(item.ctime)}}
						</font>
					</template>
					<!-- 时间轴 -->
					<el-timeline v-if="item.question && item.question[0] != null">
						<el-timeline-item :timestamp="item1.ctime|formatDatehms" placement="top"
							v-for="(item1, index1) in item.question" :key="index1">
							<el-card>
								<!-- 初审 -->
								<div v-if="index1 == item.question.length-1">
									<h4><el-tag>Under review</el-tag></h4>
									<!-- 内容 -->
									<div class="art_author_coment">
										<p v-if="item1.qu9_contents!=''">
											<font>Does the title represent manuscript's contents?</font>
										<pre>{{item1.qu9_contents}}</pre>
										</p>
										<p v-if="item1.qu10_contents!=''">
											<font>Is the Abstract accurate and concise?</font>
										<pre>{{item1.qu10_contents}}</pre>
										</p>
										<p v-if="item1.qu11_contents!=''">
											<font>Are the approach/ methods properly described?</font>
										<pre>{{item1.qu11_contents}}</pre>
										</p>
										<p v-if="item1.qu12_contents!=''">
											<font>Are the conclusions and interpretations sound?</font>
										<pre>{{item1.qu12_contents}}</pre>
										</p>
										<p v-if="item1.qu13_contents!=''">
											<font>Are the references properly cited?</font>
										<pre>{{item1.qu13_contents}}</pre>
										</p>
										<p v-if="item1.comments!=''">
											<font>Comments for the Authors</font>
										<pre>{{item1.comments}}</pre>
										</p>
									</div>
								</div>
								<div v-else>
									<!-- 复审 -->
									<el-tag type="success">Second review</el-tag>
									<p style="margin-top: 20px;">
										<i class="el-icon-check final Accept"
											v-if="item1.recommend == 1">{{item1.recommend | getOpinion}}</i>
										<i class="el-icon-close final Reject"
											v-if="item1.recommend == 2">{{item1.recommend | getOpinion}}</i>
										<i class="el-icon-refresh-left final Revison"
											v-if="item1.recommend == 3">{{item1.recommend | getOpinion}}</i>
									</p>
									<p class="commentfs" v-if="item1.recommend == 3" style="margin-bottom: 10px;">
										<font style="display: inline-block; margin-right: 20px;">Comments for the
											Authors</font>
									<pre>{{item1.content}}</pre>
									</p>
									<p style="" class="stime" v-if="item1.stime != 0">
										Response time: {{item1.stime|formatDatehms}} * {{item1.stime}}
									</p>
								</div>
							</el-card>
						</el-timeline-item>
					</el-timeline>
					<!-- end -->
				</el-collapse-item>
			</el-collapse>
			<p v-if="comentDeploy==''" style="color: #888888;margin: 0 0 0 10px;">No Comment</p>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				items: '',
				query: {
					username: localStorage.getItem('U_name'),
					// journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem('ms_journal_alias')) : 0,
					journal: 0,
					name: '',
					state: 0,
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				activeNames: [],
				artextForm: {},
				coverLetterFileList: [],
				picturesAndTablesFileList: [],
				totalpageFileList: [],
				manuscirptFileList: [],
				supplementaryFileList: [],
				comentDeploy: [],
				activeComment: [],
				authorList_name: '',
				editVisible: false,
				artextVisible: false,
				comentVisible: false,
				Total: 0
			};
		},
		created() {
			this.initselect();
			this.getdate();
		},
		methods: {
			//初始化期刊选项
			initselect() {
				this.$api
					.post('api/Article/getJournal')
					.then(res => {
						this.items = res;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取文章列表数据
			getdate() {
				this.$api
					.post('api/Article/getArticle', this.query)
					.then(res => {
						this.Total = res.total;
						for (let 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.tableData = res.data
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 1);
				this.getdate();
			},
			//跳转到增加稿件页面
			addArticle() {
				this.$router.push('/articleAdd');
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getdate();
			},
			showdetail(row) {
				// if(row.state==4){
				//     this.$router.push({path:'articleRevise',query:{id:row.article_id}});
				// }else{
				this.$router.push({
					path: 'articleDetail',
					query: {
						id: row.article_id
					}
				});
				// }

			},
			// 显示预收录页面
			goPre_ingested(id) {
				this.$router.push({
					path: 'PreIngested',
					query: {
						id: id
						// id: 3070
					}
				});
			},
			// 点击稿件进程
			esy_mtps(e) {
				this.$router.push({
					path: 'articleProcess',
					query: {
						id: e
					}
				});
			},
			// 点击稿件审稿意见
			esy_review(e) {
				// 审稿人意见
				this.$api
					.post('api/Article/getArticleDetail', {
						articleId: e,
						human: 'author'
					})
					.then(res => {
						// 弹出框
						this.comentDeploy = res.suggest
						this.comentDeploy.map(item => {
							if (item.question && item.question.length > 0)
								item.question = item.question.reverse()
						})
						// this.activeComment = []
						// for (var i = 0; i < res.suggest.length; i++) {
						// 	this.activeComment.push(i)
						// }
						this.comentVisible = true
					})
					.catch(err => {
						console.log(err);
					});

			},
			goOrderConfirmation(data){
this.$router.push({
					path: '/OrderConfirmation',
					query: {
						id: data.article_id
					}
				});
			},
			goOrderConfirmationDetail(data){
this.$router.push({
					path: '/OrderDetail',
					query: {
						id: data.article_id
					}
				});
			},
			// 点击稿件内容文件
			esy_deta(e) {
				this.$api
					.post('api/Article/getArticleDetail', {
						articleId: e,
						human: 'author'
					})
					.then(res => {
						this.artextForm = res.article
						this.artextForm.major = res.major;
						this.artextForm.authors = []
						let alist = res.authors;
						let alist_name = [];
						for (let i in alist) {
							this.artextForm.authors.push({
								art_aut_id: alist[i].art_aut_id,
								firstname: alist[i].firstname,
								lastname: alist[i].lastname,
								orcid: alist[i].orcid,
								company: alist[i].company,
								department: alist[i].department,
								title: alist[i].author_title,
								country: alist[i].country,
								email: alist[i].email,
								address: alist[i].address,
								isSuper: alist[i].is_super == 1 ? true : false,
								isReport: alist[i].is_report == 1 ? true : false
							});
							if (i == alist.length - 1) {
								alist_name.push(alist[i].firstname + ' ' + alist[i].lastname)
							} else {
								alist_name.push(alist[i].firstname + ' ' + alist[i].lastname + ' , ')
							}
						}
						this.authorList_name = "Author : " + alist_name.join("");
						// 弹出框
						this.artextVisible = true
					})
					.catch(err => {
						console.log(err);
					});
				this.$api
					.post('api/Article/getFilelistByArticleID', {
						articleId: e
					})
					.then(res => {
						this.coverLetterFileList = res.coverLetter;
						this.picturesAndTablesFileList = res.picturesAndTables;
						this.manuscirptFileList = res.manuscirpt;
						this.totalpageFileList = res.totalpage;
						this.supplementaryFileList = res.supplementary;
					})
					.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;
			},
			formatDate1(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();
				return Y + M + D;
			},
		},
		filters: {

			// 复审意见结果
			getOpinion(value) {
				switch (value) {
					case 1:
						return 'Accept'
						break;
					case 2:
						return 'Reject'
						break;
					case 3:
						return 'Revison'
						break;
				}
			},

			// 文章类型
			ellipsis(value) {
				let frag = '';
				switch (value) {
					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;
			},

			// 稿件状态,颜色
			stateChange(value, num) {
				let str = '';
				let sgr = '';
				let skr = '';
				let sfr = '';
				let slr = '';
				switch (value) {
					case 0:
						str = '#e1b0271F;';
						sfr = '#e1b02705;';
						sgr = '#e1b0274D;';
						skr = '#e1b027;';
						slr = 'Received';
						break;
					case 1:
						str = '#5a90e11F;';
						sfr = '#5a90e105;';
						sgr = '#5a90e14D;';
						skr = '#5a90e1;';
						slr = 'With editor';
						break;
					case 2:
						str = '#5a90e11F;';
						sfr = '#5a90e105;';
						sgr = '#5a90e14D;';
						skr = '#5a90e1;';
						slr = 'Under review';
						break;
					case 3:
						str = '#8888881F;';
						sfr = '#88888805;';
						sgr = '#8888884D;';
						skr = '#888888;';
						slr = 'Reject';
						break;
					case 4:
						str = '#5a90e11F;';
						sfr = '#5a90e105;';
						sgr = '#5a90e14D;';
						skr = '#5a90e1;';
						slr = 'Revision';
						break;
					case 5:
						str = '#5fab3b1F;';
						sfr = '#5fab3b05;';
						sgr = '#5fab3b4D;';
						skr = '#5fab3b;';
						slr = 'Accept';
						break;
					case 6:
						str = '#5a90e11F;';
						sfr = '#5a90e105;';
						sgr = '#5a90e14D;';
						skr = '#5a90e1;';
						slr = 'Pre-accept';
						break;
					case 7:
						str = '#5fab3b1F;';
						sfr = '#5fab3b05;';
						sgr = '#5fab3b4D;';
						skr = '#5fab3b;';
						slr = 'Proof';
						break;
					default:
						str = '#8888881F;';
						sfr = '#88888805;';
						sgr = '#8888884D;';
						skr = '#888888;';
						slr = 'error!!';
				}
				if (num == '1') {
					return 'border-color:' + sgr;
				}
				if (num == '2') {
					return 'background-color:' + sfr;
				}
				if (num == '3') {
					return 'background-color:' + str + ';border-color:' + sgr;
				}
				if (num == '4') {
					return 'color:' + skr;
				}
				if (num == 'tst') {
					return slr;
				}
			},
			journal_me(e) {
				var frag = e.journalname;
				if (e.special_num > 0) {
					frag += "(Special Issues)";
				}
				return frag;
			},
		},
		computed: {

		}

	};
</script>

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

	.Accept {
		color: #67c23a;
	}

	.Reject {
		color: #909399;
	}

	.Revison {
		color: #e6a23c;
	}

	.final {
		font-size: 20px;
	}

	.preButton {
		display: inline-block;
		position: relative;
	}

	/* .preButton:after{content: ''; display: block; width: 6px; height: 6px; background: #ff0000; position: absolute; right: 0; top: -5px; border-radius: 6px;} */
	.preButton:hover {
		text-decoration: underline !important;
	}

	.container {
		color: #333;
	}

	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.item {
		margin-top: 5px;
	}

	.el-table .hasChange-row {
		background-color: #ffebe8;
	}

	.mangu_list {
		color: #333;
		margin: 0 0 20px 0;
		font-size: 14px;
		/* position: relative; */
		border-radius: 5px;
		border: 1px solid #EBEEF5;
		background-color: #fff;
	}

	.mangu_list .man_title {
		margin: 2px 100px 10px 0;
		font-weight: bolder;
		letter-spacing: -0.5px;
		font-size: 16px;
		cursor: pointer;
		display: inline-block;
		line-height: 18px;
	}

	.mangu_list .man_title:hover {
		text-decoration: underline;
	}

	.mangu_list .man_con {
		margin: 0 0 10px 0;
	}

	.mangu_list .man_state {
		position: absolute;
		right: -1px;
		top: -1px;
		border: 1px solid #fff;
		color: #fff;
		text-align: center;
		padding: 6px 18px;
		letter-spacing: -0.5px;
		border-top-right-radius: 3px;
		/* border-top-left-radius: 3px; */
	}

	.mangu_list .man_progess {
		padding: 15px 20px;
		border-top: 1px solid #5a90e126;

	}

	.mangu_list .man_progess i {
		margin: 0 5px 0 0;
	}


	.mangu_list .man_progess>a>b {
		margin-left: 5px;
		color: #5a90e1;
		text-decoration: underline;
	}

	.mangu_list .man_progess>a>b:hover {
		color: #006699;
	}

	.mangu_list .man_btn {
		/* color: #006699; */
		position: absolute;
		bottom: 25px;
		right: 25px;
		font-size: 15px;
	}

	.mangu_list .man_btn>span {
		/* text-decoration: underline; */
	}

	.mangu_list .man_btn>span:hover {
		text-decoration: underline;
		cursor: pointer;
		color: #06374e;
	}


	.mangu_list .man_btn i {
		margin: 0 8px 0 0;
	}

	.mangu_list .man_btn font {
		margin: 0 18px;
	}

	.art_state_message {
		margin: 0 20px 0 0;
	}

	.art_process_ {
		border: 0;
		padding: 0;
	}

	.art_process_ .art_process_list:first-child {
		padding-top: 0;
	}

	.art_author_list {
		margin: 0 0 0 5px;
	}

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

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


	.art_author_coment {}

	.art_author_coment>p {
		margin: 10px 0 0 28px;
		line-height: 20px;
	}

	.art_author_coment>p:first-child {
		margin-top: 0;
	}

	.art_author_coment>p>font {
		display: block;
		margin: 0 0 2px 0;
		color: #006699;
		font-weight: bold;
		letter-spacing: -0.5px;
	}
</style>