<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-message"></i> Mailbox Send
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="mail_shuru" style="position: relative;">
				<span class="mail_tit">Addressee :</span>
				<span class="sel_liby" @click="handleSetLibrary">
					<i class="el-icon-plus"></i>Select from library
				</span>
				<!-- <el-input v-model="queryMail.sendname" class="mail_inp"></el-input> -->
				<multi-items-input v-model="queryMail.sendnamelist" placeholder="" separator="" @select="selectHandle" @delete="deleteHandle"
				 :selection-only="false" class="dxk_inp" @blur="blueHandle"></multi-items-input>
			</div>
			<div class="mail_shuru">
				<span class="mail_tit">Mail Subject :</span>
				<el-input v-model="queryMail.sendtitle" class="mail_inp"></el-input>
			</div>
			<div class="mail_shuru">
				<span class="mail_tit">CC :</span>
				<el-input v-model="queryMail.sendcc" class="mail_inp"></el-input>
				<!-- <multi-items-input v-model="queryMail.sendnamelist" placeholder="" separator="" @select="selectHandle" @delete="deleteHandle"
				 :selection-only="false" class="dxk_inp" @blur="blueHandle"></multi-items-input> -->
			</div>
			<div class="mail_shuru" style="border: 0;">
				<span class="mail_tit">Attachments :</span>
				<el-upload class="upload-demo up_newstyle" :action="this.baseUrl + 'api/Article/up_file/type/attr'" accept=".jpg, .png, .rar, .zip"
				 name="atta" :before-upload="beforeupload_atta" :on-error="uperr_atta" :on-success="upSuccess_atta" :limit="30"
				 :on-exceed="alertlimit" :on-remove="removefile_atta" :file-list="fileL_atta">
					<div class="el-upload__text">
						<em>Upload</em>
					</div>
					<!-- <div class="el-upload__tip" slot="tip">Only compressed files can be uploaded(.rar,.zip)</div> -->
				</el-upload>

			</div>
			<p class="sel_moud" @click="handleSetMoudle">
				<i class="el-icon-brush"></i>Template selection
			</p>
			<div style="margin: 20px 0 0 0;">
				<quill-editor ref="myTextEditor" v-model="queryMail.content" :options="editorOption"></quill-editor>
				<el-upload class="avatar-uploader-mail" :action="baseUrl+'api/Suggest/upImg'" name="img" :show-file-list="false"
				 :on-success="uploadSuccess">
				</el-upload>
				<p style="margin-top: 10px;font-size: 14px;">
					Sender :<span style="color: #006699;margin: 0 0 0 15px;">{{userMes.realname}} &lt {{userMes.email}} &gt</span>
				</p>
			</div>
			<div style="margin: 20px 0 0 0;">

				<el-button type="primary" icon="el-icon-s-promotion" @click="handleSend" style="">Send</el-button>
			</div>
		</div>

		<!-- 选择通讯录 -->
		<el-dialog title="Select User" :visible.sync="Librarybox" width="900px">
			<el-button type="primary" style="margin: 0 0 15px 0;" icon="el-icon-plus" @click="mailLiyAll()" v-if="LibrarySelection!=''">Batch
				Selection</el-button>
			<el-table :data="mail_List" border ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange" empty-text="New messages (0)">
				<el-table-column type="selection" width="40" align="center" :selectable='checkboxSelect'></el-table-column>
				<el-table-column label="Email">
					<template slot-scope="scope">
						<b class="el-icon-check" v-if="scope.row.select_mark==1" style="color:#f74c4c;margin-right: 5px;font-weight: bold;"></b>
						{{scope.row.email}}
					</template>
				</el-table-column>
				<el-table-column prop="account" label="Account"></el-table-column>
				<el-table-column label=" " width="110" align="center">
					<template slot-scope="scope">
						<el-button plain type="primary" icon="el-icon-plus" @click="mailLibAdd(scope.row)">Select</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="queryLibry.pageIndex" :page-size="queryLibry.pageSize"
				 :total="link_TotalLibry" @current-change="handlePageChangeLibry"></el-pagination>
			</div>
		</el-dialog>

		<!-- 选择模板 -->
		<el-dialog title="Select template" :visible.sync="Templatebox" width="620px">
			<el-form ref="Tempform" :model="TempForm" label-width="225px">
				<el-form-item label="Choose Template :">
					<el-select v-model="TempForm.board" placeholder=" " @change="select_tem($event)" style="width: 220px;">
						<el-option :key="0" label="None" :value="0"></el-option>
						<el-option v-for="item in fol_low" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Preview Formatted Document :">
					<img src="../../assets/img/img.jpg" alt="" style="width: 250px;">
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="Templatebox = false">Cancel</el-button>
				<el-button type="primary" @click="saveTemplate">Save</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 引入富文本quill-editor相关组件依赖
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor'
	// import {
	// 	container,
	// 	QuillWatch
	// } from 'quill-image-extend-module'
	// import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
	// Quill.register('modules/imageResize', ImageResize)
	import 'multi-items-input'
	import 'multi-items-input/dist/multi-items-input.css'
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				that: this,
				userMes: {},
				queryMail: {
					sendname: [],
					sendnamelist: [{
						id: null,
						name: "atr@tmrjournals.com"
					}, {
						id: null,
						name: "tmrtheory@tmrjournals.com"
					}],
					sendtitle: '',
					sendcc: '',
					content: ''
				},
				mail_List: [],
				fileL_atta: [],
				fol_low: [{
					value: '1',
					label: 'Template 1'
				}],
				TempForm: {
					board: 0
				},
				queryLibry: {
					pageIndex: 1,
					pageSize: 15,
					username: ''
				},
				LibrForm: {},
				LibrarySelection: [],
				Templatebox: false,
				Librarybox: false,
				link_TotalLibry: 0,
				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', 'image']
							],
							// 工具栏
							handlers: {
								image: function(value) {
									if (value) {
										// upload点击上传事件
										document.querySelector('.avatar-uploader input').click()
									} else {
										this.quill.format('image', false)
									}
								}
							}
						},
						// 调整图片大小
						// imageResize: {
						// 	displayStyles: {
						// 		backgroundColor: 'black',
						// 		border: 'none',
						// 		color: 'white'
						// 	},
						// 	modules: ['Resize', 'DisplaySize', 'Toolbar']
						// }
					}
				},
			};
		},
		created() {
			this.getDate();
			this.getLibary();
		},
		// components: {
		// 	quillEditor
		// },
		computed: {

		},
		methods: {
			// 获取初始用户数据
			getDate() {
				this.$api
					.post('api/User/getUserDetail', {
						'user_id': localStorage.getItem('U_id')
					})
					.then(res => {
						if (res.code == 0) {
							this.userMes = res.data.user
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});


			},
			// 获取通讯录数据
			getLibary() {
				this.$api
					.post('api/User/getAllUser', this.queryLibry)
					.then(res => {
						if (res.code == 0) {
							this.mail_List = res.data.users;
							this.link_TotalLibry = res.data.count || 0;
							for (let i = 0; i < this.mail_List.length; i++) {
								this.mail_List[i].select_mark = 0
								for (let j = 0; j < this.queryMail.sendnamelist.length; j++) {
									if (this.queryMail.sendnamelist[j].name == this.mail_List[i].email) {
										this.mail_List[i].select_mark = 1 // 禁用
									}
								}
							}
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

			// 发送邮件
			handleSend() {
				console.log(this.queryMail)
			},

			// 选择通讯录-弹出框
			handleSetLibrary() {
				this.Librarybox = true
				console.log(this.LibrarySelection)
			},
			handleSelectionChange(val) {
				this.LibrarySelection = val;
			},
			// 通讯录禁用
			checkboxSelect(row, rowIndex) {
				let mar_dis = 0
				for (let i = 0; i < this.queryMail.sendnamelist.length; i++) {
					if (this.queryMail.sendnamelist[i].name == row.email) {
						mar_dis += 1 // 禁用
					} else {
						mar_dis += 0 // 不禁用
					}
				}
				if (mar_dis == 1) {
					return false
				} else {
					return true
				}
			},
			// 保存通讯录
			mailLibAdd(e) {
				this.queryMail.sendname.push(e.email)
				this.queryMail.sendnamelist.push({
					id: null,
					name: e.email
				})
				this.getLibary();
			},
			// 批量保存通讯录
			mailLiyAll() {
				console.log(this.LibrarySelection)
				for (let i = 0; i < this.LibrarySelection.length; i++) {
					this.queryMail.sendname.push(this.LibrarySelection[i].email)
					this.queryMail.sendnamelist.push({
						id: null,
						name: this.LibrarySelection[i].email
					})
				}
				this.getLibary();
			},

			// 模板选择-弹出框
			handleSetMoudle() {
				this.Templatebox = true
			},
			// 保存模板
			saveTemplate() {

			},

			// 下拉换模板预览
			select_tem(e) {

			},



			// 回车方框输入框
			blueHandle() {
				console.log('456789')
			},
			// ip控制 - 回车确定
			selectHandle(arr, obj) {
				this.queryMail.sendname = []
				for (let i = 0; i < arr.length; i++) {
					this.queryMail.sendname.push(arr[i].name)
				}
			},
			// ip控制 - backspace确定
			deleteHandle(obj, arr) {
				this.queryMail.sendname = []
				for (let i = 0; i < arr.length; i++) {
					this.queryMail.sendname.push(arr[i].name)
				}
			},

			// 分页导航-通讯录
			handlePageChangeLibry(val) {
				this.$set(this.queryLibry, 'pageIndex', val);
				this.getLibary();
			},

			// 富文本编辑器
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},

			// 上传成功
			uploadSuccess(res) {
				let quill = this.$refs.myTextEditor.quill;

				// 获取光标所在位置
				let length = quill.getSelection().index
				// 插入图片 res.upurl为服务器返回的图片地址
				quill.insertEmbed(length, 'image', this.baseUrl + res.data.icon)
				// 调整光标到最后
				quill.setSelection(length + 1)
			},



			// 上传文件
			upSuccess_atta(res, file) {
				if (res.code == 0) {
					this.queryMail.attr = [];
					for (var ii in fileList) {
						var url = fileList[ii].response.upurl;
						this.form.attr.push('picturesAndTables/' + url);
					}
				} else {
					this.$message.error('service error：' + res.msg);
				}
			},
			beforeupload_atta(file) {

			},
			removefile_atta(file, fileList) {
				this.queryMail.picturesAndTables = [];
				for (var ii in fileList) {
					var url = fileList[ii].response.upurl;
					this.queryMail.picturesAndTables.push('picturesAndTables/' + url);
				}
			},
			uperr_atta(err) {
				this.$message.error('Upload error');
			},
			alertlimit() {
				this.$message.error('The maximum number of uploaded files has been exceeded');
			},
		}
	};
</script>

<style>
	.mail_shuru {
		font-size: 14px;
		padding: 0 0 5px 0;
		margin: 0 0 10px 0;
		border-bottom: 1px solid #ccc;
	}

	.mail_tit {
		width: 90px;
		display: inline-block;
	}

	.mail_inp {
		display: inline-block;
		width: 550px;
		margin: 0 15px 0 0;
		border: 0;
	}

	.mail_inp .el-input__inner {
		border: 1px solid #fff !important;
	}

	.up_newstyle {
		margin-left: 15px;
		display: inline-block;
		vertical-align: middle;
	}

	.up_newstyle .el-upload--text {
		background-color: #006699;
		border: 1px solid #006699;
		padding: 5px 15px;
		/* margin-left: 10px; */
	}

	.up_newstyle .el-upload__text em {
		color: #fff !important;
		font-size: 12px;
	}


	.jw-container {
		margin-top: 0;
		background-color: #fff !important;
		display: flex;
		flex-wrap: wrap;
		width: 75%;
		display: inline-block;
		vertical-align: middle;
	}

	.jw-container .jw__container {
		margin-top: 0;
	}

	.jw-container .jw__container input {
		font-size: 16px;
		color: #606266;
	}

	.jw-container .pre-input {
		width: 100%;
	}


	.jw-container .point-container {
		margin: 2px 0 1px;
	}

	.jw-container .point-container .label {
		height: 24px;
		line-height: 24px;
		background: #eef9ff;
		padding: 0 7px;
	}


	.sel_liby {
		position: absolute;
		top: 10px;
		right: 0;
		color: #006699;
		font-weight: bold;
		letter-spacing: -0.5px;
	}

	.sel_moud {
		font-size: 14px;
		margin: -15px 0 0 0;
		text-align: right;
		color: #006699;
		font-weight: bold;
		letter-spacing: -0.5px;
	}

	.sel_moud:hover,
	.sel_liby:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.sel_moud i,
	.sel_liby i {
		margin: 0 10px 0 0;
	}

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

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