<template>
    <el-dialog class="myMailDialog" v-el-drag-dialog :title="title" :visible.sync="dialogVisible" width="1000px" top="10px"
        :before-close="handleClose" @open="handleDialogOpen">
        <div class="myEmail">
            <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item>
                    <el-button class="el-icon-s-promotion" type="success" size="small" @click="sendEmail" :loading="loading"
                        v-text="buttonMessage"></el-button>
                </el-form-item>
                <el-form-item label="发送自">
                    <el-input v-model="formData.fromUser" readonly></el-input>
                </el-form-item>
                <el-form-item label="发送到">
                    <el-select v-model="formData.toUser" multiple placeholder="请选择" filterable>
                        <el-option v-for="item in allUser" :key="item.mail" :label="item.mail" :value="item.mail"
                            :disabled="item.mail == formData.fromUser">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主题">
                    <el-input v-model="formData.subject"></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload class="upload-demo myUpload" action=""
                        accept=".png,.PNG,.jpg,.JPG,.docx,.doc,.pdf,.DOCX,.DOC,.PDF,.PPT,.ppt,.pptx,.PPTX,.mlf,.MLF,.xls,.xlsx,.XLS,.XLSX"
                        :on-remove="handleRemove" :on-change="handleChange" :file-list="fileList" :auto-upload="false"
                        multiple>
                        <el-button size="mini" type="primary" title="支持导入doc,ppt,xls,mlf,pdf,jpg,png 最大支持50M文件上传">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">支持导入doc,ppt,xls,mlf,pdf,jpg,png 最大支持100M文件上传</div> -->
                    </el-upload>
                </el-form-item>
            </el-form>
            <div style="width: 100%;height: 320px; margin: 0 auto">
                <quill-editor ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)" @change="onEditorChange($event)" @ready="onEditorReady($event)">
                </quill-editor>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import elDragDialog from "@/util/directive/el-dragDialog";
import { quillEditor } from 'vue-quill-editor';
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { getUserList } from '@/api/user.js';
import { sendMail } from '@/api/mail/mail.js';

const fonts = [
    "SimSun",
    "SimHei",
    "Microsoft-YaHei",
    "KaiTi",
    "FangSong",
    "Arial",
    "Times-New-Roman",
    "sans-serif",
];
// 自定义字号的大小，注意下面的内容要和css里面对应上
const sizes = ['14px', "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
const Size = Quill.import("attributors/style/size");
Size.whitelist = sizes;
Quill.register(Size, true);
const Font = Quill.import("attributors/style/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
export default {
    data() {
        return {
            dialogVisible: false,
            title: '',
            formData: {
                fromUser: '',
                toUser: [],
                subject: '',
                text: ''
            },
            content: '',
            fileList: [],
            // 富文本编辑器配置
            editorOption: {
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                            ['blockquote', 'code-block'], // 引用  代码块
                            [{ header: 1 }, { header: 2 }], // 1、2 级标题
                            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                            [{ indent: '-1' }, { indent: '+1' }], // 缩进
                            [{ direction: 'rtl' }], // 文本方向
                            [{ size: sizes }], // 配置字号
                            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
                            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                            [{ font: fonts }], // 字体种类
                            [{ align: [] }], // 对齐方式
                            ['clean'], // 清除文本格式
                            // ['image', 'video'] // 链接、图片、视频
                        ]
                    }
                },
                placeholder: '请输入正文'
            },
            allUser: [],
            loading: false,
            buttonMessage: '发送'
        }
    },
    props: {
        fromUser: String,
        checkedUserList: Array
    },
    directives: {
        elDragDialog
    },
    components: {
        quillEditor
    },
    methods: {
        handleClose() {
            this.dialogVisible = false;
        },
        showDialog() {
            this.dialogVisible = true;
        },
        handleDialogOpen() {
            this.formData.fromUser = this.$props.fromUser;
            this.formData.toUser = this.$props.checkedUserList.filter(item => !!item && item != this.$props.fromUser);
            this.getUserListFn();
        },
        onSubmit() {
            console.log("submit!");
        },
        // 失去焦点事件
        onEditorBlur(quill) {
            console.log("editor blur!", quill);
        },
        // 获得焦点事件
        onEditorFocus(quill) {
            console.log("editor focus!", quill);
        },
        // 准备富文本编辑器
        onEditorReady(quill) {
            console.log("editor ready!", quill);
        },
        // 内容改变事件
        onEditorChange({ quill, html, text }) {
            // console.log("editor change!", quill, html, text);
            console.log(html);
            this.content = html;
        },
        getUserListFn() {
            getUserList().then(res => {
                this.allUser = res.filter(item => !!item.mail);
            })
        },
        sendEmail() {
            this.loading = true;
            this.buttonMessage = '发送中';
            this.formData.text = this.content;
            let fd = new FormData();
            fd.append('fromUser', this.formData.fromUser);
            fd.append('text', this.formData.text);
            fd.append('subject', this.formData.subject);
            this.formData.toUser.forEach(item => {
                fd.append('sendTo', item);
            });
            this.fileList.forEach(item => {
                fd.append('files', item.raw);
            });
            sendMail(fd).then(res => {
                this.$message.success(res);
                this.loading = false;
                this.buttonMessage = '发送完成';
                setTimeout(() => {
                    this.buttonMessage = '发送';
                }, 2000);
            }).catch(error => {
                this.$message.error(error.message);
                this.loading = false;
                this.buttonMessage = '发送失败';
                setTimeout(() => {
                    this.buttonMessage = '发送';
                }, 2000);
            });
        },
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-20);
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
        },
    }
}
</script>

