<template>
	<el-container>
		<el-header>
			<el-row type="flex" justify="space-between">
				<el-col :span="8">
					<b style="line-height: 40px; font-size: 20px;">发送邮件</b>
					<span style="margin-left: 20px;">
						<el-button
							type="text"
							@click="addAddress()"
							v-show="isShowAddress == 1"
							>添加抄送</el-button
						>
						<el-button
							type="text"
							@click="deleteArress()"
							v-show="isShowAddress == 2"
							>删除抄送</el-button
						>
						<el-button
							type="text"
							@click="addCAddresses()"
							v-show="isShowCAdress == 1"
							>添加密送</el-button
						>
						<el-button
							type="text"
							@click="deltetCAddresses()"
							v-show="isShowCAdress == 2"
							>删除密送</el-button
						>
					</span>
				</el-col>
				<el-col :span="14"> </el-col>
				<el-col :span="2">
					<el-button
						class="back"
						@click="back()"
						size="small"
						type="danger"
						icon="el-icon-back"
						plain
						>返回</el-button
					>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-main>
				<el-form
					ref="data"
					status-icon
					:rules="rules"
					:model="data"
					label-width="80px"
				>
					<el-form-item label="发件人：">
						<el-dropdown trigger="click">
							<span class="el-dropdown-link">
								<input
									type="text"
									class="senderAdds"
									v-model="data.senderAddress"
								/><i class="el-icon-arrow-down"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-for="item in rows"
									:key="item.id"
									@click.native="selectAddress(item.mailAddress)"
									>{{ item.mailAddress }}</el-dropdown-item
								>
							</el-dropdown-menu>
						</el-dropdown>
					</el-form-item>
					<el-form-item label="收件人：" prop="receAddresses">
						<el-select
							v-model="data.receAddresses"
							filterable
							multiple
							remote
							allow-create
							default-first-option
							:remote-method="remoteMethodAddress"
							placeholder="请选择收件人 / 请输入关键字 姓名或邮箱地址"
							:loading="loading"
							class="receiver"
						>
							<el-option
								v-for="item in queryAll"
								:key="item.id"
								:label="item.linkName + '<' + item.mailId + '>'"
								:value="item.mailId"
								class="optionts"
							>
								<span style="float: left; color: #8492a6; font-size: 13px;">{{
									item.linkName
								}}</span>
								<span
									style="
										float: left;
										color: #409eff;
										font-size: 13px;
										margin-left: 50px;
									"
									>{{ item.orgName }}</span
								>
								<span style="float: right; padding-left: 30px;">{{
									item.mailId
								}}</span>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="抄送：" v-show="isShowAddress == 2">
						<el-select
							v-model="Addresses"
							filterable
							multiple
							remote
							allow-create
							default-first-option
							:remote-method="remoteMethodToAddress"
							placeholder="请选择抄送人 / 请输入关键字 姓名或邮箱地址"
							class="receiver"
						>
							<el-option
								v-for="item in queryList"
								:key="item.id"
								:label="item.linkName + '<' + item.mailId + '>'"
								:value="item.mailId"
							>
								<span style="float: left; color: #8492a6; font-size: 13px;">{{
									item.linkName
								}}</span>
								<span
									style="
										float: left;
										color: #409eff;
										font-size: 13px;
										margin-left: 50px;
									"
									>{{ item.orgName }}</span
								>
								<span style="float: right; padding-left: 30px;">{{
									item.mailId
								}}</span>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="密送：" v-show="isShowCAdress == 2">
						<el-select
							v-model="CAddresses"
							filterable
							multiple
							remote
							allow-create
							default-first-option
							:remote-method="remoteMethodCAddress"
							placeholder="请选择密送人 / 请输入关键字 姓名或邮箱地址"
							class="receiver"
						>
							<el-option
								v-for="item in querys"
								:key="item.id"
								:label="item.linkName + '<' + item.mailId + '>'"
								:value="item.mailId"
							>
								<span style="float: left; color: #8492a6; font-size: 13px;">{{
									item.linkName
								}}</span>
								<span
									style="
										float: left;
										color: #409eff;
										font-size: 13px;
										margin-left: 50px;
									"
									>{{ item.orgName }}</span
								>
								<span style="float: right; padding-left: 30px;">{{
									item.mailId
								}}</span>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="主题：" prop="subject">
						<el-input
							v-model="data.subject"
							placeholder="请输入主题"
						></el-input>
					</el-form-item>
					<el-form-item label="附件：">
						<FileUpload ref="fileUpload" />
					</el-form-item>
					<el-form-item label="正文：" prop="content">
						<div class="edit_container">
							<quill-editor
								v-model="data.content"
								ref="myQuillEditor"
								:options="editorOption"
								:editorOption="editorOption"
							>
							</quill-editor>
						</div>
					</el-form-item>
					<el-form-item style="float: left;">
						<el-button
							@click="sendMail(2, 'data')"
							size="small"
							type="primary"
							icon="el-icon-edit-outline"
							:disabled="disabled"
							>发送</el-button
						>
						<el-button
							@click="sendMail(3, 'data')"
							style="margin-left: 5px;"
							size="small"
							type="info"
							icon="el-icon-edit"
							>草稿</el-button
						>
						<el-button
							@click="back"
							style="margin-left: 5px;"
							size="small"
							icon="el-icon-close"
							plain
							>取消</el-button
						>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { Message } from 'element-ui';
