// 获取短信验证码
let phoneNum = document.querySelector(".phone-num")
let getCodeBtn = document.querySelector(".get-code")
let codeInput = document.querySelector(".phone-code-wrapper input")
let countdown = 60;
// 6位短信验证码
let smsCodeCheck = /^\d{6}$/
// 设置密码
let setPassword = document.querySelector(".set-password input")
let passwordAgain = document.querySelector(".password-again input")
// 密码正则，8-16位，不能有空格，字母、数字和英文符号，区分大小写
let passwordCheck = /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,16}$/
// 下一步按钮
let stepNext = document.querySelector(".step-next")

// 短信登录验证
phoneNum.onfocus = function () {
    if (this.nextElementSibling.style.display === "block") {
        this.style.border = "#FF7200 1px solid"
    } else {
        this.style.border = "#0147a6 1px solid"
    }
}
phoneNum.onblur = function () {
    if (this.value === "") {
        getCodeBtn.disabled = true
        this.nextElementSibling.style.display = "block"
        this.style.border = "#FF7200 1px solid"
    } else {
        if (phoneCheck.test(this.value)) {
            this.nextElementSibling.style.display = "none"
            getCodeBtn.disabled = false
            this.style.border = "#c1c1c1 1px solid"
        } else {
            getCodeBtn.disabled = true
            this.nextElementSibling.style.display = "block"
            this.nextElementSibling.innerHTML = "请输入正确的手机号"
            this.style.border = "#FF7200 1px solid"
        }
    }
}
codeInput.onfocus = function () {
    if (this.nextElementSibling.style.display === "block") {
        this.style.border = "#FF7200 1px solid"
    } else {
        this.style.border = "#0147a6 1px solid"
    }
}
codeInput.onblur = function () {
    if (this.value === "") {
        this.nextElementSibling.style.display = "block"
        this.style.border = "#FF7200 1px solid"
    } else {
        if (smsCodeCheck.test(this.value)) {
            this.nextElementSibling.style.display = "none"
            this.style.border = "#c1c1c1 1px solid"
        } else {
            this.nextElementSibling.style.display = "block"
            this.nextElementSibling.innerHTML = "请输入正确的6位短信验证码"
            this.style.border = "#FF7200 1px solid"
        }
    }
}

// 步骤条
if (document.querySelector(".step-one").classList.contains("step-active")) {
    stepNext.onclick = function () {
        if (phoneNum.value === "") {
            getCodeBtn.disabled = true
            phoneNum.nextElementSibling.style.display = "block"
            phoneNum.style.border = "#FF7200 1px solid"
        }
        if (codeInput.value === "") {
            getCodeBtn.disabled = true
            codeInput.nextElementSibling.style.display = "block"
            codeInput.style.border = "#FF7200 1px solid"
        }
        if (phoneCheck.test(phoneNum.value) && smsCodeCheck.test(codeInput.value)) {
            document.querySelector(".step-two").classList.add("step-active")
            document.querySelector(".authentication-wrapper").style.display = "none"
            document.querySelector(".set-password-wrapper").style.display = "block"
            stepTwoInputCheck()
            if (document.querySelector(".step-two").classList.contains("step-active")) {
                stepNext.onclick = function () {
                    if (setPassword.value === "") {
                        setPassword.nextElementSibling.style.display = "block"
                        setPassword.style.border = "#FF7200 1px solid"
                    }
                    if (passwordAgain.value === "") {
                        passwordAgain.nextElementSibling.style.display = "block"
                        passwordAgain.style.border = "#FF7200 1px solid"
                    }
                    if (passwordAgain.value!==setPassword.value){
                        passwordAgain.nextElementSibling.style.display = "block"
                        passwordAgain.nextElementSibling.innerHTML="两次输入密码不一致"
                        passwordAgain.style.border = "#FF7200 1px solid"
                    }
                    if (passwordCheck.test(setPassword.value)&&passwordAgain.value===setPassword.value){
                        document.querySelector(".step-three").classList.add("step-active")
                        document.querySelector(".set-password-wrapper").style.display = "none"
                        document.querySelector(".reset-success-wrapper").style.display = "block"
                        stepNext.innerHTML="重新登录"
                        stepNext.onclick=function (){
                            window.location.href="login.html"
                        }
                    }
                }
            }
        }
    }
}


// 获取短信验证码
function setTime() {
    let timer = setInterval(function () {
        if (countdown === 0) {
            //清除定时器和复原按钮
            clearInterval(timer);
            getCodeBtn.disabled = false;
            getCodeBtn.innerHTML = '重新发送';
            countdown = 60;
        } else {
            getCodeBtn.innerHTML = '剩余' + countdown + '秒';
            countdown--;
        }
    }, 1000);
}

// 第二步表单获取焦点/失去焦点时的验证
function stepTwoInputCheck() {
    setPassword.onfocus = function () {
        if (this.nextElementSibling.style.display === "block") {
            this.style.border = "#FF7200 1px solid"
        } else {
            this.style.border = "#0147a6 1px solid"
        }
    }
    setPassword.onblur = function () {
        if (this.value === "") {
            this.nextElementSibling.style.display = "block"
            this.style.border = "#FF7200 1px solid"
        } else {
            if (passwordCheck.test(this.value)) {
                this.nextElementSibling.style.display = "none"
                this.style.border = "#c1c1c1 1px solid"
            } else {
                this.nextElementSibling.style.display = "block"
                this.nextElementSibling.innerHTML = "密码为8-16位，由大小写字母、数字和英文符号组成"
                this.style.border = "#FF7200 1px solid"
            }
        }
    }
    passwordAgain.onfocus = function () {
        if (this.nextElementSibling.style.display === "block") {
            this.style.border = "#FF7200 1px solid"
        } else {
            this.style.border = "#0147a6 1px solid"
        }
    }
    passwordAgain.onblur = function () {
        if (this.value === "") {
            this.style.border = "1px #FF7200 solid"
            this.nextElementSibling.style.display = "block"
        } else {
            if (this.value === setPassword.value) {
                this.style.border = "1px #c1c1c1 solid"
                this.nextElementSibling.style.display = "none"
            } else {
                this.style.border = "1px #FF7200 solid"
                this.nextElementSibling.style.display = "block"
                this.nextElementSibling.innerHTML = "两次输入密码不一致"
            }
        }
    }
}