<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-document-copy"></i>
					<router-link :to="{path:'/managing'}">
						<span class="top_dao"> Editor-in-Chief Article</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">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.
								<el-button type="primary" @click="add_Editer" plain style="margin:5px 0 5px 20px;">+ Add</el-button>
							</h4>
							<ul v-for="(item,index) in Editard_list">
								<li style="list-style: none;font-size: 15px;">
									<span><span style="margin-right: 6px;">{{index+1}}.</span>{{item.account}} (<font v-if="item.realname!=''">{{item.realname}}
											, </font>{{item.email}}) </span>
									<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(item)"></el-button>
								</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>
				<div class="chatIcon">
					<el-popover placement="top-start" width="400" trigger="click" class="emoBox">
						<div class="emotionList">
							<a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in faceList" :key="index" class="emotionItem">{{item}}</a>
						</div>
						<!-- <el-button class="emotionSelect" slot="reference" style="padding: 7px 10px;border: 0;margin: 3px 5px;position: absolute;z-index: 500;background: 0;">
							<svg t="1629607720277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
							 p-id="3396" width="20" height="20">
								<path d="M512 1024c282.752 0 512-229.248 512-512S794.752 0 512 0 0 229.248 0 512s229.248 512 512 512z m0-85.333333C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z"
								 fill="#FFBB20" p-id="3397"></path>
								<path d="M512 512m-85.333333 0a85.333333 85.333333 0 1 0 170.666666 0 85.333333 85.333333 0 1 0-170.666666 0Z"
								 fill="#FFFFFF" p-id="3398"></path>
								<path d="M320 405.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="3399"></path>
								<path d="M704 405.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="3400"></path>
								<path d="M234.666667 576c42.666667 170.666667 135.125333 256 277.333333 256s234.666667-85.333333 277.333333-256h-554.666666z"
								 fill="#E01313" p-id="3401"></path>
							</svg>
						</el-button> -->
					</el-popover>
				</div>
				<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>


		<!-- 添加编委弹出框 -->
		<el-dialog title="Add Editorial board member" :visible.sync="addVisible" width="50%" :close-on-click-modal="false">
			<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column prop="account" label="account" align="center"></el-table-column>
				<el-table-column prop="major_title" label="major title" align="center"></el-table-column>
				<el-table-column prop="realname" label="realname" align="center"></el-table-column>
				<el-table-column prop="phone" label="phone" align="center" width="150px"></el-table-column>
				<el-table-column prop="email" label="email" align="center"></el-table-column>
				<el-table-column label="" width="100" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="handleChoose(scope.$index, scope.row)">+ Choice</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="qEdit.pageIndex" :page-size="qEdit.pageSize"
				 :total="Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</el-dialog>


	</div>

</template>

<script>
	import comment from './comment'
	// import appData from '../../assets/js/emoji.json'
	const appData = require("../../assets/js/emoji.json");

	export default {
		components: {
			comment
		},
		mounted() {
			for (let i in appData) {
				this.faceList.push(appData[i].char);
			}
		},
		data() {
			return {
				mediaUrl: this.Common.mediaUrl,
				textarea: '',
				commentData: [],
				txt_mess: {},
				txt_peop: {},
				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,
				tableData: [],
				fileList: [],
				faceList: [],
				addVisible: false,
				qEdit: {
					journal_id: localStorage.getItem('journal_id'),
					pageIndex: 1,
					pageSize: 10
				},
				Total: 0,
				Editard_list: [],
				// Edit_Chi: [],
				rules: {}
			}
		},
		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


								// 获取文章编委池子
								this.$api
									.post('api/Chief/getAllArticleBoards', this.qEdit)
									.then(res => {
										if (res.code == 0) {
											this.tableData = res.data.boards;
											this.Total = res.data.count || 0;
										} else {
											this.$message.error(res.msg);
										}
									})
									.catch(err => {
										console.log(err);
									});
							}
						} 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);
					});

			},

			// 添加编委-弹出框
			add_Editer() {
				this.addVisible = true;
			},


			// 保存添加编委
			handleChoose(index, row) {
				this.select_edit.board_id = row.user_id;
				this.$api
					.post('api/Chief/addArticleBoard', this.select_edit)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('Editorial board of newly added articles succeeded!');
							this.addVisible = false;
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.qEdit, 'pageIndex', val);
				this.getData();
			},


			// 删除编委
			handleDelete(item) {
				// 二次确认删除
				this.$confirm('Are you sure you want to delete the editorial board of this article？', 'Delete', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/Chief/delArticleBoard', item)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 获取表情包
			getEmo(index) {
				var textArea = document.getElementById('textarea');

				function changeSelectedText(obj, str) {
					if (window.getSelection) {
						// 非IE浏览器
						textArea.setRangeText(str);
						// 在未选中文本的情况下，重新设置光标位置
						textArea.selectionStart += str.length;
						textArea.focus()
					} else if (document.selection) {
						// IE浏览器
						obj.focus();
						var sel = document.selection.createRange();
						sel.text = str;
					}
				}
				changeSelectedText(textArea, this.faceList[index]);
				this.textarea = textArea.value; // 要同步data中的数据
				// console.log(this.faceList[index]);
				return;
			},

			// 添加评论
			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 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;
	}

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

	/* 表情包 */
	.el-popover {
		height: 200px;
		width: 400px;
		overflow: scroll;
		overflow-x: auto;
	}

	.chatIcon {
		/* padding: 0 10px; */
		font-size: 25px;
	}

	.emotionList {
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
	}

	.emotionItem {
		width: 10%;
		font-size: 20px;
		text-align: center;
	}

	/*包含以下四种的链接*/
	.emotionItem {
		text-decoration: none;
	}

	/*正常的未被访问过的链接*/
	.emotionItem:link {
		text-decoration: none;
	}

	/*已经访问过的链接*/
	.emotionItem:visited {
		text-decoration: none;
	}

	/*鼠标划过(停留)的链接*/
	.emotionItem:hover {
		text-decoration: none;
	}

	/* 正在点击的链接*/
	.emotionItem:active {
		text-decoration: none;
	}
</style>