import FileUpload from '@/components/common/fileUpload.vue';
import { mapState, mapActions } from 'vuex';
export default {
	name: 'mailAdd',
	components: {
		quillEditor,
		FileUpload,
	},
	data() {
		return {
			str: '',
			Addresses: [],
			CAddresses: [],
			// editorOption: {},
			list: [],
			queryAll: [],
			queryList: [],
			querys: [],
			loading: false,
			disabled: false,
			isShowAddress: 1,
			isShowCAdress: 1,
			data: {
				receAddresses: [],
				senderAddress: '',
				type: '',
				isReply: 0,
				fileIds: '',
				subject: '',
			},
			rules: {
				subject: [{ required: true, message: '请输入主题', trigger: 'blur' }],
				receAddresses: [
					{
						type: 'array',
						required: true,
						message: '请选择收件人',
						trigger: 'change',
					},
				],
				content: [{ required: true, message: '请输入正文', trigger: 'blur' }],
			},
			editorOption: {
				// 改变提示文字内容
				placeholder: '请输入内容......',
			},
		};
	},
	methods: {
		back() {
			this.$router.go(-1); //返回上一层
		},
		sendMail(action, data) {
			this.$refs[data].validate(valid => {
				if (valid) {
					this.disabled = true;
					if (action == 2) {
						Message.info('正在发送邮件，请稍等!');
					}
					this.data.type = action;
					this.data.receiverAddresses = this.data.receAddresses.join(';');
					this.data.copyToAddresses = this.Addresses.join(';');
					this.data.bcCAddresses = this.CAddresses.join(';');
					//附件
					if (this.$refs.fileUpload.getFiles() != '') {
						this.data.fileIds = JSON.stringify(
							this.$refs.fileUpload.getFiles()
						);
					}
					this.$store
						.dispatch('mail/saveMail', this.data)
						.then(() => {
							this.back();
						})
						.catch(() => {
							this.disabled = false;
						});
				} else {
					this.$message.warning('您输入表单信息有误，请重新填写!');
					return false;
				}
			});
		},
		remoteMethodAddress(query) {
			if (query !== '') {
				this.loading = true;
				this.$store.dispatch('mail/getUserlistByPagination', query);
				setTimeout(() => {
					this.queryAll = this.userRows;
					this.loading = false;
				}, 200);
			} else {
				this.queryAll = this.options;
			}
		},
		remoteMethodToAddress(query) {
			if (query !== '') {
				this.$store.dispatch('mail/getUserlistByPagination', query);
				setTimeout(() => {
					this.queryList = this.userRows;
				}, 200);
			} else {
				this.queryList = this.options;
			}
		},
		remoteMethodCAddress(query) {
			if (query !== '') {
				this.$store.dispatch('mail/getUserlistByPagination', query);
				setTimeout(() => {
					this.querys = this.userRows;
				}, 200);
			} else {
				this.querys = this.options;
			}
		},
		addAddress() {
			this.isShowAddress = 2;
		},
		deleteArress() {
			this.isShowAddress = 1;
			this.Addresses = [];
		},
		addCAddresses() {
			this.isShowCAdress = 2;
		},
		deltetCAddresses() {
			this.isShowCAdress = 1;
			this.CAddresses = [];
		},
		selectAddress(item) {
			this.data.senderAddress = item;
		},
	},
	computed: mapState({
		editor() {
			return this.$refs.myQuillEditor.quill;
		},
		rows: state => state.mail.mailSettingRows,
		options: state => state.mail.mailLinkmanRows,
		userRows: state => state.mail.userRows,
	}),
	mounted() {
		this.editor.container.style.height = `260px`;
	},
	created() {
		let pageBean = {
			pageBean: { page: '1', pageSize: '10', showTotal: 'true' },
		}; //初次加载默认pageBean
		this.$store
			.dispatch('mail/getMailSettingByPagination', pageBean)
			.then(data => {
				for (let i of data) {
					if (i.isDefault == 1) {
						this.data.senderAddress = i.mailAddress;
					}
				}
			});
		this.$store
			.dispatch('mail/getMailLinkmanByPagination', pageBean)
			.then(maillst => {
				this.queryAll = maillst;
				this.queryList = maillst;
				this.querys = maillst;
			});
	},
};
</script>

<style lang="stylus" scoped>
.el-container{
    background-color: #fff;
}
.el-header {
    padding-top:10px;
    border-bottom :1px solid #E7EAEC;
}
.receiver {
    width :100%;
}
.el-button{
    margin:5px;
}
.back{
    float :right;
    margin-top:4px;
}
.senderAdds{
    width:155px;
    display :inline;
    border:0;
    cursor: pointer;
    color: #409EFF;
}
.el-icon-arrow-down {
    font-size: 12px;
    color: #409EFF;
    margin-right:10px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
</style>
