<div id="app" v-cloak
     v-loading="loading"
     element-loading-text="登录中..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.7)">

    <canvas id="canvas" style="position: absolute;top: 0;left: 0;right: 0;bottom:"></canvas>

    <div class="wrapper">
        <div class="login-box">
            <div class="title">系统登录</div>

            <el-form class="content" :model="form" :rules="rules" ref="form">
                <el-form-item prop="username">
                    <el-input v-model="form.username" size="small" clearable prefix-icon="el-icon-user"
                              placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="form.password" size="small" clearable prefix-icon="el-icon-lock"
                              placeholder="请输入密码" type="password" show-password></el-input>
                </el-form-item>

                <el-form-item prop="verifyCodeCode">
                    <el-input v-model="form.verifyCodeCode" @keyup.enter.native="submitForm('form')" size="small" clearable placeholder="请输入验证码">
                        <template slot="append">
                            <el-image :src="'data:image/png;base64,'+verifyCodeBase64" :fit="'fill'" lazy
                                      @click="refreshVerifyCode"></el-image>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width: 100%" size="small" :loading="loading"
                               :disabled="loading" @click="submitForm('form')">登录
                    </el-button>
                </el-form-item>
            </el-form>

            <a class="tip">系统登录</a>
        </div>
    </div>

</div>
<style>
    body {
        overflow: hidden;
    }

    #app {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .wrapper {
        width: 500px;
        height: 450px;
        background: #42424263;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 0 1px #afafaf52;
    }

    .wrapper .login-box {
        display: inline-block;
        background: #fff;
        text-align: left;
    }

    .wrapper .login-box .title {
        line-height: 50px;
        border-bottom: 1px solid #e8e8e8;
        font-weight: bold;
        text-align: left;
        padding-left: 20px;
        font-size: 15px;
        height: 50px;
        color: #757575;
    }

    .wrapper .login-box .content {
        width: 300px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 0 20px;
    }

    .wrapper .login-box .el-input-group__append {
        padding: 0;
        border: 0;
    }

    .wrapper .login-box .el-image {
        width: 80px;
        height: 32px;
        vertical-align: bottom;
    }

    .wrapper .login-box .tip {
        padding: 5px;
        display: inline-block;
        text-align: center;
        color: #b7b7b7;
        width: 100%;
        margin-bottom: 10px;
    }
</style>

<script type="text/javascript">
    var app = new Vue({
        mixins: [mixinBase],
        el: "#app",
        data: {
            form: {
                username: '',
                password: '',
                verifyCode: '',
                verifyCodeId: '',
                verifyCodeCode: ''
            },
            verifyCodeBase64: "",
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'change'}
                ],
                verifyCodeCode: [
                    {required: true, message: '请输入验证码', trigger: 'change'}
                ]
            }
        },
        mounted: function () {
            // 加载验证码
            this.refreshVerifyCode();
            // 加载背景特效
            this.drawBackground();
        },
        methods: {
            submitForm: function (formName) {
                this.$refs[formName].validate(function (valid) {
                    if (valid) {
                        this.loading = true;
                        var start = new Date().getMilliseconds();
                        new Ajax("wframe", "auth", "login").post(this.form, function (response) {
                            if (response.errors.length > 0) {
                                this.loading = false;
                                nav.e(response.errors[0].message);
                            } else {
                                var end = new Date().getMilliseconds();
                                var interval = end - start;
                                // 防止跳转太快计划延迟
                                if (interval > 1500) {
                                    nav.toHome();
                                } else {
                                    setTimeout(nav.toHome, 1500 - interval);
                                }
                            }
                        }.bind(this));
                    } else {
                        return false;
                    }
                }.bind(this));
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            refreshVerifyCode: function () {
                new Ajax("wframe", "auth", "verifyCode").post({}, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.form.verifyCodeId = response.verifyCodeId;
                        this.verifyCodeBase64 = response.verifyCodeBase64;
                    }
                }.bind(this));
            },
            drawBackground: function () {
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");

                // 设置全屏
                var o = document.getElementById("app");
                var width = o.offsetWidth;
                var height = o.offsetHeight;
                canvas.width = width;
                canvas.height = height;
                //设置背景色
                context.clearRect(0, 0, width, height);
                context.fillStyle = "#091044";
                context.fillRect(0, 0, width, height);

                // 获取随机星星
                var stars = [];
                var p = 30;
                for (var i = 0; i < width; i += p) {
                    for (var j = 0; j < height; j += p) {
                        stars.push({
                            x: p * 1.5 * Math.random() + i,
                            y: p * 1.5 * Math.random() + j,
                            r: 0.8 * Math.random(),
                            a: Math.random() + 0.1,
                            c: Math.random() > 0.6
                        });
                    }
                }

                // 定时器
                var v = 0;
                if (window["timer"]) {
                    clearInterval(window["timer"]);
                }
                window["timer"] = setInterval(function () {
                    context.clearRect(0, 0, width, height);
                    context.fillStyle = "#091044";
                    context.fillRect(0, 0, width, height);
                    var s = Math.sin(v % Math.PI);
                    v += Math.PI / 100;
                    for (var i = 0; i < stars.length; i++) {
                        var star = stars[i];
                        context.beginPath();
                        context.arc(star.x, star.y, star.r, 0, Math.PI * 2);
                        context.closePath();
                        if (star.c) {
                            context.fillStyle = "rgba(255,255,255," + s * star.a + ")";
                        } else {
                            context.fillStyle = "rgba(255,255,255," + star.a + ")";
                        }
                        context.fill();
                    }
                }, 50);

                window.onresize = this.drawBackground;
            }
        }
    })
</script>
