<div class="main" id="main">
    <el-form ref="form" label-width="100px" label-position="left">
        <el-form-item label="接收手机">
            <el-input v-model="mobile" v-validate="{data:mobile,dataType:'mobile',nullMsg:'请填写接收手机号！',errorMsg:'手机号码格式错误！'}"></el-input>
            <span class="help-block validate-tips-box">请填写您的手机号码</span>
        </el-form-item>
        <el-form-item label="短信模板编号">
            <el-input v-model="content" v-validate="{dataType:'*',nullMsg:'请填写短信模板编号'}"></el-input>
            <span class="help-block validate-tips-box">模板编号可以在短信运营商处设置后获取。</span>
        </el-form-item>
        <el-form-item label="关键词替换">
            <el-input v-model="paramString" v-validate="{dataType:'*'}"></el-input>
            <span class="help-block validate-tips-box">用于替换模板中的关键词，采用Json格式,如：{"code":"123456"}</span>
        </el-form-item>

    </el-form>
    <div class="footer-submit-bar" style="padding-left:100px">
        <el-button type="primary" v-on:click="postSubmit">发送</el-button>
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>
<script type="text/javascript">
    var formData = { mobile: "", paramString: "{\"code\":\"123456\"}", content: parent.vue.SmsConfig.ValidateCodeTemplate};
    var vue= new Vue({
        el: "#main",
        data: formData,
        methods: {
            postSubmit: function () {
                var validated = this.validateForm({ tipsStyle: 1});//jquery表单验证
                if (validated)
                {
                    this.submit({ url: "@Url.ActionUrl("SmsTest")", data: formData, successMsg: '发送成功!'});
                }
            },
        },
    });
</script>