<template>
  <div :class="{ 'layout-wrapper--loading': spinning }" class="layout-wrapper">
    <!-- 加载遮罩 -->
    <div v-if="spinning" class="layout-loading-mask">
      <a-spin size="large" />
    </div>
    <a-layout class="min-h-screen layout-shell">
      <SiteHeader />
      <a-layout-content class="content">
        <slot />
      </a-layout-content>
      <SiteFooter />
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import SiteFooter from '@/components/SiteFooter.vue'
import SiteHeader from '@/components/SiteHeader.vue'
import { nextTick } from 'vue'

const nuxtApp = useNuxtApp()
const bootstrapping = ref(true)
const navigating = ref(false)

const spinning = computed(() => bootstrapping.value || navigating.value)

if (import.meta.client) {
  nuxtApp.hooks.hook('page:start', () => {
    navigating.value = true
  })

  nuxtApp.hooks.hook('page:finish', () => {
    navigating.value = false
  })

  onMounted(async () => {
    // Wait for hydration + one paint to reduce CSS flicker (antdv cssinjs / tailwind).
    await nextTick()
    requestAnimationFrame(() => {
      bootstrapping.value = false
    })
  })
}
</script>

<style scoped>
.content {
  background: #fff;
}

.layout-wrapper {
  position: relative;
  min-height: 100vh;
}

.layout-loading-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
}

.layout-shell {
  transition: opacity 0.12s ease;
}
</style>
