<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html; charset=UTF-8"%>
<%@ page import="org.apache.commons.lang.StringEscapeUtils"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>兰亭集智综合管理后台-登录页面</title>
    <jsp:include page="../common/head.jsp"></jsp:include>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/resource/css/login.css">
    <script type="text/javascript">
        $(function(){
            //得到焦点
            $("#password").focus(function(){
                $("#left_hand").animate({
                    left: "150",
                    top: " -38"
                },{step: function(){
                    if(parseInt($("#left_hand").css("left"))>140){
                        $("#left_hand").attr("class","left_hand");
                    }
                }}, 2000);
                $("#right_hand").animate({
                    right: "-64",
                    top: "-38px"
                },{step: function(){
                    if(parseInt($("#right_hand").css("right"))> -70){
                        $("#right_hand").attr("class","right_hand");
                    }
                }}, 2000);
            });
            //失去焦点
            $("#password").blur(function(){
                $("#left_hand").attr("class","initial_left_hand");
                $("#left_hand").attr("style","left:100px;top:-12px;");
                $("#right_hand").attr("class","initial_right_hand");
                $("#right_hand").attr("style","right:-112px;top:-12px");
            });
            $("#btnLogin").bind("click",function(){
                var win = null;
                $.ajax({
                    type:"post",//请求方式
                    url:"<%=basePath %>/passport/login.action",//发送请求地址
                    timeout:30000,//超时时间：30秒
                    dataType:"json",//设置返回数据的格式
                    data: {username:$("#username").val(),password:$("#password").val(),captcha:$("#captcha").val()},
                    //请求成功后的回调函数 data为json格式
                    beforeSend:function(XMLHttpRequest){
                        win=$.messager.progress({
                            title:'密钥校验',
                            msg:'正在校验用户信息...',
                            interval:500
                        });
                    },
                    success:function(data){
                        if(data.status==2001){
                            $.toast({text: '授权成功,正在跳转...',position:'mid-center',allowToastClose: false,loader: false,afterHidden: function () {
                                window.location.href ="<%=basePath%>/main.action";
                            }});
                        }else{
                            $.messager.alert('温馨提示',data.message);
                        }
                    },
                    complete:function(XMLHttpRequest, textStatus){
                        $.messager.progress('close');
                    },
                    //请求出错的处理
                    error:function(){
                        alert("请求出错");
                    }
                });
            });
        });
    </script>
</head>
<body>
<div id="login_index_top_div" class="top_div"></div>
<div style="background: #ffffff; margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 240px; text-align: center;">
    <div style="width: 165px; height: 96px; position: absolute;">
        <div class="tou"></div>
        <div class="initial_left_hand" id="left_hand"></div>
        <div class="initial_right_hand" id="right_hand"></div>
    </div>
    <p style="padding: 30px 0px 10px; position: relative;">
        <span  class="u_logo"></span><input class="ipt" id="username" type="text" placeholder="请输入用户名或邮箱" value="">
    </p>
    <p style="position: relative;"><span class="p_logo"></span>
        <input class="ipt" id="password" type="password" placeholder="请输入密码" value="">
    </p>
    <p style="position: relative;margin-top: 10px;">
        <input class="ipt" id="captcha" type="text" placeholder="请输入验证码" style="vertical-align: middle;width: 200px;padding-left: 10px;" value=""><img id="captchaImage" src="<%=basePath%>/captcha/image.action" style="vertical-align: middle;width: 110px;">
    </p>
    <div style="height: 50px; line-height: 50px; margin-top: 30px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
        <p style="margin: 0px 35px 20px 45px;">
              <a id="btnLogin" class="easyui-linkbutton" style="padding-left: 10px;padding-right: 10px;"  href="javascript:void(0);">登录</a>
        </p>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        if($("#login_index_top_div").parents(".panel-body").length>0){
            window.location.href="<%=basePath%>/passport/login.htm";
        }
    });
    $(document).keydown(function () {
        var theEvent=window.event||arguments.callee.caller.arguments[0];
        if(theEvent.keyCode==13){
            $("#btnLogin").click();
        }
    });
    $("#captchaImage").click(function(){
        $(this).attr("src","<%=basePath%>/captcha/image.action")
    });
</script>
</body>
</html>
