<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录页</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            background-image: url(../images/login.png);
            background-size: 100% 100%;
            overflow: hidden;
        }
        .login-main{
            top: calc(50% - 120px);
            width: 328px;
            height: 240px;
            padding: 17px;
            box-shadow: 0px 0px 10px #0f0f29;
            border: 1px solid #1d559e;
            background-color: #0c275a6b;
        }
        .login-main header{
            font-size: 23px;
            color: #54c5e6;
            margin-top:0px;
        }
        .login-main form .login-btn button{
            background-color: #050725a6;
        }
        .text {
            margin-top: 39px;
            letter-spacing: 12px;
            margin-bottom: 60px;
            font-size: 70px;
            font-family: cursive;
            font-weight: 700;
            background-image: -webkit-linear-gradient(top, #ffffff, #dcc51e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="text">视频分析系统</div>
<div class="login-main">
    <header class="layui-elip">登录</header>
    <form class="layui-form">
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="required" lay-vertype="tips" placeholder="请输入账号"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="password" name="password" lay-verify="required" lay-vertype="tips" placeholder="请输入密码"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <!--<div class="layui-input-inline" th:if="${loginVerify}">-->
            <!--<input name="captcha" lay-verify="required" placeholder="验证码" style="width:50%;" type="text"-->
                   <!--class="layui-input-inline layui-input">-->
            <!--<img style="margin-bottom: 15px;" onclick="generateCaptcha(this)"-->
                 <!--th:src="@{/captcha(VARCHAR=${new java.util.Date().getTime()})}" id="aaa"/>-->
        <!--</div>-->
        <div class="layui-input-inline login-btn">
            <button lay-submit lay-filter="login" class="layui-btn layui-btn-blue">登录</button>
        </div>
        <!--<hr/>-->
        <!--<p>-->
        <!--<a th:href="@{/register}" class="zadmin-left">立即注册</a>-->
        <!--<a href="javascript:" class="zadmin-right">忘记密码？</a>-->
        <!--</p>-->
        <!--<br><br>-->
        <!--<div class="layui-input-inline">-->
        <!--<div class="layui-form-mid layui-word-aux layui-login-tips">第三方账号登录: </div>-->
        <!--<img th:src="@{/images/github.png}" onclick="oauth2_github()" class="layui-login-oauth-icon" title="Github 登录">-->
        <!--<img th:src="@{/images/gitee.png}" onclick="oauth2_gitee()" class="layui-login-oauth-icon" title="Gitee 登录">-->
        <!--</div>-->
    </form>
</div>

<script th:src="@{/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>

<script type="text/javascript">

    function oauth2_github() {
        $.get('/oauth2/render/github', function (data) {
            console.log(data);
            handlerResult(data, renderDone);
        });
    }

    function oauth2_gitee() {
        $.get('/oauth2/render/gitee', function (result) {
            handlerResult(result, renderDone);
        });
    }

    function renderDone(data) {
        var winObj = window.open(data, 'newwindow', 'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
        var loop = setInterval(function () {
            if (winObj.closed) {
                clearInterval(loop);
                window.location.href = '/main?=timestap' + new Date().getTime();
            }
        }, 1000);
    }

    // 如果在 iframe 中, 则跳出 iframe
    if (self !== top) {
        top.location.href = location.href;
    }
    $(function () {
        layui.use(['form'], function () {
            // 操作对象
            var form = layui.form;
            form.on('submit(login)', function (data) {
                $.post('login', data.field, function (result) {
                    handlerResult(result, loginDone);
                });
                return false;
            });
        });
    });


//    function generateCaptcha(obj) {
//        $(obj).attr("src", "/captcha?VARCHAR=" + (new Date()).valueOf());
//    }

    function loginDone(obj) {
        setCookie('bjpt_realName',obj.username,7);
        setCookie('bjpt_deptId',obj.deptId,7);
        setCookie('bjpt_Name',obj.realName,7);
        setCookie('bjpt_userId',obj.userId,7);
        setTimeout(function () {
            layer.msg("登陆成功, 即将跳转到首页!", {
                icon: 1,
                time: 1000
            }, function () {
                location.href = '/main?=timestap' + new Date().getTime();
            });
        }, 300);
    }
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
</script>
</body>
</html>