<template>
  <div class="home">
    <!-- 导航栏 -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <h2>前端H5系统</h2>
        </div>
        <div class="nav-menu">
          <el-menu
            mode="horizontal"
            :default-active="activeIndex"
            class="nav-menu-items"
            @select="handleMenuSelect"
          >
            <el-menu-item index="home">首页</el-menu-item>
            <el-menu-item index="shop">积分商城</el-menu-item>
            <el-menu-item index="about">关于</el-menu-item>
          </el-menu>
        </div>
        <div class="user-actions">
          <template v-if="userStore.isAuthenticated">
            <el-dropdown @command="handleUserCommand">
              <span class="user-info">
                <div class="user-avatar">
                  {{ userStore.user?.username?.charAt(0)?.toUpperCase() }}
                </div>
                <span class="username">{{ userStore.user?.username }}</span>
                <el-icon><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                  <el-dropdown-item command="points-history">积分记录</el-dropdown-item>
                  <el-dropdown-item command="transfers">转账管理</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <!-- 移除登录注册按钮 -->
          </template>
        </div>
      </div>
    </el-header>

    <!-- 主要内容 -->
    <el-main class="main-content">


      <!-- 主要内容区域 -->
      <div class="main-section">
        <div class="container">
          <div class="welcome-content">
            <h2 class="welcome-title">欢迎使用前端H5系统</h2>
            <p class="welcome-description">您的智能管理助手</p>
          </div>
        </div>
      </div>



      <!-- 统计信息 -->
      <div class="stats-section" v-if="userStore.isAuthenticated">
        <div class="container">
          <h2 class="section-title">系统概览</h2>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="6" v-for="stat in stats" :key="stat.key">
              <div class="stat-card">
                <div class="stat-icon">
                  <el-icon :size="32"><component :is="stat.icon" /></el-icon>
                </div>
                <div class="stat-content">
                  <div class="stat-value">{{ stat.value }}</div>
                  <div class="stat-label">{{ stat.label }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>



    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="container">
        <p>&copy; 2024 前端H5系统. All rights reserved.</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

import { ArrowDown, User, View, Clock, Document, Edit, Setting, DataAnalysis, Star } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const activeIndex = ref('home')
const stats = ref([
  { key: 'users', label: '用户数量', value: 0, icon: 'User' },
  { key: 'orders', label: '订单总数', value: 0, icon: 'Document' },
  { key: 'products', label: '商品数量', value: 0, icon: 'Star' },
  { key: 'transfers', label: '转账记录', value: 0, icon: 'Clock' }
])





// 方法
const handleMenuSelect = (index) => {
  activeIndex.value = index
  switch (index) {
    case 'home':
      router.push('/transfers')
      break
    case 'shop':
      router.push('/shop')
      break
    case 'about':
      router.push('/about')
      break
  }
}

const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'orders':
      router.push('/orders')
      break
    case 'points-history':
      router.push('/points-history')
      break
    case 'transfers':
      router.push('/transfers')
      break
    case 'logout':
      userStore.logout()
      break
  }
}



// 获取统计数据
const fetchStats = async () => {
  try {
    // 这里可以调用相关API获取统计数据
    // 暂时使用模拟数据
    stats.value = [
      { key: 'users', label: '用户数量', value: 156, icon: 'User' },
      { key: 'orders', label: '订单总数', value: 89, icon: 'Document' },
      { key: 'products', label: '商品数量', value: 45, icon: 'Star' },
      { key: 'transfers', label: '转账记录', value: 23, icon: 'Clock' }
    ]
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 生命周期
onMounted(() => {
  if (userStore.isAuthenticated) {
    fetchStats()
  }
})
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo h2 {
  color: white;
  margin: 0;
}

.nav-menu-items {
  background: transparent;
  border: none;
}

.nav-menu-items .el-menu-item {
  color: white;
  border: none;
}

.nav-menu-items .el-menu-item:hover,
.nav-menu-items .el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  cursor: pointer;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.main-content {
  flex: 1;
  padding: 0 0 80px 0;
}



.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.main-section,
.stats-section {
  padding: 60px 0;
}

.main-section {
  background-color: #f8f9fa;
  min-height: 50vh;
}

.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  color: #303133;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.welcome-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
}

.welcome-title {
  font-size: 32px;
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
}

.welcome-description {
  font-size: 16px;
  color: #606266;
  line-height: 1.6;
}



.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.stat-icon {
  color: #409eff;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.footer {
  background-color: #303133;
  color: white;
  text-align: center;
}

.footer .container {
  padding: 20px;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
    padding: 15px 20px;
  }
  
  .nav-menu {
    order: 3;
    width: 100%;
  }
  
  .user-actions {
    order: 2;
  }
  
  
  .section-title {
    font-size: 24px;
  }
  
  .section-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .main-content {
    padding-bottom: 80px;
  }
  

}
</style>