<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html; charset=UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String basePath = request.getContextPath();
    String resourcePath = basePath + "/resource";
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../common/head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/open/login.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/resource/css/open/register.css">
    <title>忘记密码</title>
    <style>
        .input1-left{
            float: left;
            width: 48px;
            height: 34px;
            background-color: #f2f2f2;
            border: solid 1px #dcdfe5;
        }
        .font10{
            width: 48px;
            height: 36px;
            font-size: 12px;
            display: block;
            margin-left:12px;
            margin-top: 9px;
        }
        input{
            margin-left: 0;
        }

    </style>
</head>
<body>
<div class="top01"><!---头部-->
    <div class="top01-main">
        <div class="top-left">
            <img src="<%=resourcePath%>/images/logo_min.png" class="logo">
            <h1 class="top-font-1">衡水大数据</h1>
        </div>
        <div class="top-right" onclick="javascript:window.location.href='<%=basePath%>/open/account/login.htm'">
            <span class="top-font-4">
                返回登录
            </span>
        </div>
    </div>
</div>
<div class="mid09"><!---注册表-->
    <div class="mid09-main">
        <div class="form11">
            <form  method="post" action="" id="formId">
                <p style="text-align: center;color: #222222;font-size: 16px;margin-top:0">修改密码</p>
                <div class="form0">
                    <span class="font">
                        <span class="xinghao" >*</span>用户名
                    </span>
                    <div class="form1">
                        <input type="text" class="input1" name="username" id="username" placeholder="请输入用户名" style="margin-left:0;width: 190px;height: 34px">
                        <div class="tishi4"></div>
                    </div>
                </div>
                <div class="form0">
                            <span class="font">
                                <span class="xinghao">*</span>验证码
                            </span>
                    <div class="form1">
                        <div class="yanzhengma1" style="margin-top: 0">
                            <input type="text" name="captcha" id="captcha" placeholder="验证码" class="input-yanzhengma">
                            <img id="captchaImage" class="yanzhennma-img" src="<%=basePath%>/captcha/image.action">
                            <div class="tishi4"></div>
                        </div>
                    </div>
                </div>
                <div class="form0">
                            <span class="font01">
                                <span class="xinghao" >*</span>手机验证码
                            </span>
                    <div class="form1">
                        <input type="text" name="code" class="input3" placeholder="请输入手机验证码">
                        <input type="button" style="background-color: #2251ac;width: 115px;height: 38px;margin-left: 9px;float: left;color: #ffffff" id="code_btn" value="获取验证码"><br/>
                        <div class="tishi4"></div>
                    </div>
                </div>
                <div class="form0">
                                <span class="font">
                                    <span class="xinghao" >*</span>新密码
                                </span>
                    <div class="form1">
                        <input type="password"  name="password1" class="input4" placeholder="请输入新密码">
                        <div class="tishi4"></div>
                    </div>
                </div>
                <div class="form0">
                                <span class="font01">
                                    <span class="xinghao" >*</span>确认新密码
                                </span>
                    <div class="form1">
                        <input type="password" name="password2" class="input4" placeholder="确认新密码">
                        <div class="tishi4"></div>
                    </div>
                </div>
                <input type="button" class="queren" value="确认" onclick="toForgetPassword()">
            </form>
        </div>
        <div class="line8"></div>
    </div>
</div>
<div class="foot001"><!---底部-->
    <div class="foot01">
        <p class="foot01-main">
            <a  href="##">关于我们</a>
            <span class="span"></span>
            <a href="##">联系我们</a>
            <span class="span"></span>
            <a href="##">新手指导</a>
            <span class="span"></span>
            <a href="##">API使用</a>
            <span class="span"></span>
            <a href="##">微应用使用</a>
            <span class="span"></span>
            <a href="##">常见问题</a>
            <span class="span"></span>
            <a href="##">技术支持</a>
            <span class="span"></span>
        </p>
        <p class="banquan1">Copyright&copy;2017-2018 衡水.com 版权所有</p>
    </div>
</div>
<script type="text/javascript">
    /*获取验证码*/
    $("#captchaImage").click(function(){
        $(this).attr("src","<%=basePath%>/captcha/image.action")
    });

    /*获取手机验证码*/
    $(function(){
        $("#code_btn").on("click", function() {
            $.ajax({
                type: 'POST',
                url: "<%=basePath%>/open/account/getForgetPasswordCode.action", // 请求的action路径
                data: {
                    username: $('#username').val(),
                    captcha:$('#captcha').val()
                },
                dataType: "json",
                success: function(data) {
                    if (data.stateCode==200){
                        alert('发送成功，请注意查收！') ;
                        addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
                        settime($("#code_btn")); //开始倒计时
                    }else{
                        alert(data.msg) ;
                    }
                }
            });
            /*addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
            settime($("#code_btn")); //开始倒计时*/
        })
        var v = getCookieValue("secondsremained") ? getCookieValue("secondsremained") : 0;//获取cookie值
        if(v > 0) {
            settime($("#code_btn")); //开始倒计时
        }
    })

    /*找回密码*/
    function toForgetPassword(){
        $('.tishi4').text('');//清空验证
        var formData = $('#formId').serialize();
        $.post('<%=basePath%>/open/account/forgetPassword.action',formData,function(rep){
            if(rep.stateCode == 200){
                alert("密码修改成功")
            }else{
                for(var item in rep.data){
                    console.info( $("[name='"+item+"']").next().text())
                    $("[name='"+item+"']").parent().children(".tishi4").text("!"+rep.data[item])
                }
            }
        })
    }
    //发送验证码时添加cookie
    function addCookie(name, value, expiresHours) {
        var cookieString = name + "=" + escape(value);
        //判断是否设置过期时间,0代表关闭浏览器时失效
        if(expiresHours > 0) {
            var date = new Date();
            date.setTime(date.getTime() + expiresHours * 1000);
            cookieString = cookieString + ";expires=" + date.toUTCString();
        }
        document.cookie = cookieString;
    }

    //开始倒计时
    var countdown;
    function settime(obj) {
        countdown = getCookieValue("secondsremained");
        var tim = setInterval(function() {
            countdown--;
            obj.attr("disabled", true);
            obj.attr("value", "重新发送(" + countdown + ")");
            if(countdown <= 0 ) {
                clearInterval(tim);
                $(obj).removeAttr("disabled");
                $(obj).attr("value", "重新发送");
            }
            editCookie("secondsremained", countdown, countdown + 1);
        }, 1000) //每1000毫秒执行一次
    }

    //根据名字获取cookie的值
    function getCookieValue(name) {
        var strCookie = document.cookie;
        var arrCookie = strCookie.split("; ");
        for(var i = 0; i < arrCookie.length; i++) {
            var arr = arrCookie[i].split("=");
            if(arr[0] == name) {
                return unescape(arr[1]);
                break;
            }
        }
    }

    //修改cookie的值
    function editCookie(name, value, expiresHours) {
        var cookieString = name + "=" + escape(value);
        if(expiresHours > 0) {
            var date = new Date();
            date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
            cookieString = cookieString + ";expires=" + date.toGMTString();
        }
        document.cookie = cookieString;
    }
</script>
</body>
</html>
