<script setup lang="ts">
import { ref } from "vue";
import defaultJSON from "@/styles/theme/default.json";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { useRoute } from "vue-router";

const data = {
  theme: defaultJSON,
};

const route = useRoute();

const reload = ref<boolean>(false);
</script>

<template>
  <a-config-provider :theme="data.theme" :locale="zhCN">
    <a-app>
      <Suspense>
        <RouterView :reload="reload" />
        <template #fallback>
          <div class="loading-box">
            <a-spin />
          </div>
        </template>
      </Suspense>
    </a-app>
  </a-config-provider>
</template>

<style lang="scss" scoped>
.ant-app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loading-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
