<template>
    <div :id="id" ref="container">
        <div class="loading-wave">
            <div class="stick"></div>
            <div class="stick"></div>
            <div class="stick"></div>
            <div class="stick"></div>
            <div class="stick"></div>
            <div class="stick"></div>
            <h1>Loading...</h1>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { loadMicroApp } from 'qiankun';
import { closePage, setTitle } from '@/layout'
import { useRoute } from 'vue-router';
const $route = useRoute();



const id = 'MicroAppContainer'
const container = ref(null)
const error = ref(null)
const app = ref(null)
onMounted(() => {
    console.log('mounted basic');
    const { entry, title } = $route.meta
    try {
        if (!app.value) {
            app.value = loadMicroApp({
                name: $route.name,
                entry: entry,
                container: container.value,
                props: {
                    setTitle,
                    closePage
                }
            })
            setTitle(title)
        }

    } catch (e) {
        error.value = e
    }
})

onUnmounted(() => {
    console.warn('unmount basic')
    app.value && app.value.unmount();
    app.value = null
})


</script>

<style scoped>
.loading-wave{
    width: 180px;
    margin: 30px auto;
}

.loading-wave h1 {
    font-family: 'Lato';
    color: #aeaeae;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 1.5px;
    text-align: center;
    width: 155px;
    margin-top: 20px;
    animation: fade 2s infinite;
}
.stick {
    width: 30px;
    height: 3px;
    background: #aeaeae;
    display: inline-block;
    margin-left: -8px;
}
.stick:nth-child(n) {
    transform: rotate(30deg);
    animation: fall 2s infinite;
}

.stick:nth-child(2n) {
    transform: rotate(-30deg);
    animation: rise 2s infinite;
}

@keyframes rise {
    50% {
        transform: rotate(30deg);
    }
}


@keyframes fall {
    50% {
        transform: rotate(-30deg);
    }
}


@keyframes fade {
    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

</style>