<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>管理后台系统</title>
    <link rel="stylesheet" href="../static/css/login.css">
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/filter.js"></script>
    <!--[if lt IE 9]><script src="../static/js/html5.js"></script><![endif]-->
</head>

<body>
    <section class="container">
        <div class="login">
            <h1>管理员登录</h1>

            <p><input type="text" name="login" class="userID" value="" placeholder="注册手机号"></p>
            <div class="userIDERROR" style="color: red;margin-left: 10px; font-size: small"></div>
            <p><input type="password" name="password" class="passwd" value="" placeholder="密码"></p>
            <div class="passwdDERROR" style="color: red;margin-left: 10px; font-size: small"></div>
            <div class="verify">
                <div class="left_f">
                    <input type="text" class="verifyText" placeholder="验证码">
                    <div class="CodeDERROR" style="color: red;margin-left: 10px; font-size: small"></div>
                </div>
                <div class="right_f">
                    <img class="verifyImg" src="" ALT="">
                </div>
            </div>
            <div class="remember_me">
                <label>
            <input type="checkbox" name="remember_me" id="remember_me">
            记住密码
          </label>
            </div>
            <div class="submit"><input type="submit" id="login" name="commit" value="登录"></div>
        </div>
    </section>
    <script>
        //页面展示自动加载验证码
        $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
        //注册用户点击验证，更换验证码图片
        var flushCode = function() {
            let verifyImg = $(".verifyImg");
            verifyImg.click(function() {
                verifyImg.attr("src","/getVerifyImg?rand=" + new Date().getTime());
            });
        }

        flushCode();
        //点击登录按钮，进行用户登录操作
        $("#login").click(function() {
            login();
        });

        function login() {
            let userID = $.trim($(".userID").val());
            let passwd = $.trim($(".passwd").val());
            let Code = $(".verifyText").val();
            Code = $.trim(Code);
            if (userID.length <= 0) {
                $(".userIDERROR").text("").append("* 登录手机号不能为空！");
                $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                return;
            }
            if (passwd.length <= 0) {
                $(".passwdDERROR").text("").append("* 密码不能为空！");
                $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                return;
            }

            if (Code.length < 4) {
                $(".CodeDERROR").text("").append("* 验证码不正确！");
                $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                return;
            }

            $.ajax({
                url: "/login",
                data: {
                    userID: userID,
                    passwd: passwd,
                    Code: Code
                },
                success: function(data) {
                    if (data.Key === "userID") {
                        $(".userIDERROR").text("").append(data.Msg);
                        $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                    } else if (data.Key === "passWD") {
                        $(".passwdDERROR").text("").append(data.Msg);
                        $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                    } else if (data.Key === "code") {
                        $(".CodeDERROR").text("").append(data.Msg);
                        $(".verifyImg").attr("src",  "/getVerifyImg?rand=" + new Date().getTime());
                    } else if (data.Key === "unactive" || data.Key === "del") {
                        alert(data.Msg);
                        $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                    }
                    //登录成功，跳转到管理界面主页
                    if (data.Key.length <= 0) {
                        window.parent.location = "/index.html";
                    } else {
                        $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                    }
                },
                error: function(e) {
                    alert("系统异常，请求稍后再尝试!");
                    $(".verifyImg").attr("src", "/getVerifyImg?rand=" + new Date().getTime());
                }
            });
        }
    </script>
</body>

</html>