<template>
	<div>
		<!-- <p class="luan_ma">以下内容的"&ltb> &lt/b>"是生成环节的必要 请不要删除！！！</p> -->
		<el-row :gutter="20" style="margin: 0 auto;height: 100%;overflow: hidden;">
			<el-col :span="24" style="height: 100%;padding: 10px 0;">
			<!-- 	<div class="step_role">
					<el-steps :active="2" class="move_bar">
						<el-step title="Choice" @click.native="handleStep1()">
							<i class="step01" slot="icon"></i>
						</el-step>
						<el-step title="Check">
							<i class="step02" slot="icon"></i>
						</el-step>
						<el-step title="Generate" @click.native="handleStep3()">
							<i class="step03" slot="icon"></i>
						</el-step>
					</el-steps>
				</div> -->
				<div class="pane_act" v-loading="loading" element-loading-text="Loading desperately..." element-loading-spinner="el-icon-loading"
				 element-loading-background="rgba(0, 0, 0, 0.8)">
					<h1>
						<img src="../../assets/img/temp-iocn.png" style="vertical-align: middle;margin: 0 5px 0 0;">
						{{this.article_title}}
					</h1>
					<div>
						<div class="vefi_cation">
							<h3 class="mark">Title</h3>
							<el-input type="textarea" v-model="checkForm.info_title" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3 class="mark">Type</h3>
							<p>{{checkForm.info_type}}</p>
						</div>
						<div class="vefi_cation">
							<h3 class="mark">Author</h3>
							<el-input type="textarea" v-model="checkForm.author" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3 class="mark">Department-Affiliation-Address</h3>
							<el-input type="textarea" v-model="checkForm.authorAddress" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Author Contribution</h3>
							<el-input type="textarea" v-model="checkForm.authorContribution" :autosize="{minRows: 2}"></el-input>
						</div>

						<div class="vefi_cation">
							<h3>Acknowledgment</h3>
							<el-input type="textarea" v-model="checkForm.acknowledgment" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Corresponding Author</h3>
							<el-input type="textarea" v-model="checkForm.authorCorresponding" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Author Corresponding Email</h3>
							<el-input type="textarea" v-model="checkForm.authorCorrespondingEmail" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Abbreviation</h3>
							<el-input type="textarea" v-model="checkForm.abbreviation" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Accepted Date</h3>
							{{modifDate(checkForm.accepted_date)}}
						</div>
						<div class="vefi_cation">
							<h3>Received Date</h3>
							{{modifDate(checkForm.received_date)}}
						</div>
						<div class="vefi_cation">
							<h3>Topic</h3>
							<el-input type="textarea" v-model="checkForm.topic" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Keywords</h3>
							<el-input type="textarea" v-model="checkForm.keywords" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Doi</h3>
							{{checkForm.doi}}
						</div>
						<div class="vefi_cation">
							<h3>Traditon</h3>
							<el-input type="textarea" v-model="checkForm.traditon" :autosize="{minRows: 2}"></el-input>
						</div>
						<div class="vefi_cation">
							<h3>Abstract Text</h3>
							<el-input type="textarea" v-model="checkForm.abstractText" :autosize="{minRows: 2}"></el-input>
						</div>
						<div style="text-align: center;">
							<el-button type="primary" style="width: 400px;margin: 10px auto 50px auto;" @click="checkActicle(checkForm)">OK</el-button>
						</div>
						<div class="vefi_cation">
							<h3 class="mark">MainText</h3>
							<p style="font-size: 14px;line-height: 1.6;color: #606266;">{{checkForm.mainText}}</p>
							<!-- <el-input type="textarea" v-model="checkForm.mainText" :autosize="{minRows: 2}"></el-input> -->
							<!-- <quill-editor ref="myTextEditor" v-model="checkForm.mainText" :options="editorOption"></quill-editor> -->
							<!-- <el-upload class="avatar-uploader" :action="" name="journalfooter" :show-file-list="false"
					 :on-success="uploadSuccess">
					</el-upload> -->
						</div>
						<div class="vefi_cation">
							<h3>Reference</h3>
							<div class="vef_refen" v-for="item in this.refFile">
								<p>
									{{item.refer_title}}
									<i class="el-icon-edit" @click="handleEdit(item.typesetInfoReferenceId,item.refer_title)"></i>
									<i class="el-icon-delete" @click="handleDelete(item.typesetInfoReferenceId)" style="color: #ff3636;"></i>
								</p>
							</div>
						</div>

					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 编辑参考文献弹出框 -->
		<el-dialog title="Edit references" :visible.sync="editVisible" width="50%" :close-on-click-modal="false">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="95px">
				<el-form-item label="Reference" prop="title">
					<el-input v-model="editForm.title" type="textarea" :autosize="{minRows: 2}"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveEdit(editForm)">OK</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor
	} from 'vue-quill-editor';
	export default {
		data() {
			return {
				article_id: this.$route.query.esay_id,
				article_title: '',
				loading: false,
				editVisible: false,
				checkForm: {
					'info_title': '',
					'info_type': '',
					'author': '',
					'authorAddress': '',
					'authorContribution': '',
					'acknowledgment': '',
					'authorCorresponding': '',
					'authorCorrespondingEmail': '',
					'abbreviation': '',
					'accepted_date': '',
					'online_date': '',
					'received_date': '',
					'topic': '',
					'little_author': '',
					'keywords': '',
					'doi': '',
					'traditon': '',
					'abstractText': '',
					'mainText': ''
				},
				refFile: [],
				editForm: {
					title: '',
					typesetInfoReferenceId: '',
				},
				content: '',
				editorOption: {
					placeholder: 'Please enter...',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'],
								['blockquote', 'code-block'],
								[{
									'header': 1
								}, {
									'header': 2
								}],
								[{
									'list': 'ordered'
								}, {
									'list': 'bullet'
								}],
								[{
									'script': 'sub'
								}, {
									'script': 'super'
								}],
								[{
									'indent': '-1'
								}, {
									'indent': '+1'
								}],
								[{
									'direction': 'rtl'
								}],
								[{
									'size': ['small', false, 'large', 'huge']
								}],
								[{
									'header': [1, 2, 3, 4, 5, 6, false]
								}],
								[{
									'color': []
								}, {
									'background': []
								}],
								[{
									'font': []
								}],
								[{
									'align': []
								}],
								['link', 'image', 'video']
							],
							// 工具栏
							handlers: {
								image: function(value) {
									if (value) {
										// upload点击上传事件
										document.querySelector('.avatar-uploader input').click()
									} else {
										this.quill.format('image', false)
									}
								}
							}
						}
					}
				},
				rules: {
					title: [{
						required: true,
						message: 'To add a reference, please enter',
						trigger: 'blur'
					}]
				}
			};
		},
		mounted() {

		},
		created() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				this.$api
					.post('typeset/gettypesetdetail', {
						'typesetId': this.article_id
					})
					.then(res => {
						if (res.ret == 0) {
							this.article_title = res.data.info.title;
							this.checkForm = res.data.info.u_typeset_info;
							this.checkForm.mainText = res.data.info.u_typeset_info.mainText;
							this.refFile = res.data.refers;
						} else {
							this.$message.error(res.error);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 提交文章排版
			checkActicle(checkForm) {
				if (this.checkForm.info_title == '' || this.checkForm.author == '' || this.checkForm.authorAddress == '' || this.checkForm
					.mainText == '') {
					this.$message.error('Please complete the information');
				} else {
					this.loading = true;
					this.$api
						.post('typeset/edittypesetinfo', this.checkForm)
						.then(res => {
							if (res.ret == 0) {
								this.$router.push({
									path: '/formwork',
									query: {
										esay_id: this.article_id
									}
								});
								this.loading = false;
							} else {
								this.loading = false;
								this.$message.error(res.error);
							}
						})
						.catch(err => {
							this.loading = false;
							this.$message.error(err);
						});
				}
			},
			// 编辑文献操作
			handleEdit(e, h) {
				this.editForm.title = h;
				this.editForm.typesetInfoReferenceId = e;
				this.editVisible = true;
			},
			// 保存文献
			saveEdit(editForm) {
				this.$refs.edit_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('typeset/editTypesetRefer', this.editForm)
							.then(res => {
								if (res.ret == 0) {
									this.editVisible = false;
									this.$message.success(`Change succeeded!`);
									this.getData();
								} else {
									this.$message.error(res.error);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 删除文献操作
			handleDelete(e) {
				// 二次确认删除
				this.$confirm('Are you sure you want to delete？', 'Tips', {
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel',
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('typeset/delTypesetReferById', {
								'typeset_info_reference_id': e
							})
							.then(res => {
								if (res.ret == 0) {
									this.$message.success('Delete succeeded');
									this.getData();
								} else {
									this.$message.error(res.error);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},

			// 上传成功
			// uploadSuccess(res) {
			// 	let quill = this.$refs.myTextEditor.quill;

			// 	// 获取光标所在位置
			// 	let length = quill.getSelection().index
			// 	// 插入图片 res.upurl为服务器返回的图片地址
			// 	// quill.insertEmbed(length, 'image', this.IMGqi_Url + 'journalfooter/' + res.upurl)
			// 	// 调整光标到最后
			// 	quill.setSelection(length + 1)
			// }

			// 点击步骤条
			handleStep1() {
				this.$router.push({
					path: '/compose',
					query: {
						esay_id: this.article_id
					}
				});
			},
			handleStep3() {
				this.$router.push({
					path: '/formwork',
					query: {
						esay_id: this.article_id
					}
				});
			},

			// 修改时间标准格式
			modifDate(e) {
				let date = new Date(parseInt(e));
				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();
				return Y + M + D;
			},
		},
		components: {
			quillEditor
		}
	};
</script>

<style>
	.luan_ma {
		position: fixed;
		top: 20px;
		left: 50%;
		margin-left: -290px;
		color: #e61e12;
		font-size: 22px;
		font-weight: bold;
	}

	.step_role {
		margin: 0 auto 10px auto;
		/* width: 800px; */
	}

	.step_role .move_bar {
		width: 100%;
		margin: 5px 0 0 0;
	}

	.pane_act {
		background-color: #fff;
		height: 90.5%;
	}

	.pane_act>h1 {
		font-size: 15px;
		margin: 0 0 5px 0;
		padding: 15px 0 15px 20px;
		border-bottom: 1px solid #dde1eb;
		box-shadow: rgb(134 134 134) 0px 5px 5px -2px;
	}

	.pane_act>div {
		/* height: 92%;
		overflow-y: scroll; */
	}

	.vefi_cation {
		padding: 20px 30px;
	}

	.vefi_cation>h3 {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.vefi_cation>h3.mark:before {
		content: '*';
		color: #F56C6C;
		margin-right: 4px;
	}

	.vefi_cation .el-textarea__inner {
		box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
		font-size: 14px;
		font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
	}


	.vefi_cation .ql-toolbar.ql-snow {
		border: 0;
		box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
	}

	.vefi_cation .ql-container.ql-snow {
		border: 0;
		box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
	}

	.vefi_cation .vef_refen>p {
		font-size: 14px;
		line-height: 1.5;
		color: #606266;
		padding: 10px 15px;
	}


	.vefi_cation .vef_refen>p>i {
		display: none;
		margin-left: 10px;
		cursor: pointer;
		color: #39aeff;
		font-size: 16px;
	}

	.vefi_cation .vef_refen>p:hover {
		box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
	}

	.vefi_cation .vef_refen>p:hover i.el-icon-edit {
		display: inline-block;
	}

	.vefi_cation .vef_refen>p:hover i.el-icon-delete {
		display: inline-block;
	}
</style>
