<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-document-copy"></i>
					<router-link :to="{path:'/manhistory'}">
						<span class="top_dao"> Editor-in-Chief historical manuscripts</span>
					</router-link>
					>> Editor-in-Chief Article Detail
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_l">
			<el-row :gutter="20" style="display: flex;">
				<el-col :span="16">
					<el-card class="box-card">
						<div class="tet_list" :model="txt_mess">
							<h4>{{txt_mess.title}}</h4>
							<h5>{{this.head_line}}<span style="margin: 0 10px;">>></span> Manuscript ID: {{txt_mess.accept_sn}}</h5>
							<p style="margin: 8px 0 5px 0;"><b>Author : </b>{{txt_mess.author}}</p>
							<p><b>Type :</b> {{txt_mess.type}}</p>
							<p><b>Submitted time :</b> {{txt_mess.ctime}}</p>
							<p style="margin-bottom: 10px;"><b>Abstract :</b> <br>{{txt_mess.abstrart}}</p>

							<div class="file_sty" v-for="item in fileList">
								<img src="../../assets/img/icon_0.png" alt="" class="icon_img">
								<a :href='mediaUrl+item.file_url' target="_blank" class="txt_pdf">Manuscript
									<span style="margin-left: 50px;color: #888;font-size: 13px;">{{item.ctime}}</span>
									<i class="el-icon-download" style="margin-left: 20px;color: #66b1ff;font-weight: bold;"></i>
								</a><br>
							</div>

							<p style="margin-top: 10px;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-col>
				<el-col :span="8">
					<el-card class="box-card">
						<div class="tet_people">
							<h4>I want to invite the following editorial board members to get more opinions for the manuscript.</h4>
							<ul v-for="item in Editard_list" style="margin-top: 10px;">
								<li style="list-style: none;font-size: 15px;">
									<span>{{item.account}} ( <font v-if="item.realname!=''">{{item.realname}} , </font>{{item.email}} )</span>
								</li>
							</ul>
							<p style="color: #6f6f6f;font-size: 14px; margin: 20px 0px 0px 10px;" v-if="Editard_list==''">No editorial board
								members</p>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<h2 style="margin: 50px 0 15px 5px;font-size: 16px;">All comments</h2>
			<el-card class="box-card" v-if="this.commentData!=''">
				<comment :comments="commentData"></comment>
			</el-card>
			<p v-if="this.commentData==''" style="color:#6f6f6f;font-size: 14px;margin: 20px 0 0 10px;">No comment</p>
		</div>


	</div>

</template>

<script>
	import comment from './comment'

	export default {
		components: {
			comment
		},
		mounted() {

		},
		data() {
			return {
				mediaUrl: this.Common.mediaUrl,
				commentData: [],
				txt_mess: {},
				head_line: '',
				Art_id: this.$route.query.Art_id,
				tableData: [],
				fileList: [],
				Editard_list: []
			}
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				// 获取文章信息
				this.$api
					.post('api/Chief/getArticleDetail ', {
						'article_id': this.Art_id
					})
					.then(res => {
						if (res.code == 0) {

							let mes_date = new Date(parseInt(res.data.article.ctime) * 1000);
							let Y = mes_date.getFullYear() + '-';
							let M = mes_date.getMonth() + 1 < 10 ? '0' + (mes_date.getMonth() + 1) + '-' : mes_date.getMonth() + 1 + '-';
							let D = mes_date.getDate() < 10 ? '0' + mes_date.getDate() : mes_date.getDate();
							res.data.article.ctime = Y + M + D;

							this.txt_mess = res.data.article;

							if (res.data.article.file != "") {
								this.head_line = res.data.article.journal.title;
								let file_down = res.data.article.file;
								for (var i = 0; i < file_down.length; i++) {
									let date = new Date(parseInt(file_down[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();
									file_down[i].ctime = Y + M + D;
								}
								this.fileList = file_down
							}
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				// 获取文章的编委列表
				this.$api
					.post('api/Chief/getArticleBoard', {
						'article_id': this.Art_id
					})
					.then(res => {
						if (res.code == 0) {
							this.Editard_list = res.data.boards;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});


				// 获取评论内容
				this.$api
					.post('api/Chief/getAllChiefMsg', {
						'article_id': this.Art_id
					})
					.then(res => {
						if (res.code == 0) {
							for (var i = 0; i < res.data.msgs.length; i++) {
								let date = new Date(parseInt(res.data.msgs[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();
								let h = date.getHours() < 10 ? ('0' + date.getHours()) + ':' : date.getHours() + ':';
								let n = date.getMinutes() < 10 ? ('0' + date.getMinutes()) + ':' : date.getMinutes() + ':';
								let s = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds();

								res.data.msgs[i].ctime = Y + M + D + ' ' + h + n + s;
							}
							this.commentData = res.data.msgs;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},




		}
	}
</script>

<style scoped>
	.ma_title {
		margin-bottom: 5px;
		font-weight: bold;
	}

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

	.tet_list {
		font-size: 20px;
	}


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

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

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

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

	.tet_people {}

	.tet_people .el-input {
		margin-top: 20px;
	}

	.file_sty {
		margin-bottom: 6px;
	}

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

	.file_sty a:hover {
		text-decoration: underline;
	}
</style>
