<template>
    <div class="editPassword">
        <el-row>
            <div class="content_title">
                <span>修改密码</span>
            </div>
        </el-row>
        <el-row style="padding-left:250px">
            <el-form
                :model="formData"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="原密码" prop="password">
                    <el-input v-model.number="formData.password" placeholder="请输入原始密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="passWordTo">
                    <el-input
                        type="passWordTo"
                        v-model="formData.passWordTo"
                        autocomplete="off"
                        placeholder="请输入新密码，8-16位字母数字组合"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passWordTo2">
                    <el-input
                        type="passWordTo2"
                        v-model="formData.passWordTo2"
                        autocomplete="off"
                        placeholder="请再次输出新密码"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()" class="btn1">确定</el-button>
                    <el-button type="primary" @click="$router.push({ name: 'account' })" class="btn2">返回</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'editPassword',
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.passWordTo) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            formData: {},
            rules: {
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ],
                passWordTo: [
                    {
                        required: true,
                        message: '请再次输入密码',
                        trigger: 'blur'
                    }
                ],
                passWordTo2: [{ validator: validatePass2, trigger: 'blur' }]
            }
        };
    },
    methods: {
        submitForm() {
            this.formData.username = this.userInfo.username;
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$http
                        .post('/user/updatePassWordTo', this.formData)
                        .then(res => {
                            if (res > 0) {
                                this.$message.success('修改成功');
                                this.$store.commit('updateUserInfo', null);
                                localStorage.removeItem('token');
                                this.$router.push('/home');
                            }
                        })
                        .catch(e => {
                            console.log(e);
                            this.$message.error(e.error);
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
<style lang="less" scoped>
.editPassword {
    height: 520px;
}
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}
.el-form {
    margin-top: 40px;
    .el-input {
        width: 300px !important;
    }
    .el-form-item {
        margin-bottom: 20px;
    }
    .el-button {
        margin-top: 80px;
    }
}
.el-button {
    border: none;
}
.btn1 {
    width: 110px;
    height: 36px;
    background: #bf1616;
    border-radius: 4px;
}
.btn2 {
    width: 110px;
    height: 36px;
    background: #c4c7cc;
    border-radius: 4px;
}
</style>
