<template>
    <div>
        <div
            v-loading="true"
            element-loading-background="var(--ba-bg-color-overlay)"
            element-loading-text="加载中"
            class="default-main ba-main-loading"
            :style="{ height: 'calc(100vh - 170px)' }"
        ></div>
        <div v-if="state.showReload" class="loading-footer mt10">
            <el-button @click="refresh" type="warning">重新加载</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router/index'
import { useNavTabs } from '@/stores/navTabs'
import { isAdminApp } from '@/utils/common'
import { getFirstRoute, routePush } from '@/utils/router'
import { isEmpty } from 'lodash-es'
import { adminBaseRoutePath } from '@/router/static'

let timer: number

const route = useRoute()
const navTabs = useNavTabs()
const state = reactive({
    maximumWait: 1000 * 6,
    showReload: false
})

const tryRedirect = () => {
    if (route.params.to) {
        try {
            const lastRoute = JSON.parse(route.params.to as string)
            if (lastRoute.path && lastRoute.path !== adminBaseRoutePath) {
                const query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
                routePush({ path: lastRoute.path, query })
                return true
            }
        } catch (error) {
            console.error(error)
        }
    }
    if (isAdminApp() && navTabs.state.tabsViewRoutes.length > 0) {
        const firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
        if (firstRoute) {
            routePush(firstRoute.path)
            return true
        }
    }
    return false
}

const refresh = () => {
    if (!tryRedirect()) {
        router.replace(route.fullPath)
    }
}

onMounted(() => {
    if (tryRedirect()) return

    const stop = watch(
        () => navTabs.state.tabsViewRoutes.length,
        len => {
            if (len > 0 && tryRedirect()) {
                stop()
            }
        }
    )
})

timer = window.setTimeout(() => {
    state.showReload = true
}, state.maximumWait)

onUnmounted(() => {
    clearTimeout(timer)
})
</script>

<style scoped lang="scss">
.ba-main-loading {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
