<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>修改密码</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-form ref="form" label-width="70px" label-position="right" style="max-width:600px;width:80%">
        <!--解决浏览器自动填充账户-->
        <input type="text" style="position:fixed;bottom:-9999px" />
        <input type="password" style="position:fixed;bottom:-9999px" />
        <el-form-item label="旧密码" v-show="!IsEmptyPassword">
            <el-input type="password" v-model="OldPassword" maxlength="20" autocomplete="off" v-validate="{data:OldPassword,dataType:'*',nullMsg:'请填旧密码!',ignore:IsEmptyPassword}"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="新密码">
            <el-input type="password" v-model="NewPassword" maxlength="20" autocomplete="off" v-validate="{data:NewPassword,dataType:'password',nullMsg:'请填写新密码!'}"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="密码确认">
            <el-input type="password" v-model="NewPassword1" maxlength="20" autocomplete="off" v-validate="{data:NewPassword1,dataType:'password',nullMsg:'请填写确认密码!',errorMsg:'两次密码输入不一致!',compare:NewPassword}"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="">
            <el-button size="small" type="primary" v-on:click="postSubmit">提交保存</el-button>
            <el-button size="small" onclick="location.href='@Url.ActionUrl("Security")'">返回</el-button>
        </el-form-item>
    </el-form>
</div>
<script type="text/javascript">
    var formData = {IsEmptyPassword:false,OldPassword:"",NewPassword: "",NewPassword1: ""};
    var vue = new Vue({
        el: "#main",
        data: formData,
        methods: {
            postSubmit: function () {
                var validated = this.validateForm({});//jquery表单验证
                if (validated) {
                    if (formData.OldPassword == formData.NewPassword) {
                        this.$message.error("新密码不能和旧密码一样!");
                        return false;
                    }
                    this.submit({ url: "@Url.ActionUrl()",data:formData,showSuccessMsg:false,successMsg:"",success:"PostBack()" });
                }
            }
        }
    });

    //检测用户密码是否为空，自动注册时用户密码默认为空
    vue.ajax({
        type:"get",
        url: "@Url.ActionUrl("IsEmptyPassword")",
        success: function (responseData)
        {
            formData.IsEmptyPassword = responseData.IsEmptyPassword;
        }
    })

   function PostBack() {
            vue.$alert('密码修改成功!', '提示', {
            confirmButtonText: '确定',
            type: 'success',
            callback: function () {
                 location.href = '@Url.ActionUrl("Security")';
            }
        })
    }

</script>