<style lang="scss">
.myMailDialog {
    .el-dialog {
        height: calc(100% - 60px);
        padding: 20px 20px 80px 20px;

        .el-dialog__body {
            height: calc(100% - 80px);

            .myEmail {
                width: 100%;
                height: 100%;
                overflow-y: auto;

                .el-select {
                    width: 100%;
                }

                .el-upload__tip {
                    color: white;
                }

                .upload-demo.myUpload{
                    margin-top: 6px;
                }

                .quill-editor {
                    height: 250px;
                }

                .myUpload {
                    .el-upload-list__item {
                        width: auto !important;
                        margin-right: 10px;
                        display: inline-block !important;
                        border: 1px solid #535353 !important;
                        box-shadow: 0 0 10px #535353;
                        background-color: #F5F7FA;
                        .el-upload-list__item-name {
                            .el-icon-document {
                                font-size: 20px !important;
                                margin-left: 10px;
                                vertical-align: middle;
                            }
                        }
                        .el-icon-close{
                            top: 10px !important;
                        }
                    }
                    
                }

                // .editor {
                //     line-height: normal !important;
                //     height: 350px;
                // }

                .ql-toolbar.ql-snow {
                    background-color: white;
                }

                .ql-snow .ql-tooltip[data-mode="link"]::before {
                    content: "请输入链接地址:";
                }

                .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
                    border-right: 0px;
                    content: "保存";
                    padding-right: 0px;
                }

                .ql-editor {
                    background-color: white;
                }


                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
                    content: "黑体";
                    font-family: "SimHei";
                }

                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
                    content: "微软雅黑";
                    font-family: "Microsoft YaHei";
                }

                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
                    content: "楷体";
                    font-family: "KaiTi";
                }

                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
                    content: "仿宋";
                    font-family: "FangSong";
                }

                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
                    content: "Arial";
                    font-family: "Arial";
                }

                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
                    content: "Times New Roman";
                    font-family: "Times New Roman";
                }

                .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
                .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
                    content: "sans-serif";
                    font-family: "sans-serif";
                }

                .ql-font-SimSun {
                    font-family: "SimSun";
                }

                .ql-font-SimHei {
                    font-family: "SimHei";
                }

                .ql-font-Microsoft-YaHei {
                    font-family: "Microsoft YaHei";
                }

                .ql-font-KaiTi {
                    font-family: "KaiTi";
                }

                .ql-font-FangSong {
                    font-family: "FangSong";
                }

                .ql-font-Arial {
                    font-family: "Arial";
                }

                .ql-font-Times-New-Roman {
                    font-family: "Times New Roman";
                }

                .ql-font-sans-serif {
                    font-family: "sans-serif";
                }

                /* 字号设置 */
                /* 默认字号 */
                .ql-snow .ql-picker.ql-size .ql-picker-label::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item::before {
                    content: "14px";
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
                    content: "14px";
                    font-size: 14px;
                }

                .ql-size-14px {
                    font-size: 14px;
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
                    content: "16px";
                    font-size: 16px;
                }

                .ql-size-16px {
                    font-size: 16px;
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
                    content: "18px";
                    font-size: 18px;
                }

                .ql-size-18px {
                    font-size: 18px;
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
                    content: "20px";
                    font-size: 20px;
                }

                .ql-size-20px {
                    font-size: 20px;
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
                    content: "22px";
                    font-size: 22px;
                }

                .ql-size-22px {
                    font-size: 22px;
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
                    content: "26px";
                    font-size: 26px;
                }

                .ql-size-26px {
                    font-size: 26px;
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
                    content: "28px";
                    font-size: 28px;
                }

                .ql-size-28px {
                    font-size: 28px;
                }

                .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
                .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
                    content: "30px";
                    font-size: 30px;
                }

                .ql-size-30px {
                    font-size: 30px;
                }
            }
        }
    }
}
</style>