<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-06-25 23:00:54
 * @LastEditors: 舟舟
 * @LastEditTime: 2022-07-28 10:29:54
 * @FilePath: /ouicai_web_framework_vite_ep_nolang/src/views/backend/loading.vue
-->
<template>
    <div>
        <div
            v-loading="true"
            element-loading-background="#f5f5f5"
            element-loading-text="加载中..."
            class="default-main ba-main-loading"
        >
        </div>
        <div v-if="state.showReload" class="loading-footer">
            <el-button @click="refresh" type="warning">重新加载</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onUnmounted, reactive} from 'vue'
import router from '/@/router/index'

let timer: NodeJS.Timer

const state = reactive({
    maximumWait: 1000 * 10,
    showReload: false,
})

const refresh = () => {
    router.go(0)
}

timer = 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>
