<script setup>
import { onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import MainLayout from './layouts/MainLayout.vue'
import { useUserStore } from './stores/user'

const route = useRoute()
const userStore = useUserStore()

// 判断是否是后台管理页面
const isAdminPage = computed(() => {
  return route.path.startsWith('/admin')
})

onMounted(() => {
  // 在应用启动时获取用户信息
  const token = localStorage.getItem('token')
  if (token) {
    console.log('应用启动时获取用户信息，token:', token)
    userStore.token = token // 确保在获取用户信息前设置token
    userStore.fetchCurrentUser()
  } else {
    console.log('未找到token，不获取用户信息')
  }
})
</script>

<template>
  <!-- 根据路由选择不同的布局 -->
  <MainLayout v-if="!isAdminPage" />
  <router-view v-else />
</template>

<style>
/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 禁止整个页面滚动 */
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 禁止整个页面滚动 */
  position: fixed; /* 固定应用容器 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 图片预览相关样式 */
.el-image-viewer__wrapper {
  z-index: 2050 !important; /* 确保预览层级足够高 */
}

.el-image-viewer__img {
  max-width: 80% !important;
  max-height: 80% !important;
  object-fit: contain !important;
}
</style>
