<template>
  <div>
    <!-- 条件渲染：如果当前路由配置了 isTab 属性，则显示顶部卡片 -->
    <el-card
      v-if="route.meta.isTab"
    class="main-head"
    >
    <!-- 面包屑导航 -->
    <el-breadcrumb :separator-icon="ArrowRight">           <!-- 使用 ArrowRight 图标作为分隔符 -->
      <el-breadcrumb-item
        v-for="(item, index) in selectMenu"
      :key="index"
      class="breadcrumb-item"
      >
      <span>{{ item }}</span>                            <!-- 显示面包屑项的文本内容 -->
      </el-breadcrumb-item>
    </el-breadcrumb>
    </el-card>

    <!-- 主内容区域 -->
    <!-- 主内容区容器，使用 site-content 类名进行样式定义 -->
    <!-- 动态绑定类名：如果当前路由配置了 isTab，则添加 site-content--tabs 类 -->
    <main
      class="site-content"
    :class="{ 'site-content--tabs': route.meta.isTab }"
    >
    <!-- 条件渲染：根据当前路由名称和 meta 属性显示不同内容 -->
    <!-- 发布商品页面 (prod-post-product/postProduct) -->
      <!-- 如果当前路由名称为 prod-post-product/postProduct -->
      <!-- 动态设置样式，确保内容区有足够的高度 -->
      <!-- 使用 keep-alive 组件缓存视图，提高性能 -->
      <!-- 渲染匹配到的子组件 -->
    <div
      v-if="route.name === 'prod-post-product/postProduct'"
    :style="siteContentViewHeight"
    >
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>

  <!-- 其他页面且 homeHidden 为 true -->
      <!-- 如果 homeHidden 计算属性为 true -->
      <!-- 使用 card-content-h 类名进行样式定义 -->
      <!-- 移除边框圆角和阴影效果 -->
      <!-- 动态设置内容区高度 -->
  <el-card
    v-else-if="homeHidden"
  class="card-content-h"
  style="border-radius: 0 !important; box-shadow: none"
  :body-style="siteContentViewHeight"
  >
  <router-view />                                      <!-- 渲染匹配到的子组件 -->
  </el-card>

  <!-- 默认情况（首页或其他不需要特殊处理的页面） -->
  <div v-else>
    <router-view />                                      <!-- 渲染匹配到的子组件 -->
  </div>
  </main>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'          // 导入 Element Plus 的箭头图标组件
import { ref, computed } from 'vue'                           // 从 Vue 导入组合式 API 函数
import { useRoute } from 'vue-router'                         // 从 vue-router 导入 useRoute 函数，用于获取当前路由信息
import { isURL } from '@/utils/validate'                      // 导入自定义验证工具函数，用于检查 URL 格式
import { useCommonStore } from '@/store'                      // 导入 Vuex store 模块中的 commonStore

// 初始化文档客户区高度为当前页面的高度
const documentClientHeight = ref(document.documentElement.clientHeight)

// 监听窗口大小变化事件，实时更新文档客户区高度
window.addEventListener('resize', () => {
  documentClientHeight.value = document.documentElement.clientHeight
})

// 计算属性：动态计算内容区高度，考虑导航栏、头部等固定元素占用的空间
const siteContentViewHeight = computed(() => {
  let height = documentClientHeight.value - 50 - 30 - 2      // 初始高度减去顶部和底部固定元素占用的空间
  if (route.meta.isTab) {                                    // 如果当前路由配置了 isTab 属性
    height -= 40                                             // 进一步减少高度以适应标签页
    return isURL(route.meta.iframeUrl)                       // 检查是否为 iframe 路由
      ? { height: height + 'px' }                            // 是 iframe，则设置固定高度
      : { minHeight: height + 'px' };                        // 否则，设置最小高度
  }
  return { minHeight: height + 'px' };                       // 对于非标签页路由，仅设置最小高度
})

// 获取通用 Store 实例，用于管理全局状态
const commonStore = useCommonStore()

// 计算属性：动态获取选中的菜单项
const selectMenu = computed(() => commonStore.selectMenu)

// 计算属性：判断是否隐藏首页标志（根据当前路由名称）
const homeHidden = computed(() => route.name !== 'home')
</script>
<style scoped>
/* 主头部样式 */
.main-head {
  background: #ffffff;                                       /* 白色背景 */
  width: 100%;                                               /* 宽度占满整个容器 */
  height: 40px;                                              /* 固定高度 */
  position: fixed;                                           /* 固定定位 */
  top: 50px;                                                 /* 距离顶部 50px */
  z-index: 10;                                               /* 设置堆叠顺序，确保在其他内容之上 */
  display: flex;                                             /* 使用弹性布局 */
  align-items: center;                                       /* 垂直居中对齐子元素 */
  border-radius: 0;                                          /* 移除边框圆角 */
  box-shadow: none;                                          /* 移除阴影效果 */
  border-top: none;                                          /* 移除顶部边框 */
}

/* 面包屑最后一项样式 */
.breadcrumb-item:last-child span {
  color: #155bd4 !important;                                 /* 设置文本颜色为蓝色，并强制覆盖其他样式 */
}

/* 卡片内容区域最小高度 */
.card-content-h {
  min-height: calc(100vh - 50px - 60px - 20px);              /* 动态计算最小高度，确保内容区有足够的空间 */
}
</style>
