<%@ 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">
</head>
<body>
<div class="register-contain">
    <div>
        <!--第一步-->
        <div class="register register1">
            <img src="${ctxPlugin}/static/img1/step1.png" alt="" width="100%">
            <h1 class="step1">第一步：注册账号</h1>
            <div>
                <div class="register-input">
                    <span><b class="mark">*</b>注册手机号：</span>
                    <div>
                        <input type="text" placeholder="输入手机号作为登录账号" name="mobile" id="mobile">
                    </div>
                </div>
                <div class="register-input">
                    <span><b class="mark">*</b>设置密码：</span>
                    <div>
                        <input type="text" placeholder=" 6-16位数字、字母或组合 " name="password" id="password">
                    </div>
                </div>
                <div class="register-input">
                    <span><b class="mark">*</b>短信验证码：</span>
                    <div>
                        <input type="text" placeholder="请输入短信验证码" id="confirmCode" name="confirmCode">
                        <button type="button" id="btnCode">获取验证码</button>
                    </div>
                </div>
                <p class="read">
                    <label for="read" id="readLabel">
                        <input type="checkbox" id="read">
                        我已阅读并同意
                    </label>
                   <%-- <a href="http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc=" target="_blank" rel="nofollow">《能辉系统服务商使用协议》</a>--%>
                </p>
                <button class="next-register" id="btnNext">下一步</button>
            </div>
        </div>
        <!--第二步-->
        <div class="register register2 hide">
            <img src="${ctxPlugin}/static/img1/step2.png" alt="" width="100%">
            <h1 class="step1">第二步：完善信息</h1>
            <div>
                <div class="register-input">
                    <span><b class="mark">*</b>企业名称：</span>
                    <div>
                        <input type="text" placeholder="请输入企业名称" id="businessName" name="businessName">
                    </div>
                </div>
                <div class="register-input">
                    <span><b class="mark">*</b>企业地址：</span>
                    <div>
                        <select name="province" id="province">
                            <option value="">请选择</option>
                            <c:forEach items="${province}" var="pro">
                            <option value="${pro.columns.ProvinceName}" data-id="${pro.columns.ProvinceID}">${pro.columns.ProvinceName}</option>
                            </c:forEach>
                        </select>
                        <select name="city" id="city">
                            <option value="">请选择</option>
                        </select>
                        <select name="area" id="area">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="register-input">
                    <span class="font-fff">a</span>
                    <div>
                        <input type="text" placeholder="请输入详细地址" id="address" name="address">
                    </div>
                </div>

                <button class="next-register" id="btnNext2">下一步</button>
            </div>
        </div>
        <!--第三步-->
        <div class="register register3 hide">
            <img src="${ctxPlugin}/static/img1/step3.png" alt="" width="100%">
            <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 class="foot">
        <div>
            为了您有更好的系统使用体验，我们建议您使用：<a href=""><img src="${ctxPlugin}/static/img1/fireFox.png"/>火狐浏览器</a><a href=""><img src="${ctxPlugin}/static/img1/chrome.png"/>谷歌浏览器</a>
        </div>
        <p>Copyright © 能辉科技有限公司</p>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var phoneReg = /^[1][3,4,5,7,8][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')
            }
        })

        //下一步(1)
        $('#btnNext').on('click',function(){
            var re = new RegExp(passwordReg)
            var mobile = $("#mobile").val();  //手机号码
            if(isBlank(mobile) || !phoneReg.test(mobile)){
                layer.msg("请输入11位有效数字组合的手机号码！",{icon:2});
                return;
            }
            var password = $("#password").val();  //密码
            if(isBlank(password)){
                layer.msg("登录密码不能为空，请先设置登录密码！",{icon:2});
                return;
            }else if(!re.test(password)){
                layer.msg("登录密码为6-16位数字、字母或组合！",{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;
            }
           var flag = $("#readLabel").hasClass("hasRead");
            if(flag == false){
                layer.msg("请勾选阅读同意后执行下一步操作！",{icon:2});
                return;
            }
            $.ajax({
                type:"post",
                url:"${ctx}/register/checkConfirmCode",//校验输入的验证码和手机获取的是否一致
                data:{
                    confirmCode:confirmCode,
                    mobile:mobile
                },
                success:function(result){
                    if(result=="ok"){
                        $(".register2").removeClass("hide");
                        $(".register1").addClass("hide");
                        $(".register3").addClass("hide");
                    }else if(result == "existName"){
                        layer.msg("此号码已经注册，请勿重复注册！",{icon:2});
                        return;
                    }else if(result == "wrongMsg"){
                        layer.msg("您的短信验证码输入错误，请重新输入！",{icon:2});
                        return;
                  }
                }
            })

        })
        var siteckec = false;
        //下一步(2)
        $('#btnNext2').on('click',function(){
            if(siteckec){
                return ;
            }

            var mobile = $("#mobile").val();  //手机号码
            var password = $("#password").val();  //密码
            var businessName = $("#businessName").val(); //企业名称
            if(isBlank(businessName)){
                layer.msg("请输入企业名称！",{icon:2});
                return;
            }
            var province = $("#province").find("option:selected").text(); //省
            if(isBlank(province) || "请选择"==province){
                layer.msg("请选择省份！",{icon:2});
                return;
            }
            var city = $("#city").find("option:selected").text(); //市
            if(isBlank(city) || "请选择"==city){
                layer.msg("请选择市！",{icon:2});
                return;
            }
            var area = $("#area").find("option:selected").text(); //区
            if(isBlank(area) || "请选择"==area){
                layer.msg("请选择区！",{icon:2});
                return;
            }
            var address = $("#address").val(); //地址
            if(isBlank(address)){
                layer.msg("请输入详细地址！",{icon:2});
                return;
            }
            siteckec = true;
            $.ajax({
                type:"post",
                url:"${ctx}/register/saveInfo",
                data:{
                    mobile:mobile,
                    password:password,
                    businessName:businessName,
                    province:province,
                    city:city,
                    area:area,
                    address:address
                },
                success:function(result){
                    siteckec = false;
                    if(result.code=="200"){
                        $(".register3").removeClass("hide");
                        $(".register1").addClass("hide");
                        $(".register2").addClass("hide");
                    }else if(result.code=="205"){
                        layer.msg("注册失败！",{icon:2});
                        return;
                    }else if(result.code=="208"){
                        layer.msg("此号码已经注册，请勿重复注册！",{icon:2});
                        return;
                    }
                },complete:function(){
                    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}/register/sendMsg",
                    data:{
                        mobile:mobile
                    },
                    success:function(result){
                        $("#btnCode").attr("disabled",false);
                        if(result=="ok"){
                            timeCount(this);
                        }else if(result == "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";
       })

        $("#province").change(function(){
            var province = $(this).find("option:selected").attr("data-id");
            $("#city").empty()
            $("#area").val("");
            if(isBlank(province)){
                $("#city").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getCitysByProId",
                data:{
                    province:province
                },
                success:function(result){
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html =" <option value=''>请选择</option>";
                    for(var i=0;i<result.length;i++){
                        var city = result[i];
                        html =html+ '<option value="'+city.columns.CityName+'" data-id="'+city.columns.CityID+'">'+city.columns.CityName+'</option>';
                    }
                    $("#city").append(html);
                    form.render('select');
                }
            });
        })

        $("#city").change(function(){
            var city = $(this).find("option:selected").attr("data-id");
            $("#area").empty()
            if(isBlank(city)){
                $("#area").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getAreaByCityId",
                data:{
                    city:city
                },
                success:function(result){
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html ="<option value=''>请选择</option>";
                    for(var i=0;i<result.length;i++){
                        var area = result[i];
                        html =html+ '<option value="'+area.columns.DistrictName+'" >'+area.columns.DistrictName+'</option>';
                    }
                    $("#area").append(html);
                    form.render('select');
                }
            });
        })



    })

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

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