<template>
    <div class="container center-content">
        <div class="title">账户与安全</div>
        <div class="box">
            <div class="name">
                <div class="name1">修改登录密码</div>
                <div class="name2">修改密码后立即生效，下次登录请使用新密码</div>
            </div>
            <div class="border"></div>
            <div class="content">
                <el-form
                    :label-position="labelPosition"
                    label-width="343px"
                    :model="ruleForm"
                    ref="form"
                    :rules="rules"
                >
                    <el-form-item label="原密码" prop="password">
                        <el-input
                            style="width: 300px"
                            type="password"
                            v-model="ruleForm.password"
                            placeholder="请输入原密码"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="pass">
                        <el-input
                            style="width: 300px"
                            type="password"
                            v-model="ruleForm.pass"
                            placeholder="请输入新密码，8-16位字母数字组合"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input
                            style="width: 300px"
                            type="password"
                            v-model="ruleForm.checkPass"
                            placeholder="请再次输出新密码"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <el-button type="primary" @click="codeSend">确认</el-button>
                    <div class="btn2" @click="all('/accountdata')">返回</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            labelPosition: 'right',
            ruleForm: {
                pass: '',
                password: ''
            },
            rules: {
                checkPass: [
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.ruleForm.pass) {
                                callback(new Error('两次密码输入不一致'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    },
                    { required: true, message: '请再次输入密码', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        codeSend() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$http
                        .post('/user/changePw', {
                            newPassword: this.ruleForm.pass,
                            password: this.ruleForm.password
                        })
                        .then(() => {
                            this.$message.warning('修改成功,请重新登录');
                            localStorage.removeItem('webToken');
                            this.$store.commit('updateUserInfo', null);
                        })
                        .then(() => {
                            this.$router.push('/Login');
                        })
                        .catch(e => {
                            this.$message.error(e.error);
                        });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .el-steps {
    margin-left: 385px;
}
/deep/.el-step:nth-child(1) {
    .el-step__icon {
        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
        color: #ffffff;
        border: 0;
    }
}
/deep/.el-step:nth-child(2) {
    .el-step__icon {
        background: #c8c9cc;
        color: #ffffff;
        border: 0;
    }
}
/deep/.el-step:nth-child(3) {
    .el-step__icon {
        background: #c8c9cc;
        color: #ffffff;
        border: 0;
    }
}
/deep/ .el-step__title.is-process {
    font-weight: 400;
    color: #939599;
}
/deep/ .el-step__title.is-wait {
    color: #939599;
}
.container {
    .btn {
        display: flex;
        justify-content: center;
        margin: 80px 0 0 110px;
        .btn2 {
            width: 130px;
            height: 36px;
            background: #c4c7cc;
            border-radius: 4px;
            cursor: pointer;
            color: #ffffff;
            font-size: 13px;
            text-align: center;
            line-height: 36px;
            margin-left: 20px;
        }
    }
    /deep/ .el-button {
        width: 130px;
        height: 36px;
        background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
        border-radius: 4px;
    }
    /deep/ .el-step__title {
        font-size: 13px;
    }
    /deep/ .el-form-item__label {
        color: #ffffff;
        margin-left: 175px;
    }
    /deep/ .el-form {
        margin-top: 66px;
    }
    /deep/ .el-input__inner {
        border: 1px solid #494a4d;
        background: #1c1e26;
        color: #ffffff;
    }
    .title {
        height: 42px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
        padding: 60px 0;
    }
    .box {
        height: 539px;
        background: #1c1e26;
    }
    .name {
        .flex();
        padding: 17px 16px;
        .name1 {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 26px;
        }
        .name2 {
            font-size: 12px;
            font-weight: 400;
            color: #939599;
            margin-left: 10px;
        }
    }
    .phone {
        color: #ffffff;
        font-size: 18px;
    }
    .border {
        height: 1px;
        background: #494a4d;
        margin: 0 16px 40px;
    }
}
</style>
