<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-collection"></i>
					<router-link :to="{path:'/managing'}">
						<span class="top_dao">{{this.head_line}}</span>
					</router-link>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container container_l">
			<el-row :gutter="24">
				<el-col :span="16">
					<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>{{txt_mess.author}}</p>
						<div class="file_sty" v-for="item in fileList">
							<svg t="1629609240510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
							 p-id="3814" width="15" height="15" style="margin: 20px 10px -2px 0;">
								<path d="M1024.00906 393.054v548.774c0 45.39-36.776 82.166-82.146 82.166H266.89306c-38.776 0-71.268-26.868-79.9-63.006l-0.33-46.976-1.916-279.754V82.166C184.74506 36.778 221.52306 0 266.89306 0h364.064c32.718 0 138.682 90.346 232.346 185.494C948.76506 272.338 1024.00906 363.178 1024.00906 393.054z"
								 fill="#DDEAFB" p-id="3815"></path>
								<path d="M1024.00906 393.054v201.028c0-0.226-0.02-0.454-0.02-0.7-6.182-246.666-207.106-258.08-272.812-323.784l112.124-84.104C948.76506 272.338 1024.00906 363.178 1024.00906 393.054z"
								 fill="#CBE2FF" p-id="3816"></path>
								<path d="M630.94506 0H429.91706c0.226 0 0.454 0.02 0.7 0.02 246.666 6.182 258.08 207.106 323.784 272.812l84.104-112.124C751.66106 75.244 660.82106 0 630.94506 0z"
								 fill="#CBE2FF" p-id="3817"></path>
								<path d="M1024.00706 393.064v34.754c0-73.17-59.334-132.506-132.506-132.506h-80.648c-45.368 0-82.16-36.794-82.16-82.16V132.506C728.69506 59.334 669.35906 0 596.18906 0h34.754c62.58 0 122.616 24.866 166.866 69.114l157.086 157.086a236.004 236.004 0 0 1 69.112 166.864z"
								 fill="#BED8FB" p-id="3818"></path>
								<path d="M885.28906 480.062H323.45506a15.452 15.452 0 1 1 0-30.904H885.28906a15.452 15.452 0 1 1 0 30.904zM885.28906 562.26H323.45506a15.452 15.452 0 1 1 0-30.904H885.28906a15.452 15.452 0 1 1 0 30.904zM885.28906 644.456H323.45506a15.452 15.452 0 1 1 0-30.904H885.28906a15.452 15.452 0 1 1 0 30.904zM745.13906 726.654H323.45506a15.452 15.452 0 1 1 0-30.904h421.682a15.452 15.452 0 0 1 15.452 15.452 15.448 15.448 0 0 1-15.45 15.452zM529.84306 252.076H323.45506a15.452 15.452 0 1 1 0-30.904h206.388a15.452 15.452 0 1 1 0 30.904z"
								 fill="#617881" p-id="3819"></path>
								<path d="M566.48706 957.136a1159.306 1159.306 0 0 1-1.504 14.568 48.352 48.352 0 0 1-15.658 30.74 47.908 47.908 0 0 1-28.578 12.362 2959.96 2959.96 0 0 1-466.258 0 47.912 47.912 0 0 1-28.578-12.362 48.348 48.348 0 0 1-15.658-30.74 1159.306 1159.306 0 0 1-1.504-14.568c-9.642-96.094-11.312-192.19-4.986-288.264 0.804-12.156 1.73-24.292 2.782-36.448a1705.496 1705.496 0 0 1 3.708-38.116c2.494-23.138 21.036-41.268 44.236-43.102a2960.442 2960.442 0 0 1 466.258 0c23.2 1.834 41.742 19.964 44.236 43.102a1705.496 1705.496 0 0 1 3.708 38.116c1.05 12.156 1.978 24.292 2.782 36.448 6.304 96.074 4.636 192.17-4.986 288.264z"
								 fill="#80B4FB" p-id="3820"></path>
								<path d="M571.47306 668.872c-34.984 85.71-172.286 216.83-283.854 250.146C176.05106 885.704 38.74906 754.584 3.76506 668.872c0.804-12.156 1.73-24.292 2.782-36.448 38.982 85.69 172.266 211.206 281.074 243.698 108.828-32.492 242.132-158.008 281.074-243.698 1.048 12.156 1.974 24.292 2.778 36.448zM566.48706 957.136a1159.306 1159.306 0 0 1-1.504 14.568 48.352 48.352 0 0 1-15.658 30.74c-3.956-31.338-37.642-82.888-87.606-132.914a15.476 15.476 0 0 1 0.02-21.86 15.474 15.474 0 0 1 21.86 0.022c29.216 29.256 53.63 59.4 70.628 87.194 4.72 7.704 8.82 15.12 12.26 22.25zM113.51906 869.53c-49.964 50.026-83.65 101.576-87.606 132.914a48.348 48.348 0 0 1-15.658-30.74 1159.306 1159.306 0 0 1-1.504-14.568c3.44-7.128 7.54-14.546 12.26-22.252 16.998-27.794 41.414-57.938 70.628-87.194a15.474 15.474 0 0 1 21.86-0.022 15.48 15.48 0 0 1 0.02 21.862z"
								 fill="#5EA5EC" p-id="3821"></path>
							</svg>
							<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></a><br>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="tet_people" v-if="this.txt_state!=6">
						<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;">
								<span>{{item.account}} ( <font v-if="item.realname!=''">{{item.realname}} , </font>{{item.email}} )</span>
							</li>
						</ul>
					</div>
					<div class="tet_people" v-if="this.txt_state==6">
						<h4>I want to invite the following editorial board members to get more opinions for the manuscript.</h4>
						<el-button type="text" @click="add_Editer" style="margin-left: 5px;font-weight: bold;">+ Add</el-button>
						<ul v-for="item in Editard_list">
							<li style="list-style: none;">
								<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>
					</div>
				</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>
			<comment :comments="commentData" v-if="this.commentData!=''"></comment>
			<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%">
			<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header">
				<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: {},
				txt_state: '',
				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) {
							this.txt_mess = res.data.article;
							if (res.data.article.file != "") {
								localStorage.setItem('journal_title', res.data.article.journal.title);
								localStorage.setItem('journal_id', res.data.article.journal.journal_id);
								this.head_line = res.data.article.journal.title;
								this.txt_state = res.data.article.state;
								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();
								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);
					});

			},

			// 添加编委-弹出框
			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.getdate();
						} 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>
	.ma_title {
		margin-bottom: 5px;
		font-weight: bold;
	}

	.tet_list {
		border: 1px solid #DCDFE6;
		background: #fff;
		border-radius: 5px;
		margin-bottom: 20px;
		padding: 20px 20px;
	}

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

	.tet_list h5 {
		margin: 20px 0 10px 0;
		font-weight: normal;
	}

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

	.tet_people {
		border: 1px solid #DCDFE6;
		background: #fff;
		border-radius: 5px;
		margin-bottom: 20px;
		padding: 20px 20px;
	}

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

	.file_sty {}

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

	.file_sty a:hover {
		text-decoration: underline;
	}

	.ping_lun {}

	.ping_lun textarea {
		/* padding-top: 50px; */
	}

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