<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <jsp:include page="head.jsp"/>
    <title>走马框架</title>
    <style>
        #login-page {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #efeeee;

        }

        #login-page .login-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 500px;
            height: 445px;
            border-radius: 10px;
            background: white;
            border: 1px #eaeaea solid;
            box-shadow: 0 0 25px #cac6c6;

        }

        #login-page .login-form .title {
            color: #20a0ff;
            font-weight: bold;
            font-size: 40px;
            text-align: center;
            line-height: 2.2;
            font-family: sans-serif;
        }

        #login-page .login-form .el-form-item {
            width: 80%;
        }

        #login-page .login-form .el-form-item button {
            width: 100%;
        }

        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset;
            -webkit-text-fill-color: #333;
        }

        .fa {
            font: normal normal normal 14px/1 FontAwesome !important;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="login-page" @keyup.enter="login">
        <el-form class="login-form">
            <el-form-item>
                <div class="title">走马框架 Dashboard</div>
                <el-input
                        name="user"
                        :autofocus="true"
                        auto-complete="on"
                        placeholder="请输入用户名"
                        icon=" fa fa-user"
                        v-model="username">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                        name="pwd"
                        auto-complete="on"
                        placeholder="请输入密码"
                        type="password"
                        icon=" fa fa-lock"
                        v-model="password">
                </el-input>
            </el-form-item>
            <el-form-item class="input-group">
                <el-input
                        style="width: 280px;"
                        placeholder="请输入验证码"
                        icon=" fa fa-check"
                        v-model="code">
                </el-input>
                <img style="height: 36px; float: right;" src="../auth/image" ref="img" @click="refresh">
            </el-form-item>
            <el-form-item>
                <label>记住我？</label>
                <el-switch
                        v-model="rememberMe"
                        on-text=""
                        off-text="">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button @click.native="login" type="primary" :loading="isBtnLoading">{{btnText}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>

<script language="javascript"> //防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});
</script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                username: '',
                password: '',
                code: '',
                rememberMe: false,
                isBtnLoading: false
            };
        },
        computed: {
            btnText: function () {
                if (this.isBtnLoading) return '登录中...';
                return '登录';
            }
        },
        methods: {
            login: function () {
                this.isBtnLoading = true;
                $.post({
                    url: '../super/login',
                    data: {
                        username: this.username,
                        password: this.password,
                        code: this.code,
                    }
                }).then(function (res) {
                    this.isBtnLoading = false;
                    if (res.success) {
                        window.location.href = 'index';
                    } else {
                        this.$message.error(res.error);
                        this.refresh();
                    }
                }.bind(this));
            },
            refresh: function () {
                this.$refs.img.src = '../auth/image' + '?' + Math.random();
            }
        }
    })
</script>
</html>
