<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> Email promotion task
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state" v-loading="loading" style="min-width: 1100px;">

			<el-form :rules="rules" ref="emailRef" :model="EmailData" label-width="220px" class="Email_Data">
				<div class="d_rol">
					<h3>
						Journal
					</h3>
					<el-form-item label="Promoting journal :" prop="journal_issn">
						<el-select v-model="EmailData.journal_issn" placeholder="Please select a journal"
							@change="getIssnMajor" style="width: 260px;">
							<el-option v-for="item in journalList" :label="item.title" :key="item.issn"
								:value="item.issn">
							</el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="d_rol">
					<h3>
						Personnel Scope
					</h3>
					<el-form-item label="Target library :" prop="library">
						<el-select v-model="EmailData.library" placeholder="Please select a range"
							style="width: 215px;margin-right: 15px;" @change="getTarUser()">
							<el-option v-for="item in ubaseList" :label="item.title" :key="item.id" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="User Country :" prop="china_type">
						<el-radio-group v-model="EmailData.china_type" @change="getTarUser()">
							<el-radio :label="0">
								All countries
							</el-radio>
							<el-radio :label="1">
								Only China
							</el-radio>
							<el-radio :label="2">
								Without China
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="Target personnel :" prop="category">
						<div class="senderKuan" style="position: relative;">
							<el-radio-group v-model="EmailData.category" @change="numCateGory">
								<el-radio label="keyword" style="display: inline-block;margin-right: 20px;">
									Keywords :
									<el-input v-model="EmailData.keyword" placeholder="Please enter keyword"
										style="width: 160px;margin:0 10px;" @focus="gatClearkey">
									</el-input>
								</el-radio>
								<el-radio label="major" style="display: inline-block;">
									Research direction :
								</el-radio>
								<el-button type="primary" icon="el-icon-search" @click="getUser()"
									style="margin-left: 210px;">Search
								</el-button>
							</el-radio-group>
							<el-cascader v-model="EmailData.major" :options="majorList" :props="defaultParams" clearable
								placeholder="Please select a major" @change="majorChange" popper-class='majorSelct'
								:key="keyValue" style="width: 200px;position: absolute;top: 17px;left: 480px;">
							</el-cascader>
							<div>

							</div>
							<p class="tolPeoUse">
								A total of <b>{{userListNum}}</b> users meet the filtering criteria.
							</p>
						</div>
					</el-form-item>
					<el-form-item label="Number of sends per time :" prop="pagesize">
						<el-select v-model="EmailData.pagesize" placeholder="Please select number"
							style="width: 100px;">
							<el-option v-for="item in numberList" :label="item.number" :key="item.number"
								:value="item.number">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Scheduled Tasks :" prop="frequency">
						<el-radio-group v-model="EmailData.frequency">
							<el-radio label="day" style="display: block;margin: 10px 0 0 0;">
								Day
								<span style="margin: 0 0 0 5px;">(explanatory note: 10:00 - 12:00)</span>
							</el-radio>
							<el-radio label="week" style="display: block;margin: 18px 0;">
								Week
								<span style="margin: 0 0 0 5px;">(explanatory note: Monday - Tuesday)</span>
							</el-radio>
							<el-radio label="month" style="display: block;">
								Month
								<span style="margin: 0 0 0 5px;">(explanatory note: 1st - 5th)</span>
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</div>
				<div class="d_rol">
					<h3>
						Mail
					</h3>
					<el-form-item label="Mail Range :" prop="range">
						<el-select v-model="EmailData.range" placeholder="Please select a range" @change="changeRange()"
							style="width: 260px;">
							<el-option v-for="item in rangeList" :label="item.title" :key="item.id" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="Promoting article :" prop="" v-if="EmailData.range==2">
						<div class="senderKuan">
							<el-button size="mini" type="primary" icon="el-icon-document" @click="openArticl">
								Change Articles
							</el-button>
							<p style="height: 5px;"></p>
							<p v-for="(item,index) in artChoseList" class="artChosn">
								<a :href="'https://www.tmrjournals.com/article.html?J_num='+item.journal_id+'&a_id='+item.article_id"
									target="_blank">
									<font>{{index+1}}.</font> {{item.title}}
								</a>
								<font style="color: #aaa;"> - {{item.journal_title}}</font>
								<b @click="deleteArticleCho(item,index)" class="el-icon-delete"></b>
							</p>
						</div>
					</el-form-item>

					<el-form-item label="Mail Template :" prop="template">
						<el-select v-model="EmailData.template" placeholder="Please select a template"
							@change="changeTemple($event)" style="width: 400px;margin-right: 20px;">
							<el-option v-for="item in templeList" :label="item.title" :key="item.pro_email_id"
								:value="item.pro_email_id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="Content :">
						<div class="emaStyle">
							<img src="../../assets/img/mailPT.png" v-if="EmailData.has_hb==1"
								style="margin-bottom: -10px;">
							<div style="background-color: #fff;" v-if="EmailData.range==1">
								<quill-editor ref="myTextEditor" v-model="EmailData.substance" :options="editorOption"
									@focus="myTextMark='myTextEditor'">
								</quill-editor>
							</div>
							<div style="background-color: #fff;" v-if="EmailData.range==2">
								<quill-editor ref="myTextEditor1" v-model="EmailData.substance_top"
									:options="editorOption" @focus="myTextMark='myTextEditor1'">
								</quill-editor>
								<div v-for="(item,index) in artChoseList" class="artCLise">
									<a :href="'https://www.tmrjournals.com/article.html?J_num='+item.journal_id+'&a_id='+item.article_id"
										target="_blank">
										<font></font> {{item.title}}
									</a>
									<p style="color: #444;font-family: Calibri;font-size: 16px;">{{item.authortitle}}
									</p>
									<p style="color: #333;">
										{{item.journal_title}}
										<font style="display:inline-block;margin: 0 20px 0 20px;">|</font>
										<a :href="'https://www.tmrjournals.com/public/articlePDF/'+item.file_pdf"
											target="_blank">
											<img src="https://www.tmrjournals.cn/img/link_3.jpg">PDF
										</a>
									</p>
									<p>
										<b>Cite this article :</b>
										<font v-html="item.cite"></font>
									</p>
								</div>
								<quill-editor ref="myTextEditor2" v-model="EmailData.substance_bom"
									:options="editorOption" @focus="myTextMark='myTextEditor2'">
								</quill-editor>
							</div>
							<img src="../../assets/img/mailPB.png" v-if="EmailData.has_hb==1"
								style="margin-bottom: -10px;">

							<el-upload class="avatar-uploader avatar-uploader-foot"
								:action="baseUrl+'api/Promotion/up_promotion_file'" name="promotion"
								:show-file-list="false" :on-success="uploadSuccess">
							</el-upload>

						</div>
					</el-form-item>
					<el-form-item label="Public Image :" prop="has_hb">
						<el-radio-group v-model="EmailData.has_hb">
							<el-radio :label="1">Yes</el-radio>
							<el-radio :label="2">No</el-radio>
						</el-radio-group>
					</el-form-item>

				</div>
			</el-form>


			<div style="text-align: center;margin: 30px 0 30px 0;">
				<el-button type="primary" icon="el-icon-message" @click="saveData" :disabled="btn_ft">
					Save email promotion task
				</el-button>
			</div>
		</div>

		<!-- 更换文章弹出框 -->
		<el-dialog title="Change Articles" :visible.sync="articleBox" width="885px" :close-on-click-modal="false">
			<div>
				<span class="artTile" style="width: 115px;">Journal stage :</span>
				<!-- <el-select v-model="articleForm.journal_id" @change="changeJournal"
					placeholder="Please select a journal" style="width: 190px;">
					<el-option v-for="item in journalList" :key="item.journal_id" :label="item.title"
						:value="item.journal_id">
					</el-option>
				</el-select> -->
				{{articleForm.journal_title}} -
				<el-select v-model="articleForm.journal_stage_id" @change="getArticle"
					placeholder="Please select a stage" style="width: 250px;margin: 0 15px;">
					<!-- <el-option :key="0" label="All stages" :value="0"></el-option> -->
					<el-option v-for="item in stageList" :key="item.journal_stage_id"
						:label="item.stage_year+' Vol.'+item.stage_vol +' issue.'+item.stage_no+' '+item.stage_pagename+item.stage_page"
						:value="item.journal_stage_id">
					</el-option>
				</el-select>

				<div class="artChoList">
					<p v-for="(item,index) in artTicleList"
						:style="item.chooState==0?'border-color:#eee':'border-color:#00669980'">
						<a :href="'https://www.tmrjournals.com/article.html?J_num='+item.journal_id+'&a_id='+item.article_id"
							target="_blank">
							<font>{{index+1}}.</font> {{item.title}}
						</a>
						<i class="kuangGeo" @click="saveArticle(item,index)"></i>
						<b class="el-icon-check" @click="deleteArticle(item,index)" v-if="item.chooState==1"></b>
					</p>
					<div style="text-align: center;color: #aaa;" v-if="artTicleList.length==0">No Articles</div>
					<div style="text-align: center;color: #aaa;" v-if="artTicleList.length!=0">
						{{artTicleList.length}} articles in total
					</div>
					<!-- <div class="pagination">
						<el-pagination background layout="total, prev, pager, next"
							:current-page="articleForm.pageIndex" :page-size="articleForm.pageSize" :total="ArtTotal"
							@current-change="ArthandlePageChange"></el-pagination>
					</div> -->
				</div>

			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="articleBox = false">Cancel</el-button>
			</span>
		</el-dialog>

		<!-- 测试邮件弹出框 -->
		<el-dialog title="Send test mail" :visible.sync="testEBox" width="500px">
			<el-form ref="testRef" :rules="rules" :model="EmailData" label-width="120px">
				<el-form-item label="Test Email :" prop="test">
					<el-input v-model="EmailData.email" style="width: 280px;" placeholder="Please enter the test email">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="testEBox = false">Cancel</el-button>
				<el-button type="primary" @click="sendTest">Send test mail</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 {
				loading: false,
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				EmailData: {
					user_id: localStorage.getItem('U_id'),
					email_title: '',
					journal_issn: '',
					journal_id: '',
					library: 'user',
					category: 'keyword',
					keyword: '',
					major: '',
					china_type: 0,
					pagesize: 100,
					range: 1,
					template: '',
					has_hb: 2,
					substance: '',
					substance_top: '',
					substance_bom: '',
					substanceOld: '',
					frequency: 'day',
				},
				keyValue: 0,
				userListNum: 0,
				rangeList: [{
					title: 'Promotion',
					id: 1
				}, {
					title: 'Article Recommendation',
					id: 2
				}],
				numberList: [],
				journalList: [],
				stageList: [],
				templeList: [],
				ubaseList: [{
					title: 'All Users',
					id: 'user'
				}, {
					title: 'Author Database',
					id: 'author'
				}, {
					title: 'Untapped Users',
					id: 'ash'
				}],
				btn_ft: false,
				majorList: [],
				artChoseList: [],
				artTicleList: [],
				articleForm: {
					pageIndex: 1,
					pageSize: 30,
					journal_stage_id: ''
				},
				ArtTotal: 0,
				articleBox: false,
				testEBox: false,
				defaultParams: {
					label: 'major_title',
					value: 'major_id',
					children: 'children',
					checkStrictly: true,
				},
				myTextMark: 'myTextEditor',
				rules: {
					range: [{
						required: true,
						message: 'please select a mail range',
						trigger: 'blur'
					}],
					journal_issn: [{
						required: true,
						message: 'please select a journal',
						trigger: 'blur'
					}],
					journal_id: [{
						required: true,
						message: 'please select a journal',
						trigger: 'blur'
					}],
					library: [{
						required: true,
						message: 'please select a library',
						trigger: 'blur'
					}],
					category: [{
						required: true,
						message: 'please select a personnel',
						trigger: 'blur'
					}],
					template: [{
						required: true,
						message: 'please select a template',
						trigger: 'blur'
					}],
					has_hb: [{
						required: true,
						message: 'please select public image',
						trigger: 'blur'
					}],
					frequency: [{
						required: true,
						message: 'please select a scheduled tasks',
						trigger: 'blur'
					}],
					comment: [{
						required: true,
						message: "please input",
						trigger: "blur"
					}],
					test: [{
						required: true,
						message: "please input",
						trigger: "blur"
					}],
					china_type: [{
						required: true,
						message: "please select",
						trigger: "blur"
					}],
					pagesize: [{
						required: true,
						message: "please select a pagesize",
						trigger: "blur"
					}],
				},
				editorOption: {
					placeholder: 'Please enter...',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'],
								[{
									'header': 1
								}, {
									'header': 2
								}],
								[{
									'list': 'ordered'
								}, {
									'list': 'bullet'
								}],
								[{
									'script': 'sub'
								}, {
									'script': 'super'
								}],
								[{
									'size': ['small', false, 'large', 'huge']
								}],
								[{
									'header': [1, 2, 3, 4, 5, 6, false]
								}],
								[{
									'color': []
								}, {
									'background': []
								}],
								[{
									'align': []
								}],
								['link', 'image']
							],
							// 工具栏
							handlers: {
								image: function(value) {
									if (value) {
										// upload点击上传事件
										document.querySelector('.avatar-uploader input').click()
									} else {
										this.quill.format('image', false)
									}
								}
							}
						}
					}
				},
			};
		},
		created: function() {
			this.getData();
			this.changeRange();
		},
		computed: {

		},
		methods: {
			//获取数据
			getData() {
				this.$api
					.post('api/Chief/getJournalsByEditor', {
						'user_id': this.EmailData.user_id
					})
					.then(res => {
						if (res.code == 0) {
							this.journalList = res.data.journals;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				for (let i = 1; i <= 40; i++) {
					this.numberList.push({
						number: i * 5
					})
				}

			},

			// 更换期刊
			getIssnMajor() {
				this.EmailData.major = ''
				this.$api
					.post('api/Major/getJournalMajorList', {
						journal_issn: this.EmailData.journal_issn
					})
					.then(res => {
						if (res.code == 0) {
							this.majorList = res.data.majors;
							for (let i = 0; i < this.journalList.length; i++) {
								if (this.EmailData.journal_issn == this.journalList[i].issn) {
									this.EmailData.journal_id = this.journalList[i].journal_id
									this.articleForm.journal_id = this.journalList[i].journal_id
									this.articleForm.journal_title = this.journalList[i].title
								}
							}

							// 选择分期
							this.$api
								.post('api/Web/getStages', this.articleForm)
								.then(res => {
									if (res.code == 0) {
										this.stageList = res.data.stages;
										this.articleForm.journal_stage_id = this.stageList[0].journal_stage_id
										this.getArticle()
									} else {
										this.$message.error(res.msg);
									}

								})
								.catch(err => {
									console.log(err);
								});

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

			// 切换范围获取模板
			changeRange() {
				this.EmailData.template = ''
				this.EmailData.substance = ''
				this.EmailData.substance_top = ''
				this.EmailData.substance_bom = ''
				this.$api
					.post('api/Promotion/getEmailModel', {
						type: this.EmailData.range
					})
					.then(res => {
						if (res.code == 0) {
							this.templeList = res.data.list;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},


			// 切换模板
			changeTemple(e) {
				for (let i = 0; i < this.templeList.length; i++) {
					if (this.templeList[i].pro_email_id == e) {
						this.EmailData.email_title = this.templeList[i].title
						if (this.EmailData.range == 1) {
							this.EmailData.substance = this.templeList[i].content
						} else if (this.EmailData.range == 2) {
							this.EmailData.substance = this.templeList[i].content.split('{{articles}}\r\n\r\n')
							this.EmailData.substance_top = this.EmailData.substance[0]
							this.EmailData.substance_bom = this.EmailData.substance[1]
						}

						console.log()
					}
				}
			},

			// 插入文章列表
			pushArticle() {
				this.EmailData.substance = JSON.parse(JSON.stringify(this.EmailData.substanceOld))
				let artHtml = ''
				if (this.artChoseList.length > 0 && this.EmailData.range == 2) {
					for (let i = 0; i < this.artChoseList.length; i++) {
						artHtml +=
							'<div class="artCLise" style="line-height: 22px;margin-bottom: 15px;padding-bottom: 18px;border-bottom: 1px dashed #4e837480;"><a href="https://www.tmrjournals.com/article.html?J_num=' +
							this
							.artChoseList[i].journal_id + '&a_id=' + this.artChoseList[i].article_id +
							'" target="_blank" style="color: #4e8374;font-weight: bold;"><font style="display: inline-block;width: 7px;height: 7px;border-radius: 10px;margin: 0 3px 0 0;background-color: #4e8374;"></font>' +
							this.artChoseList[i].title +
							'</a><p style="color: #444;font-family: Calibri;font-size: 16px;">' +
							this.artChoseList[i].authortitle + '</p><p style="color: #333;">' + this.artChoseList[i]
							.journal_title +
							'<font style="display:inline-block;margin: 0 20px 0 20px;">|</font><a href="https://www.tmrjournals.cn/public/articlePDF/' +
							this.artChoseList[i].file_pdf +
							'" target="_blank" style="color: #7a2702;"><img src="https://www.tmrjournals.cn/img/link_3.jpg" style="width: 14px;vertical-align: text-bottom;margin: 0 5px 0 0;">PDF</a></p><p><b style="margin: 0 5px 0 0;letter-spacing: -0.5px;color: #4e8374;font-weight: normal;">Cite this article :</b><font v-html="item.cite">' +
							this.artChoseList[i].cite + '</font></p></div>'
					};
					artHtml = artHtml +
						'<br/><style>.artCLise p{margin: 3px 0 0 2px;font-size: 13px;}.artCLise a{text-decoration: none;}.artCLise a:hover{text-decoration: underline;}</style>'



					// for (let i = 0; i < this.artChoseList.length; i++) {
					// 	artHtml +=
					// 		'<a href="https://www.tmrjournals.com/article.html?J_num=' + this.artChoseList[
					// 			i]
					// 		.journal_id +
					// 		'&a_id=' + this.artChoseList[i].article_id +
					// 		'" target="_blank" style="font-size: 14px;line-height: 22px;color: #4e8374;font-weight: bold;"><font style="display: inline-block;width: 7px;height: 7px;border-radius: 10px;margin: 0 3px 0 0;background-color: #4e8374;"></font>' +
					// 		this.artChoseList[i].title +
					// 		'</a><p style="color: #444;font-family: Calibri;font-size: 16px;line-height: 20px;">' +
					// 		this
					// 		.artChoseList[i]
					// 		.authortitle + '</p><p style="color: #333;">' + this.artChoseList[i]
					// 		.journal_title +
					// 		'<text style="display: inline-block;margin: 0 20px 0 20px;">|</text><a href="https://www.tmrjournals.cn/public/articlePDF/' +
					// 		this.artChoseList[i].file_pdf +
					// 		'" target="_blank" style="color: #7a2702;"><img src="https://www.tmrjournals.cn/img/link_3.jpg" style="width: 14px;vertical-align: text-bottom;margin: 0 5px 0 0;">PDF</a></p><p style="margin: 5px 0 15px 2px;padding:0 0 18px 0;line-height: 20px;font-size: 12px;color: #777;border-bottom: 1px dashed #4e837480;"><b style="margin: 0 5px 0 0;letter-spacing: -0.5px;color: #4e8374;font-weight: normal;">Cite this article :</b><font>' +
					// 		this.artChoseList[i].cite + '</font></p>'
					// };

					// artHtml =
					// 	'<div class="artCLise">' + artHtml +
					// 	'</div><p style="height:20px"></p><style>.artCLise p{margin: 3px 0 0 2px;font-size: 13px;}.artCLise a{text-decoration: none;}.artCLise a:hover{text-decoration: underline;}</style>'

					if (this.EmailData.substance.indexOf("{{articles}}\r\n\r\n") != -1) {
						this.EmailData.substance = this.EmailData.substance.replace('{{articles}}\r\n\r\n', artHtml)
						// console.log(this.EmailData.substance)
					}


				}
			},

			// 切换人员库-关键词、领域
			getUser() {
				if (this.EmailData.category == 'keyword') {
					if (this.EmailData.keyword == '') {
						this.$message.error('Please fill in the keywords!');
						return
					}
					this.$api
						.post('api/Promotion/getLibUsers', {
							'lib': this.EmailData.library,
							'category': 'keyword',
							'body': this.EmailData.keyword,
							'china_type': this.EmailData.china_type,
						})
						.then(res => {
							if (res.code == 0) {
								this.userListNum = res.data.count;
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else if (this.EmailData.category == 'major') {
					this.$api
						.post('api/Promotion/getLibUsers', {
							'lib': this.EmailData.library,
							'category': 'major',
							'body': this.EmailData.major,
							'china_type': this.EmailData.china_type,
						})
						.then(res => {
							if (res.code == 0) {
								this.userListNum = res.data.count;
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				}
			},

			// 改变人员多选框
			chanProce(e) {
				this.$forceUpdate()
			},

			// 切换人员范围
			getTarUser() {
				if (this.EmailData.category == 'keyword') {
					if (this.EmailData.keyword != '') {
						this.getUser()
					}
				} else if (this.EmailData.category == 'major') {
					if (this.EmailData.major != '') {
						this.getUser()
					}
				}
			},

			// 切换搜索方式
			numCateGory() {
				this.userListNum = 0
				this.EmailData.major = ''
			},

			// 聚焦关键词搜索方式
			gatClearkey() {
				this.EmailData.category = 'keyword'
				this.EmailData.major = ''
				this.userListNum = 0
			},

			// 选择领域
			majorChange(value) {
				this.EmailData.category = 'major'
				this.EmailData.keyword = ''
				this.userListNum = 0
				if (value.length == 0) {
					this.EmailData.major = ''
				} else {
					this.EmailData.major = value[value.length - 1]
				}
			},


			// 文章弹出层
			openArticl() {
				if (this.EmailData.journal_issn == '') {
					this.$message.error('Please select a journal!');
				} else {
					this.articleBox = true
				}
			},

			// 筛选文章
			getArticle() {
				this.$api
					.post('api/Web/getArticlesByStage', this.articleForm)
					.then(res => {
						if (res.code == 0) {
							this.artTicleList = res.data.articles;
							this.ArtTotal = this.artTicleList.length
							for (let i = 0; i < this.artTicleList.length; i++) {
								this.artTicleList[i].chooState = 0
								for (let j = 0; j < this.artChoseList.length; j++) {
									if (this.artTicleList[i].article_id == this.artChoseList[j].article_id) {
										this.artTicleList[i].chooState = 1
										continue;
									}
								};
							};
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},

			// 添加文章
			saveArticle(row, e) {
				if (this.artChoseList.length >= 5) {
					this.$message.error('Up to five articles can be selected!');
					return
				}
				this.artTicleList[e].chooState = 1
				this.artChoseList.push(this.artTicleList[e])
				// this.pushArticle()
			},

			// 删除文章
			deleteArticle(row, e) {
				this.artTicleList[e].chooState = 0
				for (let i = 0; i < this.artChoseList.length; i++) {
					if (this.artChoseList[i].article_id == row.article_id) {
						this.artChoseList.splice(i, 1);
						// this.pushArticle()
					}
				};
			},

			// 删除已经选择文章
			deleteArticleCho(value, e) {
				this.artChoseList.splice(e, 1);
				for (let i = 0; i < this.artTicleList.length; i++) {
					if (this.artTicleList[i].article_id == value.article_id) {
						this.artTicleList[i].chooState = 0
						this.$forceUpdate()
						// this.pushArticle()
					}
				};
			},

			// 文章分页导航
			ArthandlePageChange(val) {
				this.$set(this.articleForm, 'pageIndex', val);
				// this.getArticle();
			},

			// 保存邮件
			saveData() {
				// const reg = /<\/?.+?\/?>/g
				// this.EmailData.substance = this.EmailData.substance.replace(/<p>/gim,"")
				// console.log(this.EmailData.substance)

				if (this.userListNum == 0) {
					this.$message.error('Please select target personnel!');
					return
				}

				this.$refs.emailRef.validate((valid) => {
					if (valid) {
						let artHtml = ''

						if (this.EmailData.range == 1) {
							this.EmailData.template = this.EmailData.substance.replace(/<p><br><\/p>/gim, '<br/>')
							this.EmailData.template = this.EmailData.template.replace(/<p>/gim, "")
							this.EmailData.template = this.EmailData.template.replace(/<\/p>/gim, '<br/>')
						} else if (this.EmailData.range == 2) {
							if (this.artChoseList.length == 0) {
								this.$message.error('Please select articles!');
								return
							} else {
								for (let i = 0; i < this.artChoseList.length; i++) {
									artHtml +=
										'<a href="https://www.tmrjournals.com/article.html?J_num=' + this
										.artChoseList[
											i]
										.journal_id +
										'&a_id=' + this.artChoseList[i].article_id +
										'" target="_blank" style="font-size: 14px;line-height: 22px;color: #4e8374;font-weight: bold;"><font style="display: inline-block;width: 7px;height: 7px;border-radius: 10px;margin: 0 3px 0 0;background-color: #4e8374;"></font>' +
										this.artChoseList[i].title +
										'</a><p style="color: #444;font-family: Calibri;font-size: 16px;line-height: 20px;">' +
										this
										.artChoseList[i]
										.authortitle + '</p><p style="color: #333;">' + this.artChoseList[i]
										.journal_title +
										'<text style="display: inline-block;margin: 0 20px 0 20px;">|</text><a href="https://www.tmrjournals.cn/public/articlePDF/' +
										this.artChoseList[i].file_pdf +
										'" target="_blank" style="color: #7a2702;"><img src="https://www.tmrjournals.cn/img/link_3.jpg" style="width: 14px;vertical-align: text-bottom;margin: 0 5px 0 0;">PDF</a></p><p style="margin: 5px 0 15px 2px;padding:0 0 18px 0;line-height: 20px;font-size: 12px;color: #777;border-bottom: 1px dashed #4e837480;"><b style="margin: 0 5px 0 0;letter-spacing: -0.5px;color: #4e8374;font-weight: normal;">Cite this article :</b><font>' +
										this.artChoseList[i].cite + '</font></p>'
								};
								artHtml =
									'<div class="artCLise">' + artHtml +
									'</div><style>.artCLise p{margin: 3px 0 0 2px;font-size: 13px;}.artCLise a{text-decoration: none;}.artCLise a:hover{text-decoration: underline;}</style>'

								this.EmailData.substance_top = this.EmailData.substance_top.replace(
									/<p><br><\/p>/gim, '<br/>')
								this.EmailData.substance_top = this.EmailData.substance_top.replace(/<p>/gim, "")
								this.EmailData.substance_top = this.EmailData.substance_top.replace(/<\/p>/gim,
									'<br/>')
								this.EmailData.substance_bom = this.EmailData.substance_bom.replace(
									/<p><br><\/p>/gim, '<br/>')
								this.EmailData.substance_bom = this.EmailData.substance_bom.replace(/<p>/gim, "")
								this.EmailData.substance_bom = this.EmailData.substance_bom.replace(/<\/p>/gim,
									'<br/>')

								this.EmailData.template = this.EmailData.substance_top + artHtml + this.EmailData
									.substance_bom
							}
						}

						// if (this.EmailData.template.indexOf("{{articles}}\r\n\r\n") != -1) {
						// 	this.EmailData.template = this.EmailData.template.replace('{{articles}}\r\n\r\n',
						// 		artHtml)
						// }



						this.$api
							.post('api/Promotion/addPromotion', this.EmailData)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Successfully added promotion task!');
									this.$router.push({
										path: 'disseMRecord',
									});
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('Please complete the information!');
					}
				});


			},


			// 发送测试邮件
			sendTest() {
				this.$refs.testRef.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/Promotion/pushTestEmail', this.EmailData)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Successfully send test email!');
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {

						this.$message.error('Please complete the information!');
					}
				});
			},

			// 富文本编辑器上传
			uploadSuccess(res) {
				let quill = this.$refs[this.myTextMark].quill;
				// 获取光标所在位置
				let length = quill.getSelection().index
				// 插入图片 res.upurl为服务器返回的图片地址
				quill.insertEmbed(length, 'image', this.mediaUrl + 'promotion/' + res.upurl)
				// 调整光标到最后
				quill.setSelection(length + 1)
			}

		},
		watch: {
			majorList(newVal) {
				this.keyValue++ //只要监听到数据源发生变化 ，改变keyValue的值，达到重新渲染的效果
			}
		},
	};
</script>


<style scoped>
	.d_rol {
		margin: 0 0 20px 0;
		/* border: 2px solid rgba(0, 102, 153, 0.15); */
		padding: 20px 20px 20px 20px;
		border-radius: 10px;
		background-color: rgb(255, 255, 255);

	}

	.d_rol>h3 {
		margin: 0 0 25px 0;
		letter-spacing: -0.5px;
		font-size: 16px;
		border-bottom: 2px solid rgba(0, 102, 153, 0.15);
		padding: 0px 0px 15px 6px;
	}


	.Email_Data {
		margin: 30px 0 0 0;
	}

	.Email_Data .el-textarea__inner {
		line-height: 26px;
		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 img {
		width: 100%;
		image-rendering: -webkit-optimize-contrast;
	}

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

	.senderKuan {
		margin: 5px 0 0 0;
		padding: 15px;
		border: 1px solid #00669933;
		background: #fff;
	}

	.senderKuan .artChosn>a {
		color: #333;
	}

	.senderKuan .artChosn>a:hover {
		text-decoration: underline;
	}

	.senderKuan .artChosn>b {
		color: #bf1010;
		margin: 0 0 0 10px;
		font-weight: bold;
	}

	.senderKuan .artChosn>b:hover {
		text-decoration: underline;
		cursor: pointer;
	}



	.senderTile {
		font-size: 14px;
		color: #606266;
		display: inline-block;
		text-align: right;
		width: 140px;
		margin: 0 10px 0 0;
	}

	/deep/.quilStyle {
		background-color: #fff;
	}

	.tolPeoUse {
		border-top: 1px solid #00669933;
		margin: 20px 0 0 0;
		padding: 0 20px 0 30px;
	}

	.tolPeoUse b {
		font-size: 20px;
		color: #006699;
		display: inline-block;
		margin: 5px 3px 0 5px;
	}

	.artTile {
		font-size: 14px;
		color: #606266;
		margin: 0 10px 0 0;
		display: inline-block;
		width: 75px;
		text-align: right;
	}

	.artChoList {
		margin: 20px 20px 0 20px;
	}

	.artChoList p {
		margin-bottom: 15px;
		line-height: 22px;
		word-wrap: break-word;
		word-break: normal;
		border: 2px dashed #eee;
		padding: 10px 100px 10px 10px;
		position: relative;
	}

	.artChoList p>a {
		color: #333;
	}

	.artChoList p>a:hover {
		text-decoration: underline;
	}

	.artChoList p>font {
		margin-right: 5px;
	}


	.artChoList .kuangGeo {
		display: block;
		position: absolute;
		width: 15px;
		height: 15px;
		border: 2px solid #eee;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}

	.artChoList .el-icon-check {
		display: block;
		position: absolute;
		top: 5px;
		right: 5px;
		color: #069;
		font-weight: 700;
		font-size: 25px;
		cursor: pointer;
	}

	.emaStyle {
		border: 2px dashed #ccc;
		background-color: #f2f2f2;
		border-radius: 2px;
		padding: 10px;
	}


	.emaStyle .artCLise {
		line-height: 22px;
		margin: 15px 20px;
		padding-bottom: 18px;
		border-bottom: 1px dashed #4e837480;
	}

	.emaStyle .artCLise:nth-last-child(1) {
		margin-bottom: 0;
	}


	.emaStyle .artCLise>a {
		color: #4e8374;
		font-weight: bold;
	}


	.emaStyle .artCLise>a:hover {
		text-decoration: underline;
	}

	.emaStyle .artCLise>a>font {
		display: inline-block;
		width: 7px;
		height: 7px;
		border-radius: 10px;
		margin: 0 3px 0 0;
		background-color: #4e8374;


	}

	.emaStyle .artCLise>p {
		margin: 3px 0 0 2px;
		padding-top: 0;
		line-height: 22px;
		color: #777;
	}

	.emaStyle .artCLise>p>b {
		margin: 0 5px 0 0;
		letter-spacing: -0.5px;
		color: #4e8374;
		font-weight: normal;
	}

	.emaStyle .artCLise>p>a {
		color: #7a2702;
	}

	.emaStyle .artCLise>p>a:hover {
		text-decoration: underline;
	}

	.emaStyle .artCLise>p>a>img {
		width: 14px;
		vertical-align: text-bottom;
		margin: 0 5px 0 0;
	}

	.avatar-uploader-foot {
		height: 0;
	}

	.avatar-uploader-foot .el-upload--text {
		height: 0 !important;
		border: 0;
	}
</style>


<style>
	.majorSelct {}

	.majorSelct .el-radio {
		width: 100%;
		height: 100%;
		z-index: 10;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.majorSelct .el-radio__input {
		visibility: hidden;
	}

	.majorSelct .el-cascader-node__postfix {
		top: 10px;
	}
</style>
