<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="Shortcut Icon" href="${ctxPlugin}/favicon.ico"/>
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/style.css">
</head>
<body>
<div class="back-logo">
    <div class=" pos-a mt-238 ml-800" style="width: 680px;height: 608px;background:#f3f4f5e8; opacity: 1; border-radius: 6px; position: absolute; top: 20%;right: 30%">
        <!--第一步-->

        <div class="register register1">
            <h1 class="step1" style="text-align:center">重置密码</h1>
            <div>
                <div class="register-input">
                    <span><b class="mark">*</b>注册手机号：</span>
                    <div>
                        <input type="text" placeholder="输入手机号作为登录账号" name="mobile" id="mobile" autocomplete="off">
                    </div>
                </div>
                <div class="register-input">
                    <span><b class="mark">*</b>短信验证码：</span>
                    <div>
                        <input type="text" placeholder="请输入短信验证码" id="confirmCode"  autocomplete="off">
                        <button type="button" id="btnCode">获取验证码</button>
                    </div>
                </div>
                <div class="register-input">
                    <span><b class="mark">*</b>新密码：</span>
                    <div>
                        <input type="password" placeholder=" 6-16位数字、字母或组合 " name="password" id="password" autocomplete="new-password">
                    </div>
                </div>
                <div class="register-input">
                    <span><b class="mark">*</b>确认密码：</span>
                    <div>
                        <input type="password" placeholder=" 6-16位数字、字母或组合 " name="password" id="passwordqueren">
                    </div>
                </div>


                <button class="next-register" id="btnNext">提交</button>
            </div>
        </div>
        <div class="register register3 hide">
            <h1 class="step1">编辑完成</h1>
            <div class="text-c">
                <img src="${ctxPlugin}/static/img1/success-register.png" alt="" class="mt-50">
                <p class="register-success">编辑完成</p>
                <button class="next-register" id="complete">完成</button>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;//手机号正则
    var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; //登录密码正则--登陆密码只能是6-16位数字字母组合
    var num = /^[0-9]{4}$/; //4位数字
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','jquery'],function () {
        var $=layui.$,
            index = layui.index,
            form = layui.form,
            jquery = layui.jquery;
        //已读
        $('input[type="checkbox"]').change(function () {
            if($(this).is(':checked')){
                $(this).parent().addClass('hasRead')
            }else {
                $(this).parent().removeClass('hasRead')
            }
        })

        $('#btnNext').on('click',function(){
            var re = new RegExp(passwordReg)
            if(siteckec){
                return ;
            }
            var mobile = $("#mobile").val();  //手机号码
            if(isBlank(mobile) || !phoneReg.test(mobile)){
                layer.msg("请输入11位有效数字组合的手机号码！",{icon:2});
                return;
            }

            var password = $("#password").val();
            var passwordqueren = $("#passwordqueren").val();  //密码
            if(isBlank(password)){
                layer.msg("登录密码不能为空，请先设置登录密码！",{icon:2});
                return;
            }else if(!re.test(password)){
                layer.msg("登录密码为6-16位数字、字母或组合！",{icon:2});
                return;
            }
            if(password!=passwordqueren){
                layer.msg("两次密码不一致，请重新输入！",{icon:2});
                return;
            }

            var confirmCode = $("#confirmCode").val();  //验证码
            if(isBlank(confirmCode)){
                layer.msg("请输入手机短信获取的短信验证码！",{icon:2});
                return;
            }else if(!num.test(confirmCode)){
                layer.msg("请输入正确的验证码！",{icon:2});
                return;
            }
            siteckec = true;
            $.ajax({
                type:"post",
                url:"${ctx}/main/customer/checkConfirmCode",//校验输入的验证码和手机获取的是否一致
                data:{
                    confirmCode:confirmCode,
                    mobile:mobile,
                    password:password,
                },
                success:function(result){
                    siteckec = false;
                    if(result=="ok"){
                        $(".register3").removeClass("hide");
                        $(".register1").addClass("hide");
                    }else if(result == "existName"){
                        layer.msg("此号码不唯一，请联系平台查询！",{icon:2});
                        return;
                    }else if(result == "wrongMsg"){
                        layer.msg("您的短信验证码输入错误，请重新输入！",{icon:2});
                        return;
                  }else if(result == "notidNull"){
                        layer.msg("请获取新的验证码！",{icon:2});
                        return;
                    }else{
                        layer.msg("请重新获取验证码！",{icon:2});
                    }
                }
            })

        })
        var siteckec = false;


        var ordertime=60   //设置再次发送验证码等待时间
        var timeleft=ordertime;
        //计时函数
        function timeCount(){
            timeleft-=1
            if (timeleft>0){
                $("#btnCode").text(timeleft+" 秒后重发");
                setTimeout(timeCount,1000)
            }
            else {
                $("#btnCode").text("重新发送");
                timeleft=ordertime   //重置等待时间
                $("#btnCode").removeAttr("disabled");
            }
        }

        //点击获取验证码按钮---获取验证码
        $("#btnCode").click(function(){
            $(this).attr("disabled",true); //防止多次点击
            var mobile = $("#mobile").val();
            if(phoneReg.test(mobile)){
                $.ajax({
                    type:"post",
                    url:"${ctx}/main/customer/sendMsg",
                    data:{
                        mobile:mobile
                    },
                    success:function(result){
                        console.log(result)
                        $("#btnCode").attr("disabled",false);
                        if(result.code=="200"){
                            timeCount(this);
                        }else if(result.code == "existName"){

                            layer.msg("此号码已经注册，请勿重复注册！",{icon:2});
                            return;
                        }else{
                            layer.msg("发送失败，请检查！",{icon:2});
                            return;
                        }
                    }
                })
            }else{
                layer.msg("请输入正确的手机号！",{icon:2});
                return;
            }
        })

        //点击完成跳转登录
       $("#complete").click(function(){
           parent.location.href="${ctx}/redirect/logout";
       })

    })

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

</script>
</body>
</html>