<template>
  <a-config-provider update-at-scroll>
    <template #loading>
      <img src="/static/images/loading.svg" class="loading-icon" alt="loading" />
    </template>
    <template #empty>
      <a-empty img-src="data:image/png;base64,[encoded data, 48468 characters]" />
    </template>
    <a-watermark
      :content="appStore.isOpenWatermark ? (appStore.watermark || `${userStore.userInfo.nickname}(${userStore.userInfo.username})`) : ''"
      class="admin-ui-main"
    >
      <router-view></router-view>
    </a-watermark>
  </a-config-provider>
</template>

<script setup lang="ts">
import { useAppStore, useUserStore } from '@/stores'

defineOptions({ name: 'App' })
const userStore = useUserStore()
const appStore = useAppStore()
appStore.initTheme()
appStore.initSiteConfig()
</script>

<style scoped lang="scss">
.loading-icon {
  animation: arco-loading-circle 1s infinite cubic-bezier(0,0,1,1);
}

:deep(.arco-empty-image) img {
  height: 60px;
}
.admin-ui-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}
</style>
