<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i>
					<router-link :to="{path:'/articleList'}">
						<span class="top_dao"> Manuscript list</span>
					</router-link>
					>> Manuscript proof
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state" v-loading="loading">
			<div class="art_suthor_message">
				<img src="../../assets/img/PDF.png" @click="man_detal()">
				<div>
					<b @click="man_detal()">{{artMes.title}}</b>
					<p>
						<font>ID : {{artMes.accept_sn}}</font>
					</p>
					<p>
						<font>Journal :</font><b>{{artMes.journalname}}</b>
					</p>
					<el-button type="success" @click="man_detal()" size="mini" style="width: 200px;margin-top: 5px;">
						<i class="el-icon-view" style="margin-right: 10px;"></i>PDF Preview
					</el-button>


				</div>
				<br clear="both">
			</div>
			<div class="art_caozuo_">
				<p>
					Please click "Confirm" to confirm the proof within 48h. It means you agree with the article being
					published in this version. We will regard the author's consent to the version if the time exceeds.
					If you have any questions, please feel free to contact us.
				</p>
				<p>
					Please click "Minor Modification" if you want to make changes based on this version. 
				</p>
				<p>
					Note: Double-check the authors' information carefully to ensure they are correct.
				</p>
				<p>
					Expiration time : <b>{{formatDate(artMes.proof_etime)}}</b>
				</p>
				<div style="text-align: center;margin-top: 30px;">
					<el-button type="primary" @click="saveAgr()" style="margin-right: 20px;width: 250px;">Confirm
					</el-button>
					<el-button type="warning" @click="saveRef()" style="width: 250px;">Minor Modification</el-button>
				</div>
			</div>
			<!-- <embed :src="this.baseUrl + 'proofPDF/' + this.articleId + '.pdf'" style="width: 100%;height: 800px;"> -->
		</div>

		<el-dialog title="Minor Modification Content:" :visible.sync="Refusevisible" width="500px">
			<el-input v-model="ReReason" type="textarea" rows="5"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="Refusevisible=false">Cancel</el-button>
				<el-button type="primary" @click="saveRefuse()">Submit</el-button>
			</span>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				articleId: this.$route.query.id,
				userName: localStorage.getItem('U_name'),
				loading: false,
				Refusevisible: false,
				ReReason: '',
				artMes: {
					articleId: this.$route.query.id,
				},
			};
		},
		created: function() {
			this.initarticle();
		},
		methods: {
			//初始化文章信息
			initarticle() {
				this.$api
					.post('api/Production/getProductionDetailByArticleid', {
						article_id: this.articleId
					})
					.then((res) => {
						this.artMes = res.data.production;
						this.artMes.journalname = res.data.journal.title;
						this.artMes.accept_sn = res.data.article.accept_sn;
					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 同意
			saveAgr() {
				// 二次确认更改状态
				this.$confirm('The paper will be published in this version, please confirm again.', 'Tip', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('/api/Production/editProof', {
								article_id: this.articleId,
								code: 0,
							})
							.then((res) => {
								if (res.code == 0) {
									this.$message.success('Successful!');
									this.$router.push({
										path: '/articleList'
									});
								} else {
									this.$message.error(res.msg);
								}
							});
					})
					.catch(() => {});
			},
			// 拒绝
			saveRef() {
				this.Refusevisible = true
			},

			// 输入理由拒绝
			saveRefuse() {
				if (this.ReReason == '') {
					this.$message.error('Please enter the content for minor modification!');
					return
				}
				this.$api
					.post('api/Production/editProof', {
						article_id: this.articleId,
						code: 1,
						content: this.ReReason
					})
					.then((res) => {
						if (res.code == 0) {
							this.$message.success('Successful Minor Modification!');
							this.$router.push({
								path: '/articleList'
							});
						} else {
							this.$message.error(res.msg);
						}
					});
			},

			// 查看详情
			man_detal() {
				let urlBlan = this.baseUrl + 'public/proofPDF/' + this.articleId + '.pdf'
				window.open(urlBlan, '_blank')
			},

			// 时间
			formatDate(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + ' ' + h + ':' + m;
			},

		},
		filters: {

		}
	};
</script>


<style scoped>
	.top_dao:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.art_suthor_message {
		margin: 20px 0 30px 0;
	}

	.art_suthor_message>img {
		float: left;
		width: 150px;
		margin-right: 40px;
		cursor: pointer;
	}

	.art_suthor_message>div {
		float: left;
		width: 75%;
	}

	.art_suthor_message>div>b {
		display: block;
		font-size: 18px;
		margin: 5px 0 10px 0;
		line-height: 28px;
	}

	.art_suthor_message>div>b:hover {
		cursor: pointer;
		text-decoration: underline;
	}

	.art_suthor_message>div>p {
		margin-bottom: 10px;
	}

	.art_suthor_message>div>p font {
		color: #666b7a;
		margin-right: 10px;
	}

	.art_caozuo_ {
		margin-bottom: 30px;
		background-color: #fff;
	}

	.art_caozuo_>p {
		font-size: 16px;
		line-height: 30px;
		margin-bottom: 10px;
	}


	.yu_lan {
		border: 1px solid #ffacaf;
		border-radius: 10px;
		padding: 5px 10px;
		display: inline-block;
		/* margin-left: 10px; */
		background-color: #fff4f4;
	}

	.yu_lan:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.yu_lan img {
		width: 40px;
		margin: 0 10px 0 0;
		vertical-align: middle;


	}
</style>
