<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 期刊管理</el-breadcrumb-item>
				<el-breadcrumb-item>邮件发送</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-loading="loading" element-loading-text="Loading..." element-loading-spinner="el-icon-loading"
		 element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="title_header">
				<span>{{title_header}}</span>
			</div>
			<el-row :gutter="24">
				<el-col :span="8">
					<div class="handle-box">
						<el-select v-model="query.pet_id" filterable placeholder="请选择分类" @change="type_plt">
							<el-option v-for="item in citation" :key="item.pet_id" :label="item.title" :value="item.pet_id"></el-option>
						</el-select>
						<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Type" style="margin-left: 20px;">添加分类</el-button>
						<br><br>
						<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">添加邮箱</el-button>
						<el-button type="primary" icon="el-icon-upload2" class="handle-del" @click="add_TXtion">上传TXT</el-button>
					</div>
					<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column prop="email" label="邮箱"></el-table-column>
						<el-table-column label="操作" width="80" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
						 :total="link_Total" @current-change="handlePageChange"></el-pagination>
					</div>
				</el-col>
				<el-col :span="16" style="padding-left: 50px;">
					<el-form ref="add_Mould" :model="addMould" :rules="rules" label-width="60px">
						<el-form-item label="模板" prop="pem_id">
							<el-select v-model="addMould.pem_id" filterable placeholder="请选择模板" @change="tem_plt">
								<el-option label="无" :value="0"></el-option>
								<el-option v-for="item in formwork" :key="item.pem_id" :label="item.title" :value="item.pem_id"></el-option>
							</el-select>
							<el-button type="primary" icon="el-icon-notebook-2" class="handle-del" @click="add_Shutter" style="margin-left: 20px;">模板管理</el-button>
						</el-form-item>
						<el-form-item label="模板" prop="content">
							<quill-editor ref="myTextEditor" v-model="addMould.content" :options="editorOption"></quill-editor>
						</el-form-item>
						<el-form-item label="">
							<p>还可以发送 <b>{{this.email_num}}</b> 封邮件。发送邮箱：tmrgroup@yeah.net </p>
						</el-form-item>
					</el-form>
					<div style="text-align: right;margin-top: 20px;">
						<el-button type="primary" @click="saveAdd(addMould)" :disabled="btn_dis">确 定</el-button>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加分类" :visible.sync="addType" width="30%">
			<el-form ref="add_Type" :model="typeForm" :rules="rules" label-width="85px">
				<el-form-item label="分类" prop="title_content">
					<el-input v-model="typeForm.title_content"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addType = false">取 消</el-button>
				<el-button type="primary" @click="saveType(typeForm)">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加邮箱" :visible.sync="addVisible" width="30%">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="85px">
				<el-form-item label="分类" prop="pet_id">
					<el-select v-model="addForm.pet_id" filterable>
						<el-option v-for="item in citation" :key="item.pet_id" :label="item.title" :value="item.pet_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addForm.email"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEal(addForm)">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加邮箱" :visible.sync="addwghtis" width="30%" :close-on-click-modal="false">
			请选择分类：
			<el-select v-model="pet_id_l" filterable>
				<el-option v-for="item in citation" :key="item.pet_id" :label="item.title" :value="item.pet_id"></el-option>
			</el-select>
			<br><br>
			<el-upload class="upload-demo" :action="IMGup_Url+'master/Propa/up_file'" :on-success="handleFileSuccess" name="txtfile"
			 type="txtfile" :on-error="handleFileError" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
			 :on-change="handleChange" accept=".txt" :on-exceed="handleExceed" :file-list="file_txt" ref="upload">
				<el-button type="primary" style="font-weight: bolder;"><b class="el-icon-lx-top" style="font-weight: bolder;"></b>TXT</el-button>
			</el-upload>
			<br>
			<p v-for="item in email_data" style="line-height: 30px;">{{item}}</p>

			<span slot="footer" class="dialog-footer">
				<el-button @click="addwghtis = false">取 消</el-button>
				<el-button type="primary" @click="saveChuan()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="模板管理" :visible.sync="magefelow" width="30%">
			<div class="title_header">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Muban">添加模板</el-button>
			</div>
			<el-table :data="tableMuban" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="title" label="名称"></el-table-column>
				<el-table-column label="操作" width="130" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-delete" @click="MubanEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="MubanDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="magefelow = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="添加模板" :visible.sync="addfelow" width="50%">
			<el-form ref="add_Follow" :model="addFollow" :rules="rules" label-width="60px">
				<el-form-item label="标题" prop="title">
					<el-input v-model="addFollow.title"></el-input>
				</el-form-item>
				<el-form-item label="模板" prop="content">
					<quill-editor ref="myTextEditor" v-model="addFollow.content" :options="editorOption"></quill-editor>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addfelow = false">取 消</el-button>
				<el-button type="primary" @click="saveFollow()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="编辑模板" :visible.sync="editfelow" width="50%">
			<el-form ref="edit_Follow" :model="editFollow" :rules="rules" label-width="60px">
				<el-form-item label="标题" prop="title">
					<el-input v-model="editFollow.title"></el-input>
				</el-form-item>
				<el-form-item label="模板" prop="content">
					<quill-editor ref="myTextEditor" v-model="editFollow.content" :options="editorOption"></quill-editor>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editfelow = false">取 消</el-button>
				<el-button type="primary" @click="saitFollow()">确 定</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 {
				title_header: "",
				query: {
					journal_id: this.$route.query.top_id,
					pet_id: '',
					pageIndex: 1,
					pageSize: 10
				},
				addMould: {
					journal_id: this.$route.query.top_id,
					pem_id: '',
					content: ''
				},
				addForm: {
					journal_id: this.$route.query.top_id,
					citine: 0,
					pet_id: '',
					email: ''
				},
				addFollow: {
					journal_id: this.$route.query.top_id,
					title: '',
					content: ''
				},
				typeForm: {
					journal_id: this.$route.query.top_id,
				},
				editFollow: {},
				tableData: [],
				tableMuban: [],
				pet_id_l: '',
				citation: [],
				formwork: [],
				email_data: [],
				btn_dis: false,
				addType: false,
				addVisible: false,
				addwghtis: false,
				addfelow: false,
				editfelow: false,
				magefelow: false,
				loading: false,
				email_num: 0,
				link_Total: 0,
				file_txt: [],
				file_upurl: '',
				IMGdo_Url: this.IMGdoURL,
				IMGup_Url: this.IMGupURL,
				content: '',
				rules: {
					title_content: [{
						required: true,
						message: '请输入分类',
						trigger: 'blur'
					}],
					pet_id: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入模板',
						trigger: 'blur'
					}],
				},
				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']
							]
						}
					}
				},
			};
		},
		created() {
			this.$api
				.post('master/Propa/getPropaType', this.query)
				.then(res => {
					if (res.code == 0) {
						this.citation = res.data.types;
						this.query.pet_id = res.data.types[0].pet_id;
						this.addMould.pet_id = res.data.types[0].pet_id;
						this.pet_id_l = res.data.types[0].pet_id;

						this.getData();

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


		},
		methods: {
			// 获取邮箱列表数据
			getData() {
				this.$api
					.post('master/Propa/getJournalDetail', this.query)
					.then(res => {
						if (res.code == 0) {
							this.title_header = res.data.journal.title;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
				this.$api
					.post('master/Propa/getPropaType', this.query)
					.then(res => {
						if (res.code == 0) {
							this.citation = res.data.types;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('master/Propa/getPropaEmails', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.emails;
							this.link_Total = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('master/Propa/getPropaEmailModel', this.query)
					.then(res => {
						if (res.code == 0) {
							this.formwork = res.data.models;
							this.tableMuban = res.data.models;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.$api
					.post('master/Propa/getPropaEmailLog', this.query)
					.then(res => {
						if (res.code == 0) {
							this.email_num = res.data.count;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
					
			},
			// 添加弹出层操作
			add_Type(index, row) {
				this.addType = true;
			},
			add_Selection(index, row) {
				this.addVisible = true;
				this.addForm.pet_id = this.query.pet_id;
			},
			add_TXtion(index, row) {
				this.addwghtis = true;
			},
			add_Shutter(index, row) {
				this.magefelow = true;
			},
			add_Muban() {
				this.addfelow = true;
			},
			MubanEdit(index, row) {
				this.editFollow = Object.assign({}, row);
				this.editfelow = true;
			},

			// 保存分类添加
			saveType(typeForm) {
				this.$refs.add_Type.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Propa/addPropaEmailType', this.typeForm)
							.then(res => {
								if (res.code == 0) {
									this.addType = false;
									this.$refs.add_Type.resetFields();
									this.$message.success(`添加分类成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 保存单个邮箱添加
			saveEal(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Propa/addPropaEmail', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success(`添加邮箱成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 保存TXT邮箱添加
			saveChuan() {
				this.$api
					.post('master/Propa/addPropaEmailByTxt', {
						'journal_id': this.$route.query.top_id,
						'pet_id': this.pet_id_l,
						'fileDir': this.file_upurl
					})
					.then(res => {
						if (res.code == 0) {
							this.$message.success('TXT上传成功');
							this.email_data = [];
							this.file_txt = [];
							this.addwghtis = false;
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 删除邮箱操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除邮箱吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Propa/delPropaEmail', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除邮箱成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},

			// 保存发送邮件
			saveAdd() {
				this.$refs.add_Mould.validate((valid) => {
					this.loading = true;
					if (valid) {
						this.$api
							.post('master/Propa/sendEmail', this.addMould)
							.then(res => {
								if (res.code == 0) {
									this.$refs.add_Mould.resetFields();
									this.loading = false;
									this.$message.success(`发送邮件成功`);
									this.getData();
									this.btn_dis = true;
								} else {
									this.loading = false;
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.loading = false;
								this.$message.error(err);
							});
					} else {
						this.loading = false;
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 保存模板
			saveFollow() {
				this.$refs.add_Follow.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Propa/addPropaEmailModel', this.addFollow)
							.then(res => {
								if (res.code == 0) {
									this.addfelow = false;
									this.$refs.add_Follow.resetFields();
									this.$message.success(`添加模板成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 编辑模板操作
			saitFollow(index, row) {
				this.$refs.edit_Follow.validate((valid) => {
					if (valid) {
						this.$api
							.post('master/Propa/editPropaEmailModel', this.editFollow)
							.then(res => {
								if (res.code == 0) {
									this.editfelow = false;
									this.$refs.edit_Follow.resetFields();
									this.$message.success(`编辑模板成功`);
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			// 删除模板操作
			MubanDelete(index, row) {
				// 二次确认删除
				this.$confirm('确定要删除模板吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('master/Propa/delPropaEmailModel', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('删除模板成功');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},
			// 下拉改变
			type_plt(event) {
				this.addMould.pet_id = event;
				this.getData();
				this.btn_dis = false;
			},
			tem_plt(event) {
				this.$api
					.post('master/Propa/getOneEmailModel', {
						'pem_id': event
					})
					.then(res => {
						if (res.code == 0) {
							this.addMould.content = res.data.model.content
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},
			// 上传文件
			handleFileSuccess(res, file) {
				this.file_upurl = res.upurl
				if (res.code == 0) {
					this.$api
						.post('master/Propa/readTxt', {
							'txtdir': res.upurl
						})
						.then(res => {
							if (res.code == 0) {
								this.email_data = res.data.emails
							} else {
								this.$message.error(res.msg);
							}
						})
						.catch(err => {
							this.$message.error(err);
						});
				} else {
					this.$message.error(res.msg);
				}
			},
			handleChange(file, fileList) {
				this.file_txt = fileList.slice(-1);
			},
			handleFileError(res, file) {

			},
			handleRemove(file, fileList) {

			},
			handlePreview(file) {
				window.open(file.url);
			},
			handleExceed(files, fileList) {
				this.$message.warning("当前限制选择 1 个文件，请先删除当前文件！");
			},
			beforeRemove(file, fileList) {

			},
		},
		components: {
			quillEditor
		}
	};
</script>

<style>
	.title_header {
		margin-bottom: 20px;
	}

	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.handle-pwd {
		cursor: pointer;
	}

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

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 140px;
		height: 140px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 140px;
		height: 140px;
		line-height: 140px;
		text-align: center;
	}

	.avatar {
		width: 140px;
		height: 140px;
		display: block;
	}

	.el-upload--text {
		border: none;
		height: 35px;
		text-align: left;
		width: 100px;
	}

	.el-upload-list {
		margin-top: -10px;
	}
</style>
