<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>后台管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="/favicon.png" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="/css/admin/font.css">
    <link rel="stylesheet" href="/css/admin/weadmin.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/admin/js.cookie.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <style>
        .login input.layui-btn-disabled, .login input.layui-btn-disabled:active, .login input.layui-btn-disabled:hover {
            border: 1px solid #e6e6e6;
            background-color: #FBFBFB;
            color: #C9C9C9;
            cursor: not-allowed;
            opacity: 1;
        }

        .login-bg {
            background-image: url('/images/login_bg.jpg');
        }

        .login {
            min-height: 990px;
            max-width: 990px;
            padding: 0;
            background-color: transparent;
            margin-top: 10%;
        }

        .login .message {
            margin: 40px 0 0;
            padding: 0 20px;
            background: transparent;
            position: relative;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }

        .login .message h1 {
            font-size: 72px;
        }

        .login .message p {
            font-size: 42px;
            margin-top: 30px;
        }

        .login input[type=text], .login input[type=password] {
            width: 400px;
            height: 60px;
            font-size: 20px;
            color: #555;
            padding: 0 46px;
            margin-top: 30px;
            border-radius: 60px;
        }

        .login input[type=text]::-webkit-input-placeholder, .login input[type=password]::-webkit-input-placeholder {
            color: #BDC3C7;
        }

        .login input[type=text]::-moz-placeholder, .login input[type=password]::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #BDC3C7;
        }

        .login input[type=text]:-moz-placeholder, .login input[type=password]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #BDC3C7;
        }

        .login input[type=text]:-ms-input-placeholder, .login input[type=password]:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #BDC3C7;
        }

        .login input[type=submit] {
            width: 220px;
            height: 70px;
            font-size: 32px;
            font-weight: bold;
            color: #2C3E50;
            background-color: #fff;
            margin: 40px 0 0 100px;
            border-radius: 70px;
        }

        .form-line {
            position: relative;
        }

        .form-line span {
            width: 33px;
            top: 16px;
            right: 40px;
            position: absolute;
        }
    </style>
</head>

<body class="login-bg">

<div class="login">
    <div class="message">
        <h1>智慧矿山</h1>
        <p>智慧矿山视频管理系统</p>
    </div>

    <form method="post" class="layui-form" style="width: 400px;margin:60px auto 0;">
        @csrf
        <div class="form-line">
            <input name="staff_num" placeholder="工号" type="text" lay-verify="required" class="layui-input">
            <span><img src="/images/staff_num.png" alt=""></span>
        </div>
        <div class="form-line">
            <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
            <span><img src="/images/password.png" alt=""></span>
        </div>
        <input class="loginin" value="登 陆" lay-submit lay-filter="login" type="submit">
    </form>
</div>

<script type="text/javascript">
    if (!Cookies.get('isIframe')) {
        Cookies.set('isIframe', true);
        parent.parent.location.reload();
    }

    layui.extend({
        admin: '/js/admin/admin'
    });
    layui.use(['form', 'admin'], function () {
        var form = layui.form
            , admin = layui.admin;

        //监听提交
        function btoaEnhanced(str) {
            return btoa(unescape(encodeURIComponent(str)));
        }

        function atobEnhanced(str) {
            return decodeURIComponent(escape(atob(str)));
        }

        form.on('submit(login)', function (data) {
            $('.loginin').addClass('layui-btn-disabled').prop('disabled', true).val('登陆中……');
            $.ajax({
                type: 'POST',
                url: '/admin/login',
                data: {staff_num: data.field.staff_num, password: btoaEnhanced(data.field.password)},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.message, {anim: 0}, function () {
                            location.href = '/admin';
                        });
                    } else {
                        layer.msg(res.message, {anim: 0}, function () {
                            location.reload();
                        });
                    }
                },
                error: function (res) {
                    console.log(res.responseJSON);
                    layer.msg(res.responseJSON.errors.staff_num[0]);
                },
                complete: function () {
                    $('.loginin').removeClass('layui-btn-disabled').prop('disabled', false).val('登 陆');
                }
            });
            return false;
        });
    });
</script>
<!-- 底部结束 -->

</body>

<script>

</script>
</html>
