<script setup>
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { useUserStore } from "@/store/user";
import { ref } from "vue";

const locale = zhCN;
const userStore = useUserStore();
const isInitialized = ref(false);

userStore.init().then(() => {
  isInitialized.value = true;
  userStore.initTokenExpirationListener();
  if (userStore.isLoggedIn) {
    userStore.getUserProfile();
  }
});
</script>

<template>
  <a-spin :spinning="!isInitialized">
    <a-config-provider :locale="locale" v-if="isInitialized">
      <router-view></router-view>
    </a-config-provider>
    <div v-else class="loading-container"></div>
  </a-spin>
</template>

<style>
/* 全局样式和响应式基础设置 */
html,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* 设置根元素字体大小，便于使用rem单位 */
html {
  font-size: 16px;
}

/* 移动端适配 - 根据屏幕宽度调整基础字体大小 */
@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  html {
    font-size: 12px;
  }
}

#app {
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

/* 禁止移动端在页面边界和弹窗容器上的上下回弹 */
.layout,
.layout-content,
.content,
.ant-modal-wrap,
.ant-modal-content,
.ant-modal-body,
.ant-drawer-content-wrapper,
.ant-drawer-content,
.ant-drawer-body {
  overscroll-behavior: none;
}

/* 让所有滚动条美观 */
::-webkit-scrollbar {
  width: 6px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 特定区域隐藏滚动条 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 响应式工具类 */
.hidden-xs {
  display: block;
}

.visible-xs {
  display: none;
}

@media screen and (max-width: 768px) {
  .hidden-xs {
    display: none !important;
  }

  .visible-xs {
    display: block !important;
  }
}

/* Ant Design 表格响应式调整 */
@media screen and (max-width: 768px) {
  .ant-table {
    width: 100%;
    overflow-x: auto;
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    white-space: nowrap;
    padding: 8px;
  }

  /* 表单在移动端的调整 */
  .ant-form-item {
    margin-bottom: 12px;
  }

  .ant-form-item-label {
    padding: 0;
  }
}

.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #999;
}
</style>
