<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-message"></i> Mailbox template
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.username" placeholder="Please enter" style="width: 200px;">
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="getDate" style="margin-left: 10px;">Search
				</el-button>
				<el-button type="primary" icon="el-icon-plus" @click="handleAdd()" style="float: right;">
					Add mail template
				</el-button>
			</div>
			
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				empty-text="New messages (0)">
				<el-table-column prop="realname" label="Title"></el-table-column>
				<el-table-column label=" " width="198" align="center">
					<template slot-scope="scope">
						<el-button plain type="success" icon="el-icon-view" @click="handleView(scope.row)">Preview
						</el-button>
						<el-button plain type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">Edit
						</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-dialog title="Add mail template" :visible.sync="addVisible" width="800px" :close-on-click-modal="false">
				<el-form ref="add_Tab" :model="addForm" :rules="rules" label-width="100px">
					<el-form-item label="Title :" prop="title">
						<el-input v-model="addForm.title"></el-input>
					</el-form-item>
					<el-form-item label="Content :" prop="content">
						<quill-editor ref="myTextEditor" v-model="addForm.content" :options="editorOption">
						</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="saveEmail">OK</el-button>
				</span>
			</el-dialog>
			
			<!-- 编辑邮件弹出框 -->
			<el-dialog title="Edit mail template" :visible.sync="editVisible" width="800px" :close-on-click-modal="false">
				<el-form ref="edit_Tab" :model="editForm" :rules="rules" label-width="100px">
					<el-form-item label="Title :" prop="title">
						<el-input v-model="editForm.title"></el-input>
					</el-form-item>
					<el-form-item label="Content :" prop="content">
						<quill-editor ref="myTextEditor" v-model="editForm.content" :options="editorOption">
						</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="editEmail">OK</el-button>
				</span>
			</el-dialog>
			
			<!-- 预览邮件弹出框 -->
			<el-dialog title="Preview mail template" :visible.sync="viewVisible" width="800px" :close-on-click-modal="false">
				{{viewForm}}
				<span slot="footer" class="dialog-footer">
					<el-button @click="viewVisible = false">Cancel</el-button>
				</span>
			</el-dialog>
			
		</div>
	</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 {
		name: 'partyList',
		data() {
			return {
				mediaUrl: this.Common.mediaUrl,
				userrole: localStorage.getItem('U_status'),
				guest_id: localStorage.getItem('U_id'),
				query: {
					role:0,
					username:'',
					pageIndex: 1,
					pageSize: 15,
				},
				tableData: [],
				link_Total: 0,
				addVisible: false,
				editVisible: false,
				viewVisible: false,
				addForm: {},
				editForm:{},
				viewForm:{},
				rules: {
					title: [{
						required: true,
						message: 'Please enter the title',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: 'Please enter the message 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']
							]
						}
					}
				},
			};
		},
		mounted() {

		},
		created() {
			this.getDate()
		},
		methods: {
			// 获取数据
			getDate() {
				this.$api
					.post('api/User/getAllUser', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.users;
							this.link_Total = res.data.count || 0;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 添加邮件弹出
			handleAdd(){
				this.addVisible=true
			},

			// 确定增加
			saveEmail() {
				this.$refs.add_Tab.validate((valid) => {
					if (valid) {

					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},
			
			// 编辑邮件弹出
			handleEdit(e){
				this.editVisible=true
				this.editForm=e
			},
			
			// 预览邮件弹出层
			handleView(e){
				this.viewVisible=true
				this.viewForm=e
			},
			
			// 确定修改
			editEmail() {
				this.$refs.edit_Tab.validate((valid) => {
					if (valid) {
			
					} else {
						this.$message.error('error submit!!');
						return false;
					}
				});
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getDate();
			},
			
			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},
		},
		computed: {

		},
		watch: {

		}
	};
</script>

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

	.el-button--primary.is-plain:hover {
		background-color: #409EFF !important;
		color: #fff !important;
	}

	.zhsoiuStyle {
		color: #006699;
		cursor: pointer;
	}

	.zhsoiuStyle:hover {
		text-decoration: underline;
	}

	.zhsoiuStyle i {
		margin-right: 3px;
		font-weight: bold;
	}
</style>
