<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-message"></i> Promotion email management
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del" @click="add_Selection">Add template
				</el-button>
			</div>
			<el-table :data="tableData" row-key="eid" border class="table" ref="multipleTable" default-expand-all
				header-cell-class-name="table-header" :tree-props="{children: 'children', hasChildren: true}"
				empty-text="New template (0)">
				<el-table-column label="Template Range" width="220">
					<template slot-scope="scope">
						<span v-if="scope.row.epid==0">
							{{scope.row.etitle}}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="Template Name" prop="econtent">
					<template slot-scope="scope">
						<p v-if="scope.row.epid!=0">
							{{scope.row.econtent}}
							<br>
							{{scope.row.etitle}}
						</p>
					</template>
				</el-table-column>
				<el-table-column label="Number of clicks" width="90" align="center">
					<template slot-scope="scope" v-if="scope.row.epid!=0">
						{{scope.row.num}}
					</template>
				</el-table-column>
				<el-table-column label="" width="200" align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.epid!=0">
							<el-button type="primary" plain size="mini" icon="el-icon-edit"
								@click="handleEdit(scope.row)">
								Edit
							</el-button>
							<el-button type="danger" plain size="mini" icon="el-icon-delete"
								@click="handleDelete(scope.row)">
								Delete
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 添加弹出框 -->
		<el-dialog title="Add template" :visible.sync="addVisible" width="850px">
			<el-form ref="add_Form" :model="addForm" :rules="rules" label-width="150px">
				<el-form-item label="Template name :" prop="etitle">
					<el-input v-model="addForm.etitle"></el-input>
				</el-form-item>
				<el-form-item label="Mail Range :" prop="range">
					<el-select v-model="addForm.range" placeholder="Please select a range" @change="changeRange()"
						style="width: 240px;">
						<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="Content :" prop="econtent">
					<quill-editor ref="myTextEditor" v-model="addForm.econtent" :options="editorOption"
						class="quilStyle">
					</quill-editor>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false;">Cancel</el-button>
				<el-button type="primary" @click="saveAdd(addForm)">OK</el-button>
			</span>
		</el-dialog>
		<!-- 编辑弹出框 -->
		<el-dialog title="Edit template" :visible.sync="editVisible" width="850px">
			<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="150px">
				<el-form-item label="Template name :" prop="etitle">
					<el-input v-model="editForm.etitle"></el-input>
				</el-form-item>
				<el-form-item label="Mail Range :" prop="range">
					<el-select v-model="editForm.range" placeholder="Please select a range" @change="changeRange()"
						style="width: 240px;">
						<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="Content :" prop="econtent">
					<quill-editor ref="myTextEditor" v-model="editForm.econtent" :options="editorOption"
						class="quilStyle">
					</quill-editor>
				</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>
	export default {
		data() {
			return {
				addForm: {
					etitle: '',
					econtent: ''
				},
				editForm: {
					etitle: '',
					econtent: ''
				},
				tableData: [],
				addVisible: false,
				editVisible: false,
				rangeList: [{
					title: 'Appointment',
					id: 1
				}, {
					title: 'Article Recommendation',
					id: 2
				}, {
					title: 'Promotion',
					id: 3
				}],
				rules: {
					etitle: [{
						required: true,
						message: 'Please enter a template title',
						trigger: 'blur'
					}],
					range: [{
						required: true,
						message: 'Please select a range',
						trigger: 'blur'
					}],
					econtent: [{
						required: true,
						message: 'Please enter template content',
						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: function() {
			this.getData();
		},
		computed: {

		},
		methods: {
			//获取数据
			getData() {
				this.$api
					.post('api/Email/getAllEmailTemplate')
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.templates;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 添加操作
			add_Selection(index, row) {
				this.addVisible = true;
			},
			// 保存添加
			saveAdd(addForm) {
				this.$refs.add_Form.validate((valid) => {
					if (valid) {
						this.$api
							.post('api/Email/addEmailTemplate', this.addForm)
							.then(res => {
								if (res.code == 0) {
									this.addVisible = false;
									this.$refs.add_Form.resetFields();
									this.$message.success('Template added successfully!');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						return false;
					}
				});
			},
			// 编辑操作
			handleEdit(row) {
				this.editForm = row
				this.editVisible = true
			},
			// 保存编辑
			saveEdit(editForm) {

			},
			// 删除操作
			handleDelete(row) {
				// 二次确认删除
				this.$confirm('Are you sure to delete this template "' + row.etitle + '"?', 'Tips', {
						distinguishCancelAndClose: true,
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel'
					})
					.then(() => {
						this.$api
							.post('api/Email/delEmailTemplate', row)
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Delete succeeded!');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								this.$message.error(err);
							});
					})
					.catch(() => {});
			},


			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.addForm.econtent = html;
			},
		}
	};
</script>

<style>
	.handle-box {
		margin: 20px 0;
	}

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

	.red {
		color: #ff0000;
	}
</style>
