<template>
    <div class="login">
        <div class="login_title">
            <span class="title">找回密码</span>
            <span style="color: #C8C9CC;cursor: pointer;" @click="$router.push({ name: 'home' })">返回首页</span>
        </div>
        <div class="form">
            <el-form :model="formData" :rules="rules" label-width="80px" label-position="right" ref="loginForm">
                <el-form-item prop="mail">
                    <el-input v-model="formData.mail" placeholder="请输入邮箱" class="ipt"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="formData.code" placeholder="请输入验证码" class="ipt3 "></el-input>
                    <button class="code" @click="authCode()" type="button" :disabled="time !== 0">
                        {{ time === 0 ? '发送验证码' : `重新发送(${time}s)` }}
                    </button>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="formData.password"
                        placeholder="请输入8-16位密码，建议数字、大小写字母组合"
                        type="password"
                        class="ipt2"
                    >
                    </el-input>
                </el-form-item>

                <el-form-item prop="passwordagain">
                    <el-input
                        v-model="formData.passwordagain"
                        placeholder="请再次输入密码"
                        type="password"
                        class="ipt2"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="login_btn">
                <el-button :loading="loading" class="btn1" @click="goRegister">确定</el-button>
                <button class="btn2" @click="$router.push({ name: 'login' })">想起密码，立即登录</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'retrieve',
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value !== this.formData.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validateCode = (rule, value, callback) => {
            if (value === undefined || value === '') {
                callback(new Error('请输入验证码'));
            } else if (value !== this.code) {
                callback(new Error('验证码错误'));
            } else {
                callback();
            }
        };

        return {
            time: 0,
            code: '',
            formData: {
                mail: '',
                code: '',
                password: ''
            },
            dialogVisible: false,
            rules: {
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                passwordagain: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ],
                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                mail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ]
            },
            loading: false
        };
    },
    methods: {
        checkTime() {
            this.time = 60;
            let i = setInterval(() => {
                this.time--;
                if (this.time === 0) {
                    clearInterval(i);
                }
            }, 1000);
        },
        goRegister() {
            this.onSave();
        },
        authCode() {
            if (this.time > 0) {
                return;
            }
            if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.formData.mail)) {
                this.$message.error('请输入正确的邮箱');
                return;
            }
            this.checkTime();
            this.$http.get('/mailCode/sendVerify', {
                mail: this.formData.mail
            });
        },
        onSave() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            this.loading = true;
            this.$http
                .post('/user/updatePassWord', this.formData)
                .then(res => {
                    this.loading = false;
                    this.$message.success('修改成功');
                    this.$router.replace('/login');
                })
                .catch(e => {
                    this.loading = false;
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    }
};
</script>
<style lang="less" scoped>
.login {
    // height: 700px;
    background: white;

    .login_title {
        margin: auto;
        width: 900px;
        height: 60px;
        line-height: 60px;
        border-left: 2px solid #bf1616;
        background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        padding-left: 20px;

        .title {
            color: #bf1616;
            font-weight: 500;
            margin-right: 20px;
            padding-right: 20px;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
    .form {
        margin-top: 30px;

        .el-form {
            position: relative;
            margin: auto !important;
            width: 450px;
        }
        .el-input {
            height: 44px;
            width: 300px;
            + .el-input {
                margin-top: 20px;
            }
        }

        .code {
            position: absolute;
            top: 0px;
            right: 70px;
            width: 100px;
            height: 34px;
            background: #bf1616;
            border-radius: 4px;
            height: 34px;
            font-size: 13px;
            color: #ffffff;
            &:disabled {
                background: #c8c9cc;
            }
        }
        /deep/.el-input--small .el-input__inner {
            height: 44px;
            border: none;
            border-radius: 0px;
            border-bottom: 1px solid #f2f3f5;
            padding: 0px;
        }
        .login_btn {
            margin: auto;
            width: 300px;
            margin-top: 40px;
        }
        button {
            width: 300px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn1 {
            background: #bf1616;
            color: #fff;
            margin-bottom: 20px;
            border: none;
        }
        .btn2 {
            background: #ffffff;
            color: #bf1616;
            border: 1px solid #bf1616;
        }
        .ipt {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon01.png');
            }
        }
        .ipt2 {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon02.png');
            }
        }
        .ipt3 {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon03.png');
            }
        }
    }
}
</style>
