<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-collection"></i> <span class="top_dao"> Review History</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_l">
			<!-- <div v-for="item in dynamicTags"
				style="background-color: #f0f9eb;border-radius: 5px;border:1px solid #e1f3d8;color: #67c23a;font-size: 14px;padding: 8px 15px;margin: 0 0 20px 0;">
				<el-button type="success" icon="el-icon-close" circle @click='handleClose'
					style="float: right;margin: 17px 5px 0 0;"></el-button>
				<p><b>{{item.label}}</b></p>
				<p style="margin: 5px 0;">{{item.title}}</p>
				<p>{{item.content}}</p>
			</div> -->
			<el-row :gutter="20">
				<el-col :span="24">
					<el-card class="box-card" v-loading="loading" element-loading-text="Loading..."
						element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
						<el-table :data="tableData3" border class="table" ref="multipleTable"
							header-cell-class-name="table-header" empty-text="New messages (0)">
							<el-table-column prop="article_title" label="Article Title"></el-table-column>
							<el-table-column prop="journal_title" label="Journal"></el-table-column>
							<el-table-column prop="ctime" label="Reviewed time" width="140"></el-table-column>
							<el-table-column label="Article Status" width="130" align="center">
								<template slot-scope="scope">
									<b v-if="scope.row.astate == 0">Received</b>
									<b v-if="scope.row.astate == 1">With editor</b>
									<b v-if="scope.row.astate == 2">Under review</b>
									<b v-if="scope.row.astate == 3">Reject</b>
									<b v-if="scope.row.astate == 4">Revision</b>
									<b v-if="scope.row.astate == 5">Accept</b>
									<b v-if="scope.row.astate == 6">Pre-accept</b>
								</template>
							</el-table-column>
							<el-table-column label="Recommendation" width="160" align="center">
								<template slot-scope="scope">
									<b v-if="scope.row.recommend == 1||scope.row.recommend == 2">Accept</b>
									<b v-if="scope.row.recommend == 3||scope.row.recommend == 4">Reject</b>
								</template>
							</el-table-column>
							<el-table-column label=" " width="230">
								<template slot-scope="scope">
									<router-link
										:to="{path:'/perhistory_commen',query:{Art_id:scope.row.article_id,Rev_id:scope.row.art_rev_id}}"
										v-if="(scope.row.astate==3||scope.row.astate==5)&&(scope.row.journal_id==1||scope.row.journal_id==9||scope.row.article_id>1598)">
										<el-button type="primary" plain style="margin-right: 10px;">All Comments
										</el-button>
									</router-link>
									<el-button type="warning" plain @click="cerFicte(scope.$index, scope.row)"
										v-if="scope.row.state==1||scope.row.state==2||scope.row.state==3">Certificate
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination">
							<el-pagination layout="total, prev, pager, next" :current-page="TaBle3.pageIndex"
								:page-size="TaBle3.pageSize" :total="link_Tota3" @current-change="handlePageChange3">
							</el-pagination>
						</div>
					</el-card>

					<!-- 证书弹出框 -->
					<el-dialog :visible.sync="cerVisible" width="600px">
						<el-image class="table-td-thumb rev_digol" :src="this.IMG_Url"></el-image>
					</el-dialog>

					<el-dialog :visible.sync="feilVisible" width="600px">
						<h2 style="text-align: center;">No certificate</h2>
						<span slot="footer" class="dialog-footer">
							<el-button type="primary" @click="feilVisible=false">OK</el-button>
						</span>
					</el-dialog>

				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				query: {
					user_id: localStorage.getItem('U_id')
				},
				tableData3: [],
				TaBle3: {
					user_id: localStorage.getItem('U_id'),
					pageIndex: 1,
					pageSize: 10
				},
				link_Tota3: 0,
				IMG_Url: '',
				cerVisible: false,
				feilVisible: false,
				dynamicTags: [{
					label: 'Submission System 2.0',
					title: 'Update Notifications',
					content: "The reviewers can check all reviewers ' comments when the manuscripts get final decision."
				}],
			};
		},
		mounted() {

		},
		created() {
			this.loading = true;
			this.getTable();
		},
		methods: {
			// 获取数据
			getTable() {
				this.$api
					.post('api/Reviewer/getReviewerDetail1', this.query)
					.then(res => {
						if (res.code == 0) {
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			getData() {
				this.$api
					.post('api/Reviewer/getReviewerListHistory', this.TaBle3)
					.then(res => {
						this.loading = false
						if (res.code == 0) {
							if (res.data.lists != '') {
								for (let i = 0; i < res.data.lists.length; i++) {
									if (res.data.lists[i].recommenttime == null) {
										res.data.lists[i].ctime = ''
									} else {
										let date = new Date(parseInt(res.data.lists[i].recommenttime) * 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.tableData3 = res.data.lists;
							this.link_Tota3 = res.data.count || 0;
						} else {							
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.loading = false
						this.$message.error(err);
					});
			},

			// 分页导航
			handlePageChange3(val) {
				this.loading = true;
				this.$set(this.TaBle3, 'pageIndex', val);
				this.getData();
			},

			// 证书弹出层
			cerFicte(index, row) {
				this.$api
					.post('api/Reviewer/getZSimg', {
						'art_rev_id': row.art_rev_id
					})
					.then(res => {
						if (res.code == 0) {
							this.IMG_Url = this.Common.mediaUrl + res.data.icon
							this.cerVisible = true;
						} else {
							this.$message.error(res.msg);
							this.feilVisible = true;
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

			},

			// 关闭标签
			handleClose(tag) {
				// this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				this.dynamicTags = []
			},
		},
		filters: {

		},
		watch: {

		}
	};
</script>

<style>
	.table {
		width: 100%;
		font-size: 14px;
	}

	.rev_digol .el-image__placeholder {
		background-image: url(../../assets/img/loading.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 440px 300px;
		width: 560px;
		height: 400px;
		background-color: #fff;
	}
</style>
