<template>
    <div class="box" ref="vantaRef" style="width: 100%; height: 100vh">
        <Row>
            <Col span="24" :lg="{ span: 8, offset: 8 }">
            <div class="card">
                <div class="login">
                    <Login @on-submit="handleSubmit">
                        <UserName name="name" :value="User.name" />
                        <Password name="password" :value="User.password" />
                        <Submit />
                    </Login>
                </div>
            </div>
            </Col>
        </Row>

    </div>
</template>
<script>
import * as THREE from 'three'//导入样式
import BIRDS from 'vanta/src/vanta.birds'//导入动态样式逻辑
export default {
    data() {
        return {
            User: {
                name: null,
                password: null
            }
        }
    },
    methods: {
        handleSubmit(valid, { name, password }) {
            if (valid) {
                this.$request("post", "user/login", { name, password }, this, (data) => {
                    this.$store.commit("setusername", data.data.name);
                    this.$store.commit("settoken", data.data.token);
                    this.$store.commit("setid", data.data.id);
                    localStorage.setItem("token", data.data.token);
                    localStorage.setItem("name", name);
                    localStorage.setItem("password", password);
                    this.$request('get', 'user/userdetail', null, this, (data) => { localStorage.setItem('userinfo', JSON.stringify(data.data)); })
                    this.$router.push("/home");
                })
            }
        }
    },
    mounted() {
        this.vantaEffect = BIRDS({
            el: this.$refs.vantaRef,
            THREE: THREE
        })

        VANTA.BIRDS({
            el: this.$refs.vantaRef,
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
            scale: 1.0,
            color1: 14381274,
            color2: 16443110,
        });
    },

    created() {
        this.User.name = localStorage.getItem("name") || null;
        this.User.password = localStorage.getItem("password") || null
    }
}
</script>
<style>
.card {
    height: 300px;
    background: rgba(103, 176, 185, 0.7);
    transform: translateY(90%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 30px 5px 15px 5px;
    text-align: center;
}

.login {
    max-width: 400px;
    margin: 0 auto !important;
    transform: translateY(40%);
}
</style>
