<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> Manuscript email detail
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state" v-loading="loading">
			<el-row :gutter="30">
				<el-col :span="16">
					<el-form :model="EmailData" label-width="110px" class="Email_Data">
						<el-form-item label="Sender :">
							<el-input v-model="AuthorMes.email"></el-input>
						</el-form-item>
						<el-form-item label="Content :">
							<p v-html="EmailData.topmail"></p>
							<p v-html="EmailData.articleInfor"></p>
							<el-input type="textarea" rows="9" v-model="EmailData.substance" @input="btn_ft=false">
							</el-input>
							<p v-html="EmailData.bottomail"></p>
						</el-form-item>
						<el-form-item label="Attachment :">
							<el-upload style="display: inline-block;" class="upload-demo" :action="upload_enclosure"
								accept=".docx," name="enclosure" :before-upload="beforeupload_enclosure"
								:on-error="uperr_enclosure" :on-success="upSuccess_enclosure" :limit="1"
								:on-exceed="alertlimit" :on-remove="removefilenclosure">
								<div class="el-upload__text" style="padding:0 5px;">
									<em>Click Upload</em>
								</div>
								<div class="el-upload__tip" slot="tip">Only word file can be uploaded(.docx)</div>
							</el-upload>
						</el-form-item>
						<el-button type="primary" @click="sendData" :disabled="btn_ft"
							style="float: right;margin-top: -20px;">Send mail
						</el-button>
					</el-form>
				</el-col>
				<el-col :span="8">
					<div class="muban_list">
						<p>Template selection</p>
						<el-collapse v-model="activeNames" default-expand-all>
							<el-collapse-item v-for="(itemC, indexC) in mubanList" :title="itemC.etitle"
								:name="itemC.eid">
								<div class="sel_muban" v-for="(item, index) in itemC.children">
									<i class="header-icon el-icon-circle-plus" @click="add_muban(item)"></i>
									{{item.econtent}} 
									<span style="color: #999;margin-left: 10px;">({{item.num}})</span>
									<br>
									{{item.etitle}}
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				baseUrl: this.Common.baseUrl,
				articleId: this.$route.query.id,
				AuthorMes: {},
				EmailData: {
					email: '',
					attachment: '',
					substance: '',
					topmail: '',
					articleInfor: '',
					bottomail: ''
				},
				activeNames: [],
				mubanList: [],
				btn_ft: false
			};
		},
		created: function() {
			this.getData();
		},
		computed: {
			upload_enclosure: function() {
				return this.baseUrl + 'api/Email/up_enclosure_file';
			},
		},
		methods: {
			//获取数据
			getData() {
				this.$api
					.post('api/Email/getAllEmailTemplate')
					.then(res => {
						if (res.code == 0) {
							this.mubanList = res.data.templates;
							// for (let i in this.mubanList) {
							// 	this.activeNames.push(this.mubanList[i].eid)
							// }
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
var data={article_id: this.articleId}
if(this.$route.query.user_id){
	data.art_aut_id=this.$route.query.user_id
}
				this.$api
					.post(this.$route.query.user_id?'api/Workbench/getCorrespondingInfo':'api/Article/getArticleUserDetail', {
						...data
					})
					.then(res => {
						if(this.$route.query.user_id){
							if (res.status == 1) {
							this.AuthorMes = res.data.user;
							this.EmailData.topmail = 'Dear Dr. ' + this.AuthorMes.realname + ',<br/>';
						} else {
							this.$message.error(res.msg);
						}
						}else{
							if (res.code == 0) {
							this.AuthorMes = res.data.userDetail;
							this.EmailData.topmail = 'Dear Dr. ' + this.AuthorMes.realname + ',<br/>';
						} else {
							this.$message.error(res.msg);
						}
						}
						
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('api/Article/getArticleDetail', {
						articleId: this.articleId,
						human: 'editor'
					})
					.then(res => {
						let arry = res.article;
						this.EmailData.articleInfor = arry.accept_sn + '<br/>' + arry.title + '<br/>';
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('api/Journal/getJournalDetailByArticleId', {
						article_id: this.articleId
					})
					.then(res => {
						if (res.code == 0) {
							let arry = res.data.journal;
							this.EmailData.bottomail = '<br/>Yours Sincerely' +
								'<br/>' + arry.title + ' | Editorial Office | New Zealand' +
								'<br/>Telephone: +64 02108293806' +
								'<br/>Email: ' + arry.email +
								'<br/>' + arry.website +
								'<br/>Subscribe to receive Latest Research and News from ' + arry.title +
								'<br/>https://www.tmrjournals.com/draw_up.html?issn=' + arry.issn
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},


			// 发送邮件
			sendData() {
				if (this.EmailData.substance == '') {
					this.$message.error('Please enter the message content!');
					return
				}
				this.loading = true;
				this.EmailData.content = this.EmailData.topmail + this.EmailData.articleInfor + '<br/>' + this.EmailData
					.substance.replace(/\n/g, '<br/>') + '<br/>' + this.EmailData.bottomail;
				this.EmailData.email = this.AuthorMes.email;
				this.EmailData.article_id = this.articleId;
				this.$api
					.post('api/Email/pushEmailOnTemplate', this.EmailData)
					.then(res => {
						if (res.code == 0) {
							setTimeout(() => {
								this.loading = false
								this.btn_ft = true
								this.$message.success('Sent successfully!');
								this.$router.push({
									path: 'articleDetailEmailist',
									query: {
										id: this.articleId
									}
								});
							}, 2500);
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 添加模板
			add_muban(e) {
				if (this.EmailData.substance == '') {
					this.EmailData.substance += e.econtent
				} else {
					this.EmailData.substance += '\n\n' + e.econtent
				}
				// 增加次数
				this.$api
					.post('api/Email/addEmailTemplateNum', e)
					.then(res => {
						e.num += 1
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 附件上传
			beforeupload_enclosure() {},
			uperr_enclosure(err) {
				this.$message.error('upload error');
			},
			upSuccess_enclosure(res, file) {
				if (res.code == 0) {
					this.EmailData.attachment = 'enclosure/' + res.upurl;
				} else {
					this.$message.error('service error：' + res.msg);
				}
			},
			removefilenclosure(file, fileList) {
				this.EmailData.attachment = '';
			},
			alertlimit() {
				this.$message.error('The maximum number of uploaded files has been exceeded!');
			},
		}
	};
</script>


<style>
	.Email_Data {
		margin: 30px 0 0 0;
	}

	.Email_Data .el-textarea__inner {
		line-height: 26px;
		margin: 10px 0 -20px 0;
		border: 0;
		box-shadow: 1px 1px 5px 1px rgb(0 102 153 / 20%);
		font-size: 14px;
		font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
	}

	.Email_Data p {
		line-height: 27px;
		padding-top: 4px;
	}

	.Email_Data .el-upload__tip {
		display: inline-block;
		line-height: 38px;
		margin: 0 0 0 15px;
		color: #888 !important;
		vertical-align: text-bottom;
	}

	.muban_list {
		border-left: 1px solid #eee;
		padding: 0 0 0 30px;
	}

	.muban_list>p {
		margin: 45px 0 30px 0;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: -1px;
	}

	.muban_list .el-collapse {
		overflow-y: auto;
		max-height: 650px;
	}

	.muban_list .el-collapse-item__header {
		background-color: transparent;
	}

	.muban_list .el-collapse-item__header .header-icon {
		margin: 0 10px 0 0;
		font-size: 16px;
		color: #006699;
	}

	.muban_list .el-collapse-item__wrap {
		background-color: transparent;
	}

	.muban_list .sel_muban {
		line-height: 26px;
		position: relative;
		padding-left: 30px;
		margin-bottom: 20px;
	}

	.muban_list .sel_muban:last-child {
		margin-bottom: 0;
	}

	.muban_list .sel_muban i {
		position: absolute;
		font-size: 18px;
		color: #006699;
		cursor: pointer;
		top: 3px;
		left: 1px;

	}
</style>
