<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>登录</title>
    <link href="../static/component/pear/css/pear.css" rel="stylesheet"/>
    <link href="../static/admin/css/other/login.css" rel="stylesheet"/>
    <link href="../static/admin/css/variables.css" rel="stylesheet"/>
    <script>if (window.self !== window.top) {
        top.location.reload();
    }</script>
</head>

<body>
<div class="login-page" style="background-image: url(../static/admin/images/background.svg)">
    <div class="layui-row">
        <div class="layui-col-sm6 login-bg layui-hide-xs">
            <img alt="" class="login-bg-img" src="../static/admin/images/banner.png"/>
        </div>
        <div class="layui-col-sm6 layui-col-xs12 login-form">
            <div class="layui-form">
                <div class="form-center">
                    <div class="form-center-box">
                        <div class="top-log-title">
                            <!--                            <img class="top-log" src="http://www.layui-vue.com/assets/logo.685dda16.jpg" alt=""/>-->
                            <span>{{.title}}</span>
                        </div>
                        <!--                        <div class="top-desc">-->
                        <!--                            以 超 乎 想 象 的 速 度 构 建 内 部 工 具-->
                        <!--                        </div>-->
                        <div style="margin-top: 30px;">
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </div>
                                    <input autocomplete="off" class="layui-input" lay-verify="required" name="username"
                                           placeholder="账户">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </div>
                                    <input autocomplete="off" class="layui-input" lay-affix="eye"
                                           lay-verify="required|confirmPassword" name="password" placeholder="密码"
                                           type="password" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-snowflake"></i>
                                    </div>
                                    <input autocomplete="off" class="layui-input" lay-affix="eye"
                                           name="totpCode" placeholder="二次验证" value="">
                                </div>
                            </div>
                            <div class="tab-log-verification">
                                <div class="verification-text">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-auz"></i>
                                        </div>
                                        <input autocomplete="off" class="layui-input" lay-verify="required" name="code"
                                               placeholder="验证码" value="">
                                    </div>
                                </div>
                                <img alt="" class="verification-img" id="captchaImage" src=""/>
                            </div>
                            <div class="layui-form-item">
                                <div class="remember-passsword">
                                    <div class="remember-cehcked">
                                        <input lay-skin="primary" name="remember" title="记住密码" type="checkbox">
                                    </div>
                                </div>
                            </div>
                            <div class="login-btn">
                                <button class="layui-btn login" lay-filter="login" lay-submit type="button">登 录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 资 源 引 入 -->
<script src="../static/component/layui/layui.js"></script>
<script src="../static/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'button', 'popup'], function () {
        const form = layui.form;
        const button = layui.button;
        const popup = layui.popup,
            $ = layui.jquery,
            layer = layui.layer;
        //得到图形验证码和id
        document.getElementById("captchaImage").src = "/getVerifyImg?rand=" + new Date().getTime()
        // 读取缓存
        const loginInfo = localStorage.getItem("loginInfo");
        if (loginInfo !== "" && loginInfo !== null) {
            try {
                const loginInfoObj = JSON.parse(decrypt(loginInfo));
                $("input[name='username']").val(loginInfoObj.username);
                $("input[name='password']").val(loginInfoObj.password);
                $("input[name='remember']").prop("checked", true);
            } catch (e) {
                console.error(e)
            }
        }

        function referCaptchaImage() {
            document.getElementById("captchaImage").src = "/getVerifyImg?rand=" + new Date().getTime()
        }

        $("#captchaImage").click(function () {
            referCaptchaImage();
        })
        setInterval(function () {
            referCaptchaImage()
        }, 180 * 1000);
        // 登 录 提 交
        form.on('submit(login)', function (data) {
            const loader = layer.load();
            const btn = button.load({elem: '.login'});
            $.ajax({
                type: "POST",
                url: "/login",
                dataType: 'json',
                data: {
                    userID: data.field.username,
                    passwd: data.field.password,
                    Code: data.field.code,
                    totpCode: data.field.totpCode,
                },
                dataType: "JSON",
                success: function (result) {
                    console.log(result)
                    if (result.Code === 0) {
                        layer.close(loader);
                        btn.stop();
                        if (data.field.remember) {
                            // 加密保存登录信息到 localStorage
                            localStorage.setItem("loginInfo", encrypt(JSON.stringify(data.field)));
                        } else {
                            localStorage.removeItem("loginInfo");
                        }
                        window.parent.location = "/index.html";
                    } else {
                        layer.close(loader);
                        btn.stop();
                        referCaptchaImage();
                        layer.msg(result.Msg);
                        return false;
                    }
                }
            });
        });
    })

    function encrypt(rawData) {
        try {
            const base64Encoded = btoa(rawData);
            return base64Encoded;
        } catch (error) {
            console.log(error);
            return rawData;
        }
    }

    function decrypt(rawData) {
        try {
            const base64Decoded = atob(rawData);
            return base64Decoded;
        } catch (error) {
            console.log(error);
            return rawData;
        }
    }
</script>
</body>
</html>
