<template>
    <div class='center'>
        <login v-if="current === 'login'" @changeMode="changeMode" />
        <register v-else-if="current === 'register'" @changeMode="changeMode" />
        <uni-login v-else-if="current === 'uniLogin'" @changeMode="changeMode"></uni-login>
    </div>
</template>

<script setup>
import login from './login.vue'
import register from './register.vue'
import uniLogin from '../uniLogin/uniLogin.vue'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

let current = ref('login')

const changeMode = (mode) => {
    document.querySelector('.center').className = `center ${mode}`
    current.value = mode
}

onMounted(() => {
    if(route.query.mode) {
        changeMode(route.query.mode)
    }
})

</script>

<style scoped>
.center {
    background-image: linear-gradient(to bottom,
            rgba(235, 242, 255, 0.7),
            rgba(210, 230, 255, 0.5),
            rgba(200, 225, 255, 0.3),
            rgba(245, 255, 255, 0.1));

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: rgba(190, 218, 255, 0.2); */
    display: flex;
    justify-content: center;
    border-radius: 10px;
    padding: 110px 10px;
}

@keyframes registAnimation {
    0% {
        padding: 140px 10px;
    }

    100% {
        padding: 180px 10px;
    }
}

@keyframes loginAnimation {
    0% {
        padding: 180px 10px;
    }

    100% {
        padding: 140px 10px;
    }
}

.register {
    animation: registAnimation 0.3s ease-in-out forwards;
}

.login {
    animation: loginAnimation 0.5s ease-in-out forwards;
}
</style>