<template>
    <component :is="layout">
            <router-view />
    </component>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
    setup(): any {
        const route = useRoute()
        const default_layout = ref('default')

        window.onhashchange = function (e) {
            if (e.newURL.includes('/admin') || e.newURL.includes('/login')) {
                window.location.reload()
            }
        }
        return {
            layout: computed(() => {
                if (Object.keys(route.meta).length > 0) {
                    return (
                        (route.meta.layout || default_layout.value) + '-layout'
                    )
                } else {
                    return 'redirect-layout'
                }
            }),
        }
    },
})
</script>

<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: $m-text;
    font-size: 14px;
    width: 100%;
    height: 100%;
}
</style>
