<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台登陆</title>
    <link rel="icon" type="image/x-icon" href="${config_project_logo.configValue!}">
    <link href="https://oss.tcjskd.com/delivery/upload/css/bootstrap3.3.7.min.css" rel="stylesheet">
    <link href="https://oss.tcjskd.com/delivery/upload/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://oss.tcjskd.com/delivery/upload/css/style.min.css" rel="stylesheet">
    <!--对话框-->
    <link href="https://oss.tcjskd.com/delivery/upload/css/animate.css" rel="stylesheet">
    <link href="https://oss.tcjskd.com/delivery/upload/css/style.min.css" rel="stylesheet">
    <link href="https://oss.tcjskd.com/delivery/upload/css/fontawesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://oss.tcjskd.com/delivery/upload/css/drag.css">
    <script type="text/javascript" src="https://oss.tcjskd.com/delivery/upload/js/jquery.min.js"></script>
    <script type="text/javascript" src="https://oss.tcjskd.com/delivery/upload/js/bootstrap.min.js"></script>
    <!--消息提示-->
    <script src="https://oss.tcjskd.com/delivery/upload/js/bootstrap-notify.min.js"></script>
    <script type="text/javascript" src="https://oss.tcjskd.com/delivery/upload/js/lightyear.js"></script>
    <script src="https://oss.tcjskd.com/delivery/upload/js/drag.js"></script>
</head>
<body>
<style>
    body{
        padding: 0;
        margin: 0;
        background: url("${bgimg!}") no-repeat;
        background-size: 100% 100%;
    }
    .lyear-wrapper {
        position: relative;
    }
    .lyear-login {
        display: flex !important;
        min-height: 100vh;
        align-items: center !important;
        justify-content: center !important;
        /*border:#909090 1px solid;
        background:#fff;
        color:#333;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;*/
    }
    .login-center {
        background: #fff;
        min-width: 38.25rem;
        padding: 2.14286em 3.57143em;
        border-radius: 5px;
        margin: 2.85714em 0;
    }
    .login-header {
        margin-bottom: 1.5rem !important;
    }
    .login-center .has-feedback.feedback-left .form-control {
        padding-left: 38px;
        padding-right: 12px;
    }
    .login-center .has-feedback.feedback-left .form-control-feedback {
        left: 0;
        right: auto;
        width: 38px;
        height: 38px;
        line-height: 38px;
        z-index: 4;
        color: #dcdcdc;
    }
    .login-center .has-feedback.feedback-left.row .form-control-feedback {
        left: 15px;
    }
    .imgBtn img{
        width:100%
    }
    @-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}
    .mydiv{
        border:#909090 1px solid;
        background:#fff;
        color:#333;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;
    }

</style>
<div class="row lyear-wrapper">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <a href="http://www.tcjskd.com/" target="_blank"> <img alt="light year admin" src="${config_project_logo.configValue!}" width="100px;" height="100%"> </a>
                <p style="font-size: xx-large;color: #52d3c7">${config_project_name.configValue!}</p>
            </div>
            <form action="#!" method="post">
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="请输入您的账号" class="form-control" name="username" id="username" required="required" />
                    <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left row">
                    <div class="col-xs-7">
                        <input type="text" id="captcha" name="captcha" class="form-control" placeholder="验证码" maxlength="5">
                        <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="col-xs-5">
                        <img src="${ctx}/login/captcha" class="pull-right" id="id_captcha_img"  style="cursor: pointer;" onclick="getCaptcha();" title="点击刷新" alt="captcha">
                    </div>
                </div>
                <!--<div class="form-group has-feedback feedback-left">
                    <div id="wrapper">
                        <div id="drag">
                            <div class="drag_bg"></div>
                            <div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
                                请按住滑块，拖动到最右边
                            </div>
                            <div class="handler handler_bg"></div>
                        </div>
                    </div>

                </div>-->
                    <!--滑块验证码，结束-->
                <div class="form-group" style="margin-top: 20px;">
                    <button class="btn btn-block btn-primary" type="button" onclick="loginValidate(this)" data-loading-text="正在登陆……">立即登录</button>
                </div>
            </form>
            <hr>
            <footer class="col-sm-12 text-center">
                <p class="m-b-0">Copyright © 2019 <a href="https://www.tcjskd.com/" target="_blank">${config_comp_name.configValue!}</a>. All right reserved</p>
            </footer>
        </div>
    </div>
</div>
<script type="text/javascript">
    let result=false;
    function loginValidate(but){
        let data={
            username:$("#username").val(),
            password:$("#password").val(),
            captcha:$("#captcha").val()
        }
        if (!data.username){
            lightyear.notify("您还没有输入账号！", 'danger');
            return;
        }
        if(!data.password){
            lightyear.notify("您还没有输入密码！", 'danger');
            return;
        }
        if(!data.captcha){
            lightyear.notify("请输入验证码！", 'danger');
            return;
        }
        $(but).button('loading');
        $.ajax({
            type:"GET",
            url:" ${ctx}/login/login",
            data:data,
            success:function(res){
                if(res.status!=200){
                    $(but).button('reset');
                    getCaptcha();
                    lightyear.notify(res.message, 'danger');
                }else{
                    window.location.href="${ctx}"+res.body;
                    return;
                }
            },
            error:function(jqXHR){
                $(but).button('reset');
                getCaptcha();
                lightyear.notify("您真牛，服务器都懵逼了......", 'danger');
                console.log("Error: "+jqXHR.status);
            }
        });
    }
    function getCaptcha() {
        $("#id_captcha_img").attr('src',"${ctx}/login/captcha?d="+Math.random());
    }
</script>
<script>

    $('#drag').drag({},function (x) {
        result=true;
        console.log("success");
    });
</script>
</body>
</html>