<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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="icon" th:href="@{/images/sf.ico}">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/logos.css}" media="all">
</head>
<body>
<canvas id="myid"></canvas>
    <div class="logo">
        <img src="/images/sf.png" alt="User Icon">
        <h2>问题单管理平台</h2>
    </div>
    <div class="main-body" id="myca">
        <div class="login-main">
            <div class="login-top">
                <div class="avatar">
                    <img src="/images/sf.png" alt="Avatar">
                </div>
                <h2>Welcome back</h2>
            </div>
            <form class="layui-form login-bottom">
                <div class="center">
                    <div class="item">
                        <span class="icon icon-2"></span>
                        <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入登录账号"
                               maxlength="24" autocomplete="current-password" />
                    </div>
                    <div class="item">
                        <span class="icon icon-3"></span>
                        <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入密码"
                               maxlength="20" autocomplete="current-password">
                        <span class="bind-password icon icon-4"></span>
                    </div>
                </div>
                <div class="tip">
                    <span class="icon-nocheck"></span>
                    <span class="login-tip">记住密码</span>
                    <!--<a href="javascript:" class="forget-password">忘记密码？</a>-->
                </div>
                <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                    <button id="btn_login" class="login-btn" lay-submit lay-filter="login">
                        <span id="btn_msg">登 录</span>&nbsp;
                        <i id="btn_load" class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
                           style="display: none">&#xe63d;</i>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="footer">
        Copyright© 2025 <span class="padding-5">|</span>
    </div>

<script>
    const  inputs = [
        document.getElementById('username'),
        document.getElementById('password')
    ]

    inputs.forEach(input =>{
        input.addEventListener('input',function () {
            this.value = this.value.replace(/\s+/g,'');
        })
    })
</script>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/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 th:src="@{/js/particle/particle.min.js}" ></script>
<script>
    particle.init('myid');

</script>
<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    // 在页面加载完毕后调用拦截器函数

    layui.use(['form', 'layNotify', 'layer'], function () {

        var form = layui.form,
            layNotify = layui.layNotify;
        var layer = layui.layer;
        var loginStatus = [[${loginStatus}]];
        if (loginStatus === 'redirect') {
            /*Message.error("会话已过期，请重新登录！");*/
            layNotify.notice({
                title: "登录提示",
                type: "warning",
                message: "会话已过期，请重新登录"
            });
            return false;
        }
        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) {
            top.location = self.location;
        }

        // 切换密码显示和隐藏
        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        // 切换记住密码的选择
        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });

        if (localStorage.getItem("wowosign") == "rememberMe") {
            console.log("设置成勾选");
            // 设置成勾选
            $('.icon-nocheck').addClass('icon-check');
        }
        if (localStorage.getItem("username") && localStorage.getItem("password")) {
            console.log("浏览器记住，自动填入账号密码，" + localStorage.getItem("username"))
            $("#username").val(localStorage.getItem("username"));
            $("#password").val(localStorage.getItem("password"));
        } else {
            console.log("不存在localStorage");
        }

        // // 验证码初始化
        // let kaptcha_key = [[${kaptcha_key}]];
        // getKaptcha(kaptcha_key);

        // 验证码点击事件
        // $("#ver_btn").click(function () {
        //     let kaptcha_key = [[${kaptcha_key}]];
        //     getKaptcha(kaptcha_key);
        // });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            let formdata = data.field;
            if (formdata.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (formdata.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            // if (formdata.captcha == '') {
            //     layer.msg('验证码不能为空');
            //     return false;
            // }



            // 未选中时，formdata.rememberMe的值为undefined
            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提交,阻止掉
        });


        // 键盘回车登录
        $('body').keydown(function () {
            if (13 == event.keyCode) {
                $('#btn_login').trigger('click');
            }
        });

        function redirection() {
            AjaxUtil.get({
                contentType: "application/x-www-form-urlencoded", // 默认就是这个
                url: AjaxUtil.ctx + "home/geturl",
                success:function (res) {
                    if (res.code === 0){
                        window.location.replace(res.message);
                        console.log(res.message);
                    }else{
                        layer.msg('系统未配置备用地址！页面自动切换到主页面',{icon:2},function () {
                            location.reload();
                        });
                    }
                },
                error:function (error) {
                    layNotify.notice({
                        title: "登录提示",
                        type: "error",
                        message: "请求失败，请联系系统管理员！"
                    });
                }

            });
        }

        // 登陆中
        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";
        }

        // function getKaptcha(kaptcha_key) {
        //     AjaxUtil.get({
        //         url: AjaxUtil.ctx + "kaptcha/getImage?kaptcha_key=" + kaptcha_key,
        //         dataType: "text",
        //         success: function (result) {
        //             $("#ver_btn").attr("src", result);
        //         },
        //         error: function (error) {
        //             layNotify.notice({
        //                 title: "提示",
        //                 type: "warning",
        //                 message: "获取验证码错误，请联系系统管理员!"
        //             });
        //         }
        //     });
        // }


    });


</script>

</body>
</html>