<template>
    <lj-win-common title="写邮件">
        <mu-button icon slot="header_right" style="font-size:18px;width:100%;color:#2196f3" @click="SendMsg">
            发送
        </mu-button>
        <template slot="body">
            <div class="msgBody">
                <div class="msgemp">
                    <span style="color:#9e9e9e;width:10%">收件人 : </span>
                    <mu-select solo v-model="Receiver" multiple separator=";" max-height="150" style="width:70%">
                        <mu-option v-for="emp in empList" :key="emp.empname" :label="emp.empname" :value="emp.empname">
                        </mu-option>
                    </mu-select>
                    <mu-divider style="margin-top:5px"></mu-divider>
                </div>
                <div class="msgemp">
                    <span style="color:#9e9e9e">发件人 : </span>
                    <input type="text" v-model="SendEmp" :disabled="true">
                    <mu-divider style="margin-top:5px"></mu-divider>
                </div>
                <div class="msgemp">
                    <span style="color:#9e9e9e">标题 : </span>
                    <input type="text" v-model="MsgTitle">
                    <mu-divider style="margin-top:5px"></mu-divider>
                </div>
                <mu-text-field class="MsgContent" solo full-width v-model="MsgContent" placeholder="点击此处编辑邮件内容"
                    multi-line :rows="13" :max-length="256" id="textField" @focus="focusField"></mu-text-field>
                <div>
                    <span>
                        <mu-button flat color="red" @click="cleanFile">清空附件</mu-button>
                    </span>
                    <span class="fujian" onclick="document.getElementById('fileinput').click()">
                        <!-- <mu-button flat color="primary">添加附件</mu-button> -->
                        <i class="iconfont icon-fujian"></i>
                    </span>
                    <input id="fileinput" class="fileinput" type="file" multiple="multiple" :value="file" ref="dom"
                        @change="tirggerFile($event)">
                </div>
                <div v-if="fileList.length > 0" class="MsgContent">
                    <span>已选择 {{fileList.length}} 个文件:</span>
                    <!-- <div v-for="file in filesname"><i class="iconfont icon-dot" style="font-size:15px"></i>{{file}}</div> -->
                    <template v-for="(file,index) in fileList">
                        <lj-fj :fileFj="file" :clickEventDefault="false" deletable
                            @on-delete="fileList.splice(index,1)"></lj-fj>
                    </template>
                </div>
            </div>
        </template>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjFj from "components/lj-fj";
    export default {
        name: "email-edit",
        components: {
            LjWinCommon,
            LjFj
        },
        data() {
            return {
                Receiver: [],
                SendEmp: "",
                MsgTitle: "",
                MsgContent: "",
                showEmp: false,
                empList: [],
                file: [],
                fileList: [],
                filesname: [],
                filebase64: [],
            }
        },
        created() {
            let user = $lj.getStorage("user");
            if (user) {
                this.SendEmp = user.username;
            }
            this.refresh()
        },
        methods: {
            refresh() {
                let self = this;
                let requestBody = {
                    token: $lj.getStorage("token"),
                };
                $lj.postLJRequest("GetL1EmpForMail", requestBody, function (ret) {
                    if (ret) {
                        self.empList = ret.EmpList
                        for (let i = 0; i < self.empList.length; i++) {
                            if (self.empList[i].empname == self.SendEmp) {
                                self.empList.splice(i, 1)
                            }
                        }
                    }
                })
            },
            SendMsg() {
                let self = this;
                var ReceiverList = self.Receiver.join(";")
                let requestBody = {
                    token: $lj.getStorage("token"),
                    title: self.MsgTitle,
                    content: self.MsgContent,
                    receiver: ReceiverList,
                    fileList:self.fileList
                };
                // alert(JSON.stringify(self.filebase64.length))
                // alert(JSON.stringify(self.filesname))
                $lj.postLJRequest("SendMail", requestBody, function (ret) {
                    if (ret) {
                        if (ret.msgid > 0) {
                            $lj.toast("发送成功!");
                            $lj.closeWin();
                        }
                    }
                })
            },
            focusField() {
                setTimeout(function () {
                    window.scrollTo(0, 0);
                }, 2000);

            },
            cleanFile() {
                // this.filesname = [];
                // this.filebase64 = [];
                this.file = [];
                this.fileList = [];
                $lj.toast("附件已清空!");
            },
            tirggerFile(event) {
                let self = this;
                var reader = new FileReader();
                var file = event.target.files[0];
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    self.fileList.push({
                        base64: reader.result,
                        fileName: file.name,
                        fileType: file.name.substring(file.name.lastIndexOf('.')),
                        fileSize: file.size
                    });
                };
            }
        }

    }
</script>

<style>
    .mu-demo-form {
        width: 100%;
    }

    .msgBody {
        background-color: #ffffff;
        padding: 10px;
    }

    .msgemp {
        padding: 10px;
        font-size: 18px;
    }

    .MsgContent {
        padding: 10px;
    }

    .fileinput {
        opacity: 0;
        position: absolute;
        overflow: hidden;
        right: 0;
        top: 0;
    }

    .fujian {
        padding: 4px 10px;
        height: 20px;
        line-height: 20px;
        position: relative;
        color: #666;
        float: right;
        margin-top: 10px;
    }

    input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
    }
</style>