<template>
    <div class="auth-card" :class="current">
        <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) => {
    current.value = mode
}

onMounted(() => {
    if(route.query.mode) {
        changeMode(route.query.mode)
    } else if (route.query.type && route.query.code) {
        changeMode('uniLogin')
    }
})

</script>

<style scoped lang="less">
@import '@/styles/auth-marketing.less';
</style>