<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {
        /*    background: #1E9FFF;*/
            background-image: url('./static/images/logo.png');
            /* 让背景图片覆盖整个背景区域 */
            background-size: cover;
            /* 防止背景图片重复 */
            background-repeat: no-repeat;
            /* 将背景图片居中显示 */
            background-position: center;
        }
        body:after {
            content:'';
            background-repeat:no-repeat;
            background-size:cover;
            -webkit-filter:blur(3px);
            -moz-filter:blur(3px);
            -o-filter:blur(3px);
            -ms-filter:blur(3px);
            filter:blur(3px);
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            z-index:-1;
        }
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {color:#ecf0f1;font-size:25px;font-weight:bold;}
        .login-form {background-color:#2c3e50;border:1px solid #2980b9;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
        .login-form .layui-form-item {position:relative;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;
            color:#2980b9;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #2980b9;height:36px;width:100%;}
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>问题单管理系统</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="username"></label>
                    <input type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="password"></label>
                    <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="123456">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="xszg">
                    <div class="captcha-img">
                        <img id="captchaPic" src="../images/captcha.jpg">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/lib/jq-module/jquery.particleground.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#7ec7fd',
                lineColor:'#7ec7fd'
            });
        });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
/*            if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            }*/
            if ($('.icon-nocheck').hasClass('icon-check')) {
                localStorage.setItem("username", formdata.username, "7d");
                localStorage.setItem("password", formdata.password, "7d");
                // localStorage.setItem("wowosign", "rememberMe", "7d");
            } else {
                localStorage.removeItem("username");
                localStorage.removeItem("password");
                // localStorage.removeItem("wowosign");
            }
            // 添加一个条件判断
            let password = md5.MD5(formdata.password); // 加密输入的密码
            // 设置按钮为登陆中，此时禁止点击
            logining();

            AjaxUtil.post({
                contentType: "application/x-www-form-urlencoded", // 默认就是这个
                url: AjaxUtil.ctx + "home/doLogin",
                data: {
                    "username": formdata.username,
                    "password": password
                },
                success: function (res) {
                    console.log(res);

                    if (res.code === 0) {
                        layNotify.notice({
                            title: "登录提示",
                            type: "success",
                            message: res.message
                        });
                        setTimeout(function () {
                            window.location.href = AjaxUtil.ctx + "home/index";
                        }, 1500);
                    } else {
                        loginend();
                        layNotify.notice({
                            title: "登录提示",
                            type: "warning",
                            message: res.message
                        });
                        // document.getElementById("ver_btn").click();
                        // 验证码刷新
                        /* document.getElementById("captcha").value = '';*/
                        document.getElementById("password").value = '';
                        console.log(res.message);
                        // 阻止后续操作
                    }
                },
                error: function (error) {
                    loginend();
                    redirection();
                    layNotify.notice({
                        title: "登录提示",
                        type: "error",
                        message: "请求失败，请联系系统管理员！"
                    });

                }
            });

            return false; //阻止表单跳转,layui默认是form提交,阻止掉

            layer.msg('登录成功',{icon:1}, function () {
                window.location = '../index.html';
            });
            return false;
        });


        function redirection() {
            window.location.replace("http://10.208.114.107:8081/home/index")
        }

        // 登陆中
        function logining() {
            document.getElementById("btn_login").setAttribute("disabled", true);//设置不可点击
            document.getElementById("btn_login").style.backgroundColor = '#9abcda';
            document.getElementById("btn_msg").innerText = '登 录 中';
            document.getElementById("btn_load").style.display = "inline-block";
        }

        // 登陆后
        function loginend() {
            document.getElementById("btn_login").removeAttribute("disabled");//去掉不可点击
            document.getElementById("btn_login").style.backgroundColor = '#1E9FFF';
            document.getElementById("btn_msg").innerText = '登 录';
            document.getElementById("btn_load").style.display = "none";
        }
    });
</script>
</body>
</html>