<template>
    <div>
        <h2>修改密码</h2>
        <el-form :model='ruleForm' :rules='rules' ref='ruleForm' label-width='150px' class='demo-ruleForm'>
            <el-form-item label='原密码' prop='oldPwd'>
                <el-input
                    name='password'
                    type='password'
                    v-model='ruleForm.oldPwd'
                    placeholder='原密码'
                    style='width: 200px'
                />
            </el-form-item>
            <el-form-item label='新密码' prop='newPwd'>
                <el-input
                    name='password'
                    type='password'
                    v-model='ruleForm.newPwd'
                    placeholder='新密码'
                    style='width: 200px'
                />
            </el-form-item>
            <el-form-item label='再次输入新密码' prop='newPwd2'>
                <el-input
                    name='password'
                    type='password'
                    v-model='ruleForm.newPwd2'
                    placeholder='再次输入新密码'
                    style='width: 200px'
                />
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='submitForm("ruleForm")'>确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'ChangePwd',

    data() {
        let checkPwd2 = function(rule, value, callback) {
            if (result.ruleForm.newPwd === result.ruleForm.newPwd2) {
                callback()
            } else {
                callback(new Error('两次输入的密码不一致!'))
            }
        }
        let result = {
            ruleForm: {
                oldPwd: '',
                newPwd: '',
                newPwd2: ''
            },
            rules: {
                oldPwd: [
                    { required: true, message: '请输入原密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
                newPwd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
                newPwd2: [
                    { required: true, message: '请重复输入新密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
                    { validator: checkPwd2, trigger: 'blur' }
                ]
            }
        }
        return result
    },

    methods: {
        submitForm(formName) {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    let vm = this
                    // this.postJson(
                    //     '/admin/user/chgpwd',
                    //     { oldPwd: this.ruleForm.oldPwd, newPwd: this.ruleForm.newPwd },
                    //     resp => {
                    //         vm.$message({
                    //             type: 'success',
                    //             message: '修改密码成功'
                    //         })
                    //     }
                    // )
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    },
    created() {
        this.$store.dispatch('setBreadcrumb', [{ label: '修改密码' }])
    }
}
</script>
<style lang="css" scoped>
</style>
