<template>
    <div class="h-full tumour-home">
        <router-view v-slot="{ Component }">
            <Transition name="route" mode="out-in">
                <component :is="Component"/>
            </Transition>
        </router-view>
    </div>
</template>

<script>
import { getDict } from './api/base.js'
import { useStore } from './store/index.js'

export default {
    created() {
        this.init()
        // 监听页面是否隐藏
        document.addEventListener('visibilitychange', this.visibilitychange)
    },
    setup() {
        const store = useStore()
        return { store }
    },
    methods: {
        init() {
            getDict().then(res => {
                this.store.$patch({ dict: res.data })
            })
        },
        visibilitychange() {
            if (document.hidden) {
                this.store.onDocumentHidden(true)
            } else {
                this.store.onDocumentHidden(false)
            }
        }
    },
    beforeUnmount() {
        document.removeEventListener('visibilitychange', this.visibilitychange)
    }
}
</script>

<style lang="less" scoped>

</style>