<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-notebook-1"></i>
					<router-link :to="{path:'/editorial'}">
						<span class="top_dao"> Editorial board member article</span>
					</router-link>
					>> Editorial board member 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">Manuscirpt
									<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,index) in Editard_list">
								<li style="list-style: none;font-size: 15px;margin: 10px 0;">
									<span><span style="margin-right: 6px;">{{index+1}}.</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>

			<div>
				<h2 style="margin: 30px 0 15px 5px;font-size: 16px;">Add my comment (The comment will be showed to : editor,
					editorial board members, young sciencists member.)</h2>
				<el-input v-model="add_edit.content" class="chatText ping_lun" type="textarea" id='textarea' rows="5" placeholder="Please enter the content..."
				 @keyup.enter.native="sendInfo"></el-input>

				<div style="text-align: right;">
					<el-button type="primary" @click="hdSubmit" class="sub_mit">Save</el-button>
				</div>
			</div>

			<h2 style="margin: 0 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 {
				Direct_log: this.$route.query.act,
				Direct_aid: this.$route.query.articleid,
				mediaUrl: this.Common.mediaUrl,
				textarea: '',
				commentData: [],
				txt_mess: {},
				add_edit: {
					article_id: this.$route.query.Art_id,
					user_id: localStorage.getItem('U_id'),
					content: ''
				},
				select_edit: {
					board_id: '',
					article_id: this.$route.query.Art_id,
				},
				head_line: '',
				Art_id: this.$route.query.Art_id,
				tableData1: [],
				fileList: [],
				faceList: [],
				Editard_list: [],
				rules: {}
			}
		},
		created() {
			if (this.Direct_log == null) {
				this.getData();
			} else {
				this.$api
					.post('api/Chief/autoLoginForChief ', {
						'code': this.Direct_log
					})
					.then(res => {
						if (res.code == 0) {
							localStorage.setItem('U_role', res.data.roles);
							localStorage.setItem('U_name', res.data.user.account);
							localStorage.setItem('U_id', res.data.user.user_id);
							localStorage.setItem('U_relname', res.data.user.realname);
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			}
		},
		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();
								res.data.msgs[i].ctime = Y + M + D;
							}
							this.commentData = res.data.msgs;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},

			// 添加评论
			hdSubmit() {
				// console.log(this.add_edit)
				if (this.add_edit.content == '') {
					this.$message.error('Add message cannot be empty!');
				} else {
					this.$api
						.post('api/Chief/addMsgForArticle', this.add_edit)
						.then(res => {
							if (res.code == 0) {
								this.$message.success('Successfully added message!');
								this.add_edit.content = ''
								this.getData();
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}

			}


		}
	}
</script>

<style>
	.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;
	}

	.ping_lun {}

	.ping_lun textarea {
		/* padding-top: 50px; */
		-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		border: 0;
	}

	.ping_lun textarea:focus {
		/* height: 140px; */
		-webkit-box-shadow: 0 0 6px 0 #5094d5;
		box-shadow: 0 0 6px 0 #5094d5;
		border: 1px solid #5094d5;
	}

	.sub_mit {
		margin: 15px 0 0 0;
		width: 100px;
	}

	.red {
		color: #ff0000;
	}
</style>
