<template>
    <div class="container" :style="{backgroundImage :'url(' + require('../assets/bg_login.jpg') + ')'}">
        <div class="login-wrapper" @keyup.enter="login">
            <div class="title">欢迎登录</div>
            <el-form :model="userInfo" style="width: 350px" ref="form">
                <el-form-item prop="username" :rules="{required: true, message: '请输入用户名', trigger: 'blur'}">
                    <el-input v-model="userInfo.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" :rules="{required: true, message: '请输入密码', trigger: 'blur'}">
                    <el-input v-model="userInfo.password" placeholder="密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="记住我">
                    <el-switch v-model="rememberMe"></el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" @click="login" type="primary" style="width: 100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                rememberMe: false,
                loading: false,
                userInfo: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            login() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$http.post({
                            url: '/auth/login',
                            data: {
                                username: this.userInfo.username,
                                password: this.userInfo.password,
                                remember: this.rememberMe
                            }
                        }).then(res => {
                            this.loading = false;
                            if (res.success) {
                                this.$router.replace('/');
                            } else {
                                this.$message.error('登录失败');
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ebebeb;
        background-image: url('https://microball.oss-cn-hangzhou.aliyuncs.com/izouma/application/rawpixel-com-565462-unsplash%20%281%29.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .login-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        background: white;
        border: 1px #eaeaea solid;
        position: absolute;
        right: 100px;
        top: 100px;
        width: 400px;
        .title {
            color: #20a0ff;
            font-weight: bold;
            width: 350px;
            line-height: 60px;
        }
    }
</style>
