{{.Header}}
<div id="app" style="width:100%">
    <template>
        <el-container  v-loading.fullscreen.lock="fullscreenLoading">
            <el-aside>
                {{.Left}}
            </el-aside>

            <el-main class="mainMain">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="120px">
                    <el-form-item label="smtp地址" prop="smtp">
                        <el-input v-model="ruleForm.smtp" placeholder="SMTP服务器如smtp.sina.net:25包含端口号"></el-input>
                    </el-form-item>
                    <el-form-item label="主题" prop="subject">
                        <el-input v-model="ruleForm.subject"></el-input>
                    </el-form-item>
                    <el-form-item label="收件人" prop="to">
                        <el-input v-model="ruleForm.to"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" prop="content">
                        <el-input type="textarea" v-model="ruleForm.content"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即发送</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-main>

        </el-container>
    </template>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        delimiters:["<{","}>"],
        data: {
            fullscreenLoading:true,
            folders:[],
            fid:"",
            mailTotal:0,
            ruleForm: {
                smtp: '',
                to: '',
                subject: '',
                content: '',
            },
            rules: {
                smtp: [
                    { required: true, message: 'SMTP服务器如"smtp.sina.net:25"包含端口号', trigger: 'blur' },
                ],
                to: [
                    { required: true, message: '邮箱地址', trigger: 'blur' },
                ],
                subject: [
                    { required: true, message: '主题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '内容', trigger: 'blur' },
                ],
            },
        },
        methods: {
            //获取邮件夹
            getFolders: function () {
                this.fullscreenLoading=true;
                let _this = this;
                $.get('/folder_dirs', function (rs) {
                    _this.folders=rs.result.folders;
                    _this.mailTotal=rs.result.total;
                    _this.fid=rs.result.fid;
                    _this.fullscreenLoading=false;
                }).then(()=>{
                    _this.fullscreenLoading=false;
                });
            },
            //跳转
            openUrl(url){
                window.location.href=url;
            },
            //提交表单
            submitForm(formName){
                let _this=this;
                this.$refs[formName].validate((valid) => {
                    console.log(valid,formName,this.$refs[formName]);
                    if (valid) {
                        let data=this.ruleForm;
                        let to=[];
                        to.push(this.ruleForm.to);
                        data.to=to;
                        axios.post('/send', data).then(function (response) {
                                console.log(response);
                        }).catch(function (error) {
                                console.log(error);
                        });
                    } else {
                        return false;
                    }
                });
            },
            //重置表单
            resetForm(formName) {
                this.loading=false;
                this.$refs[formName].resetFields();
            },
        },
        created: function () {
            this.getFolders();
        }
    })

</script>
</html>