<template>
    <div class="register">
        <el-form ref="forgetForm" :model="forgetForm" :rules="resetRules" class="register-form">
            <div style="display:flex;align-items: center;justify-content: space-between;padding-bottom:30px;background-color:#F8F8F8 ">
                <div style="color:#333;font-size:22px;font-weight:bold;">优鲜信家政平台</div>
                <div style="display:flex;align-items: center;">
                    <el-link style="color:#FC6035" @click="$router.push('/login')">登录</el-link>
                    <div style="width:1px;height:10px;background-color:#111;margin:0 30px"></div>
                    <el-link style="float:right;color:#FC6035" @click="$router.push('/settled')">申请入驻 ></el-link>
                </div>
            </div>

            <h3 class="title">{{!checkPass?'忘记密码':'设置密码'}}</h3>

            <div v-if="!checkPass" style="width:356px;margin:0 auto">
                <el-form-item prop="phone">
                    <el-input v-model="forgetForm.phone" type="text" auto-complete="off" placeholder="请输入手机号">
                        <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="forgetForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 63%">
                        <!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> -->
                    </el-input>
                    <div class="register-code">
                        <el-button @click="getCode" :disabled="count>0" style="width: 100%">{{ count > 0 ? count : '获取验证码'}}</el-button>
                    </div>
                </el-form-item>
                <el-form-item style="width:100%;margin-top:60px">
                    <el-button :loading="loading" size="medium" type="primary" style="width:100%;background-color: #FC6035;border-color: #FC6035" @click.native.prevent="handleCheckCode">
                        <span v-if="!loading">下一步</span>
                        <span v-else>验 证 中...</span>
                    </el-button>
                </el-form-item>
            </div>
            <div v-else style="width:356px;margin:0 auto">
                <el-form-item prop="password">
                    <el-input v-model="forgetForm.password" type="password" auto-complete="off" placeholder="新密码">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                    </el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input v-model="forgetForm.confirmPassword" type="password" auto-complete="off" placeholder="确认新密码">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                    </el-input>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleResetAndLogin">
                        <span v-if="!loading">确定并登陆</span>
                        <span v-else>验 证 中...</span>
                    </el-button>
                </el-form-item>
            </div>

        </el-form>
    </div>
</template>

<script>
import {
    getCode,
    resetPasswordCheck,
    resetPasswordAndLogin,
} from "@/api/login";

export default {
    name: "Forget",
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.forgetForm.password !== value) {
                callback(new Error("两次输入的密码不一致"));
            } else {
                callback();
            }
        };
        return {
            count: 0,
            checkPass: false,
            forgetForm: {
                phone: "",
                password: "",
                confirmPassword: "",
            },
            resetRules: {
                phone: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入您的手机号",
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "用户账号长度必须介于 2 和 20 之间",
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: "change",
                        message: "请输入验证码",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入您的密码",
                    },
                    {
                        min: 5,
                        max: 20,
                        message: "用户密码长度必须介于 5 和 20 之间",
                        trigger: "blur",
                    },
                    {
                        pattern:
                            /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/,
                        message: "用户密码长度必须同时包含字母和数字",
                        trigger: "blur",
                    },
                ],
                confirmPassword: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请再次输入您的密码",
                    },
                    {
                        required: true,
                        validator: equalToPassword,
                        trigger: "blur",
                    },
                ],
            },
            loading: false,
        };
    },
    methods: {
        getCode() {
            this.$refs.forgetForm.validateField("phone", (err) => {
                if (err) {
                    return;
                }

                this.count = 30;
                const interval = setInterval(() => {
                    if (this.count <= 0) {
                        clearInterval(interval);
                    }
                    this.count--;
                }, 1000);

                getCode(this.forgetForm).then(({ code }) => {
                    if (code === 200) {
                        this.$message.success("验证码已发送");
                    }
                });
            });
        },
        handleCheckCode() {
            this.$refs.forgetForm.validateField(["code"], (err) => {
                if (err) {
                    return;
                }

                this.loading = true;
                resetPasswordCheck(this.forgetForm)
                    .then(({ code }) => {
                        if (code === 200) {
                            this.checkPass = true;
                        }
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            });
        },
        async handleResetAndLogin() {
            await this.$refs.forgetForm.validate();

            this.loading = true;
            try {
                const { code, token } = await resetPasswordAndLogin(
                    this.forgetForm
                );
                if (code === 200) {
                    this.$message.success("密码修改成功");
                    await this.$store.dispatch("Reset", token);
                    this.$router.push({ path: "/" });
                }
            } finally {
                this.loading = false;
            }
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #F8F8F8 ;
    // background-image: url("../assets/images/login-background.png");
    background-size: cover;
}
.title {
    margin: 0px auto 30px auto;
    padding: 20px 0;
    text-align: center;
    color: #fff;
    background-color: #fc6035;
    font-size: 24px;
    font-weight: 300;
}

.register-form {
    // border-radius: 6px;
    background: #ffffff;
    width: 1000px;
    padding-bottom: 153px;

    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}
.register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}
.register-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
        cursor: pointer;
        vertical-align: middle;
    }
}
.el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
.register-code-img {
    height: 38px;
}
</style>
