<template>
  <!-- 首页组件 -->
  <div class="w-full h-full relative">
    <!-- 3D地图容器 - 充满整个页面，展示仓库3D可视化效果 -->
    <div id="map3d-container" class="absolute inset-0 z-0 bg-gradient-to-br from-blue-950 via-[rgba(12,43,77,0.9)] to-cyan-950">
      <Map/> <!-- 3D地图组件 -->
    </div>
    <!-- 悬浮信息卡片 - 科技感UI，显示系统状态信息 -->
    <div class="absolute top-24 right-8 z-10 bg-[rgba(12,43,77,0.85)] backdrop-blur-sm rounded-lg border border-cyan-700/50 shadow-lg p-4 w-64">
      <!-- 卡片标题和状态指示器 -->
      <div class="flex items-center justify-between mb-3">
        <h3 class="text-cyan-300 font-medium">系统状态</h3>
        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div> <!-- 绿色脉冲动画表示系统正常运行 -->
      </div>
      <!-- 最后更新时间 -->
      <div class="text-xs text-cyan-100/70 mb-4">最后更新: {{ currentDate }}</div>
      
      <!-- 系统信息列表 - 显示API地址、版本等信息 -->
      <div class="space-y-3">
        <div class="flex items-center justify-between">
          <span class="text-sm text-cyan-100/80">API地址</span>
          <span class="text-xs text-cyan-200/70 truncate max-w-[160px]">{{ apiBaseUrl }}</span>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-sm text-cyan-100/80">系统版本</span>
          <span class="text-xs text-cyan-200/70">v{{ appVersion }}</span>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-sm text-cyan-100/80">响应时间</span>
          <span class="text-xs text-green-300">32ms</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 首页组件脚本部分
 * 使用组合式API实现首页功能
 */

// 导入Vue组合式API
import { ref, onMounted, inject } from 'vue'

// 导入3D地图组件
import Map from "@/views/Map.vue"

/**
 * 通过inject获取全局配置，并提供默认值以防止页面空白
 * @type {Object} config - 全局配置对象
 */
const config = inject('config', {
  app: {
    name: '仓库管理操作端',
    version: '1.0.0'
  },
  api: {
    baseUrl: '/api'
  },
  pagination: {
    defaultPageSize: 20
  }
})

/**
 * 提取常用配置项（带安全检查）
 */
const appName = config?.app?.name || '仓库管理操作端' // 应用名称
const appVersion = config?.app?.version || '1.0.0' // 应用版本
const apiBaseUrl = config?.api?.baseUrl || '/api' // API基础地址
const defaultPageSize = config?.pagination?.defaultPageSize || 20 // 默认分页大小

const currentDate = ref('') // 当前日期字符串

/**
 * 格式化当前日期为指定格式
 * @param {Date} date - 日期对象
 * @returns {string} - 格式化后的日期字符串
 */
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
  const weekDay = weekDays[date.getDay()]
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  
  return `${year}年${month}月${day}日 星期${weekDay} ${hours}:${minutes}`
}

/**
 * 组件挂载时的初始化操作
 */
onMounted(() => {
  currentDate.value = formatDate(new Date()) // 设置当前日期
  
  // 模拟3D地图加载进度
  setTimeout(() => {
    // 这里可以添加初始化3D地图的代码
    console.log('3D地图容器已创建，等待用户添加实际组件')
  }, 2000)
})
</script>

<style scoped>
/**
 * 首页组件样式定义
 */
/* 地图容器样式 */
#map3d-container {
  transition: all 0.5s ease;
}

/**
 * 自定义动画定义
 */
/* 慢速旋转动画 */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 慢速反向旋转动画 */
@keyframes spin-slow-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* 极慢速旋转动画 */
@keyframes spin-very-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 动画类定义 */
.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.animate-spin-slow-reverse {
  animation: spin-slow-reverse 30s linear infinite;
}

.animate-spin-very-slow {
  animation: spin-very-slow 40s linear infinite;
}

/**
 * 科技感进度条样式定制
 */
:deep(.el-progress-bar__outer) {
  background-color: rgba(104, 201, 255, 0.15) !important;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid rgba(104, 201, 255, 0.3);
}

:deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, #68c9ff, #a5d8ff) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(104, 201, 255, 0.5);
}
</style>