<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
    <title>更换手机号</title>
    <link rel="stylesheet" href="${ctx }/styles/common/reset.css?ver=5.2" type="text/css">
    <link rel="stylesheet" type="text/css" href="${ctx }/styles/wechat/bindPhone.css" />
    <link rel="stylesheet" href="${ctx }/styles/visitor/layer.css" type="text/css">
    <style>
        .phone-item>label{
        display: block;
        float: left;
        width: 78px;
        line-height: 45px;
        font-size: 15px;
    }
    .phone-item .phone-text{
        width: 238px;
    }
    .phone-item{
        width: 316px;
    }
    .phone-item .phone-code{
        width: 152px;
    }
    .phone-item>button{
        width: 78px!important;
    }
    .bind-btn{
        width: 316px;
    }
    </style>
</head>

<body>
    <input type="hidden" value="${ctx}" id="contextPath" />
    <input type="hidden" value="${oldUrl}" id="oldUrl" />
    <input type="hidden" value="${wechatUrl}" id="wechatUrl" />
    <input type="hidden" id="openId" value="${openId }" />
    <input type="hidden" id="organizationId" value="${organizationId}" />
    <input type="hidden" id="developId" value="${developId }" />
    <div class="bind-phone">
        <div class="bind-phone-logo">
            <div class="bind-logo"></div>
        </div>
        <div class="phone-item">
            <label>新手机号码</label>
            <input type="text" class="phone-text" id="phone" placeholder="请输入新的手机号码" />
        </div>
        <div class="phone-item">
            <label>验 证 码</label>
            <input type="message-code" class="phone-code" id="code" placeholder="请输入短信验证码" />
            <button id="getCode">获取验证码</button>
        </div>
        <button class="bind-btn">确认修改</button>
    </div>
    <script type="text/javascript" src="${ctx}/scripts/common/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${ctx }/plugin/layer/mobile/layer.js?v=4.0"></script>
    <script>
        $(function () {
            var ERROR_OK = 200;
            var contextPath = $("#contextPath").val();
            var openId = GetQueryString("openId");
            if (!openId) {
                openId = sessionStorage.getItem("openId");
            }
            var organizationId = sessionStorage.getItem("orgId");
            var oldUrl = $("#oldUrl").val();
            var developId = $("#developId").val();
            var timer; //timer变量，控制时间
            var count = 60; //间隔函数，1秒执行
            var curCount = 60; //当前剩余秒数
            var code = ""; //验证码
            var oldLocation = window.location.href;

            function sendMessage() { //设置button效果，开始计时
                curCount = count;
                $("#getCode").attr("disabled", "true");
                console.log($("#getCode").val())
                $("#getCode").text(curCount + "s");
                timer = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
            };
            /**
             * timer处理函数
             * 
             */
            function SetRemainTime() {
                if (curCount == 0) {
                    window.clearInterval(timer); //停止计时器
                    $("#getCode").removeAttr("disabled"); //启用按钮
                    $("#getCode").text("获取验证码");
                    code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效   
                    $("#code").val(code);
                } else {
                    curCount--;
                    $("#getCode").text(curCount + "s 重新获取");
                }
            };
            /**
             * 验证手机号
             * @param phone 参数名
             */
            function isPhoneNo(phone) {
            	var pattern = /^1[3456789]\d{9}$/;
                return pattern.test(phone);
            };
            /**
             * 获取url的参数
             * @param name 参数名
             */
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            };
            /**
             * 绑定提交
             * @param mobile, mobileCode 参数名
             */
            function ajaxBind(userId,mobile, mobileCode) {
                $.ajax({
                    url: contextPath + "/wechat/appUser/modifyUserMobile",
                    type: "POST",
                    dataType: "json",
                    data: {
                        userId: userId,
                        userMobile: mobile,
                        authCode: mobileCode
                    },
                    success: function (data) {
                        if (data.code == ERROR_OK) {
                            window.history.go(-1);
                        } else {
                            layer.open({
                                content: data.msg,
                                skin: 'msg',
                                time: 2
                            });
                        }
                    },
                    error: function (data) {
//                        alert("系统繁忙..");
                    }
                });
            };
            /**
             * 获取验证码
             * @param mobile 参数名
             */
            function ajaxCode(mobile) {
                $.ajax({
                    url: contextPath + "/wechat/sms/getAuthCodeNew",
                    type: "POST",
                    dataType: "json",
                    data: {
                        openId: openId,
                        userMobile: mobile,
                        orgId: organizationId
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.code == ERROR_OK) {
                            sendMessage();
                        } else {
                            layer.open({
                                content: data.msg,
                                skin: 'msg',
                                time: 2 //2秒后自动关闭
                            });
                        }
                    },
                    error: function (data) {
//                        alert("系统繁忙..");
                    }
                });
            }
            $("#getCode").click(function () {
                let mobile = $("#phone").val();
                if (!mobile) {
                    layer.open({
                        content: '请输入手机号码',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    return false
                }
                if (!isPhoneNo(mobile)) {
                    layer.open({
                        content: '请输入正确的手机号码',
                        skin: 'msg',
                        time: 2
                    });
                    return false
                }
                ajaxCode(mobile);
            })
            $(".bind-btn").click(function () {
                let mobile = $("#phone").val();
                let codeNumber = $("#code").val();
                let userId = GetQueryString("userId");
                if (!mobile) {
                    layer.open({
                        content: '请输入新的手机号码',
                        skin: 'msg',
                        time: 2
                    });
                    return false
                }
                if (!isPhoneNo(mobile)) {
                    layer.open({
                        content: '请输入正确的手机号码',
                        skin: 'msg',
                        time: 2
                    });
                    return false
                }
                if (!codeNumber) {
                    layer.open({
                        content: '请输入有效的验证码',
                        skin: 'msg',
                        time: 2
                    });
                    return false
                }
                ajaxBind(userId,mobile, codeNumber);
            })
        })
    </script>
</body>

</html>