<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-copy-document"></i> <span class="top_dao"> Young scientist member article</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_l">
			<el-row :gutter="20">
				<el-col :span="16">
					<el-card class="box-card">
						<div class="ma_title">
							<h2>The manuscripts are ready to get final decisions.</h2>
						</div>
						<ul class="ta1_uli">
							<li v-for="(item,index) in tableData1">
								<router-link :to="{path:'/you_text',query:{Art_id:item.art_rev_id}}">
									<h3><span style="margin-right: 6px;">{{index+1}}.</span>{{item.article_title}}</h3>
									<el-button type="primary" plain style="float: right;">Detail</el-button>
								</router-link>
								<h4>
									<span>
										<font style="color: #888;">Journal name : </font>{{item.journal_title}}.
									</span>
									<span>
										<font style="color: #888;">Article type : </font>{{item.type}}
									</span><br>
									<span>
										<font style="color: #888;">Major : </font>{{item.major}} > {{item.cmajor}}
									</span>
									<span style="color: #888;">
										<font>Submitted time : </font>{{item.ctime}}
									</span><br>
									<span v-if="item.abstrart!=''">
										<font style="color: #888;">Abstract : </font>{{item.abstrart}}
									</span>
								</h4>
							</li>
							<p v-if="tableData1==''" style="color:#6f6f6f;font-size: 14px;margin-top: 20px;">No article</p>
						</ul>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card class="box-card">
						<div class="ma_title">
							<h2>List of pending articles.</h2>
						</div>
						<ul class="ta1_uli">
							<li v-for="(item,index) in tableData4">
								<router-link :to="{path:'/you_text',query:{Art_id:item.article_id}}">
									<h3><span style="margin-right: 6px;">{{index+1}}.</span>{{index+1+(TaBle4.pageIndex-1)*TaBle4.pageSize}}.</span>{{item.title}}</h3>
									<el-button type="primary" plain style="float: right;">Detail</el-button>
								</router-link>
								<h4>
									<span>
										<font style="color: #888;">Journal name : </font>{{item.journal_title}}.
									</span>
									<span>
										<font style="color: #888;">Article type : </font>{{item.type}}
									</span><br>
									<span>
										<font style="color: #888;">Major : </font>{{item.major}} > {{item.cmajor}}
									</span>
									<span style="color: #888;">
										<font>Submitted time : </font>{{item.ctime}}
									</span><br>
									<span v-if="item.abstrart!=''">
										<font style="color: #888;">Abstract : </font>{{item.abstrart}}
									</span>
								</h4>
							</li>
							<p v-if="tableData4==''" style="color:#6f6f6f;font-size: 14px;margin-top: 20px;">No pending articles</p>
						</ul>
						<div class="pagination">
							<el-pagination layout="total, prev, pager, next" :current-page="TaBle4.pageIndex" :page-size="TaBle4.pageSize"
							 :total="link_Tota4" @current-change="handlePageChange4">
							</el-pagination>
						</div>
					</el-card>

					<el-card class="box-card" style="margin-top: 30px;">
						<div class="ma_title">
							<h2>Accept manuscripts.</h2>
						</div>
						<ul class="ta1_uli">
							<li v-for="(item,index) in tableData2">
								<router-link :to="{path:'/you_text',query:{Art_id:item.art_rev_id}}">
									<h3><span style="margin-right: 6px;">{{index+1}}.</span>{{index+1+(TaBle2.pageIndex-1)*TaBle2.pageSize}}</h3>
									<el-button type="primary" plain style="float: right;">Detail</el-button>
								</router-link>
								<h4>
									<span>
										<font style="color: #888;">Journal name : </font>{{item.journal_title}}.
									</span>
									<span>
										<font style="color: #888;">Article type : </font>{{item.type}}
									</span><br>
									<span>
										<font style="color: #888;">Major : </font>{{item.major}} > {{item.cmajor}}
									</span>
									<span style="color: #888;">
										<font>Submitted time : </font>{{item.ctime}}
									</span><br>
									<span v-if="item.abstrart!=''">
										<font style="color: #888;">Abstract : </font>{{item.abstrart}}
									</span>
								</h4>

							</li>
							<p v-if="tableData2==''" style="color:#6f6f6f;font-size: 14px;margin-top: 20px;">No historical articles</p>
						</ul>
						<div class="pagination">
							<el-pagination layout="total, prev, pager, next" :current-page="TaBle2.pageIndex" :page-size="TaBle2.pageSize"
							 :total="link_Tota2" @current-change="handlePageChange2">
							</el-pagination>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Direct_log: this.$route.query.act,
				head_line: "",
				query: {
					user_id: localStorage.getItem('U_id')
				},
				tableData1: [],
				tableData2: [],
				tableData3: [],
				tableData4: [],
				TaBle2: {
					user_id: localStorage.getItem('U_id'),
					pageIndex: 1,
					pageSize: 10
				},
				TaBle4: {
					user_id: localStorage.getItem('U_id'),
					journal_id: 0,
					pageIndex: 1,
					pageSize: 5
				},
				link_Tota4: 0,
				link_Tota2: 0,
				cate_title: [],
				cate_jour: []
			};
		},
		mounted() {

		},
		created() {
			if (this.Direct_log == null) {
				this.getTable();
			} 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.getTable();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			}
		},
		methods: {
			// 获取数据
			getTable() {
				this.$api
					.post('api/Board/getYboardJournals', this.query)
					.then(res => {
						if (res.code == 0) {
							this.cate_jour = res.data.journals
							this.cate_title = this.cate_jour[0].title
							localStorage.setItem('journal_title', this.cate_jour[0].title);
							localStorage.setItem('journal_id', this.cate_jour[0].journal_id);
							this.head_line = this.cate_jour[0].title;
							this.query.journal_id = this.cate_jour[0].journal_id;
							this.TaBle4.journal_id = this.cate_jour[0].journal_id;

							this.getData();
							this.getPete();

						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			getData() {
				this.$api
					.post('api/Reviewer/getReviewerListPending', this.query)
					.then(res => {
						if (res.code == 0) {
							for (let i = 0; i < res.data.lists.length; i++) {
								let date = new Date(parseInt(res.data.lists[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.lists[i].ctime = Y + M + D;
							}
							this.tableData1 = res.data.lists;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('api/Reviewer/getReviewerListHistory', this.TaBle2)
					.then(res => {
						if (res.code == 0) {
							if (res.data.lists != '') {
								for (let i = 0; i < res.data.lists.length; i++) {
									let date = new Date(parseInt(res.data.lists[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.lists[i].ctime = Y + M + D;
								}
							}
							this.tableData2 = res.data.lists;
							this.link_Tota2 = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			getPete() {
				this.$api
					.post('api/Board/getBoardPendArticle', this.query)
					.then(res => {
						if (res.code == 0) {
							for (let i = 0; i < res.data.articles.length; i++) {
								let date = new Date(parseInt(res.data.articles[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.articles[i].ctime = Y + M + D;
							}
							this.tableData3 = res.data.articles;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('api/Reviewer/getAllReviewerList', this.TaBle4)
					.then(res => {
						if (res.code == 0) {
							if (res.data.articles != '') {
								for (let i = 0; i < res.data.articles.length; i++) {
									let date = new Date(parseInt(res.data.articles[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.articles[i].ctime = Y + M + D;
								}
							}
							this.tableData4 = res.data.articles;
							this.link_Tota4 = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 分页导航
			handlePageChange2(val) {
				this.$set(this.TaBle2, 'pageIndex', val);
				this.getData();
			},
			handlePageChange4(val) {
				this.$set(this.TaBle4, 'pageIndex', val);
				this.getData();
			},

			// 期刊下拉菜单点击
			handlejournal(command) {
				this.cate_title = command.title;
				localStorage.setItem('journal_title', command.title);
				localStorage.setItem('journal_id', command.journal_id);
				this.head_line = command.title;
				this.query.journal_id = command.journal_id;
				this.TaBle4.journal_id = command.journal_id;
				this.getPete();
			}
		},
		computed: {
			onRoutes() {
				0
				return this.$route.path.replace('/', '');
			}
		},
		watch: {

		}
	};
</script>

<style scoped>
	.ma_title {
		margin-bottom: 10px;
		font-size: 14px;
		border-right: 1px solid #e1e1e1;
		padding-right: 20px;
		line-height: 20px;
		color: #888;
	}

	.ma_title h2 {
		font-size: 16px;
		color: #006699;
		margin: 10px 0;
		/* white-space: nowrap; */
	}

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


	.ta1_uli {}

	.ta1_uli li {
		list-style: none;
		border-bottom: 1px dashed #e0e0e0;
		/* box-shadow: 0 0 10px #e1e1e1; */
		padding: 10px 20px 20px 20px;
		background-color: #fff;
		margin-top: 10px;
	}

	.ta1_uli li:hover {
		/* background: #fafafa; */
	}

	.ta1_uli li h3 {
		color: #000;
		margin-top: 8px;
		margin-right: 120px;
		font-family: "Helvetica Neue", Helvetica, Georgia, sans-serif;
		font-size: 16px;
		word-wrap: break-word;
		line-height: 22px;
	}

	.ta1_uli li h3:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.ta1_uli li h4 {
		/* color: #6f6f6f; */
		margin-top: 8px;
		margin-right: 150px;
		font-weight: normal;
		font-size: 14px;
		line-height: 22px;
	}

	.ta1_uli li h4 span {
		margin-right: 20px;
		display: inline-block;
		margin-bottom: 2px;
	}

	.ta1_uli li h4 span>font {
		font-size: 13px;
	}

	.ta1_uli li h5 {
		color: #006699;
		margin-top: 5px;
		padding-bottom: 10px;
		font-weight: normal;
		border-bottom: 1px solid #f1f1f1;
	}

	.ta1_uli li h6 {
		font-weight: normal;
		font-family: Calibri;
		font-size: 16px;
		margin-top: 10px;
	}
</style>
