<template>
  <!-- 主应用布局容器 -->
  <div
    v-loading.fullscreen.lock="loading"
  class="site-wrapper"
  :class="{ 'site-sidebar--fold': sidebarFold }"
  :element-loading-text="'拼命加载中'"
  >
  <!-- 条件渲染：只有当 loading 为 false 时才渲染内部组件 -->
  <template v-if="!loading">
    <!-- 导航栏组件 -->
    <MainNavbar />                                         <!-- 渲染主导航栏组件，通常包含导航链接、用户信息等 -->

    <!-- 侧边栏组件 -->
    <MainSidebar />                                        <!-- 渲染主侧边栏组件，通常包含菜单选项或快捷方式 -->

    <!-- 内容区容器 -->
    <div
      class="site-content__wrapper"
    :style="{ 'min-height': documentClientHeight + 'px' }"
    >
    <!-- 主要内容组件 -->
    <main-content />                                     <!-- 渲染主要内容组件，这里是页面的主要内容展示区域 -->
    </div>
  </template>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeMount, onMounted } from 'vue'
import http from '@/utils/http'                              // 导入 HTTP 请求工具
import MainNavbar from './main-navbar.vue'                   // 导入主导航栏组件
import MainSidebar from './main-sidebar.vue'                 // 导入主侧边栏组件
import MainContent from './main-content.vue'                 // 导入主要内容组件
import { useCommonStore, useUserStore } from '@/store'       // 导入 Vuex store 模块

// 在组件挂载之前获取用户信息
onBeforeMount(() => {
  getUserInfo()                                              // 调用 getUserInfo 函数获取当前管理员信息
})

const commonStore = useCommonStore()                         // 获取通用 Store 实例，用于管理全局状态
const documentClientHeight = computed(() =>                  // 计算属性：动态获取文档客户区高度
  commonStore.documentClientHeight                           // 从 commonStore 中读取文档客户区高度
)
const userStore = useUserStore()                             // 获取用户 Store 实例，用于管理用户相关信息
const sidebarFold = computed(() =>                           // 计算属性：动态获取侧边栏折叠状态
  commonStore.sidebarFold                                    // 从 commonStore 中读取侧边栏折叠状态
)

// 组件挂载后重置文档客户区高度
onMounted(() => {
  resetDocumentClientHeight()                                // 调用 resetDocumentClientHeight 函数初始化并监听窗口大小变化
})

// 函数：重置文档客户区高度，并监听窗口大小变化
const resetDocumentClientHeight = () => {
  commonStore.documentClientHeight = document.documentElement.clientHeight // 设置初始高度为当前文档客户区的高度
  window.onresize = () => {                                   // 监听窗口大小变化事件
    commonStore.documentClientHeight = document.documentElement.clientHeight // 更新文档客户区高度
  }
}

// 控制全屏加载指示器的状态
const loading = ref(true)                                     // 定义一个响应式变量 loading，初始值为 true，表示正在加载

// 函数：获取当前管理员信息
const getUserInfo = () => {
  http({
    url: http.adornUrl('/sys/user/info'),                    // API 路径，使用 http.adornUrl 方法处理 URL
    method: 'get',                                           // 请求方法为 GET
    params: http.adornParams()                               // 请求参数，使用 http.adornParams 方法处理参数
  }).then(({ data }) => {
    loading.value = false                                    // 加载完成，关闭加载指示器
    userStore.userId = data.userId                          // 更新用户 ID 到 userStore
    userStore.name = data.username                          // 更新用户名到 userStore
    userStore.mobile = data.mobile                          // 更新手机号到 userStore
    userStore.shopId = data.shopId                          // 更新商店 ID 到 userStore
    // 注意：userStore.userId = data.userId 这行重复了，建议移除或检查是否需要
  }).catch(() => {
    // 错误处理逻辑可以在这里实现
  })
}
</script>
