<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h2>系统概览</h2>
      <p>欢迎回来，{{ userInfo?.username || '用户' }}！</p>
    </div>
    
    <div class="dashboard-stats">
      <div class="stat-card">
        <div class="stat-icon">👤</div>
        <div class="stat-content">
          <h3>用户总数</h3>
          <p class="stat-number">1,234</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">📈</div>
        <div class="stat-content">
          <h3>今日访问</h3>
          <p class="stat-number">567</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-content">
          <h3>系统状态</h3>
          <p class="stat-number">正常</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">⏱️</div>
        <div class="stat-content">
          <h3>运行时间</h3>
          <p class="stat-number">{{ currentTime }}</p>
        </div>
      </div>
    </div>
    
    <div class="dashboard-content">
      <div class="dashboard-card">
        <h3>系统信息</h3>
        <div class="info-grid">
              <div class="info-item">
            <label>用户名:</label>
            <span>{{ userInfo?.username || '未知' }}</span>
              </div>
              <div class="info-item">
            <label>角色:</label>
            <span>{{ userInfo?.roles?.[0]?.roleName || '普通用户' }}</span>
              </div>
              <div class="info-item">
            <label>登录时间:</label>
            <span>{{ currentTime }}</span>
              </div>
              <div class="info-item">
            <label>系统版本:</label>
            <span>v1.0.0</span>
          </div>
              </div>
            </div>
      
      <div class="dashboard-card">
        <h3>快速操作</h3>
        <div class="quick-actions">
          <button class="action-btn">👤 用户管理</button>
          <button class="action-btn">🛡️ 角色管理</button>
          <button class="action-btn">⚙️ 系统设置</button>
          <button class="action-btn">📊 查看日志</button>
        </div>
            </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentTime = ref('')
const userInfo = ref<any>(null)

onMounted(() => {
  // 获取当前时间
  currentTime.value = new Date().toLocaleString()
  
  // 获取用户信息
  const storedUserInfo = localStorage.getItem('userInfo')
  if (storedUserInfo) {
    userInfo.value = JSON.parse(storedUserInfo)
  }
  
  // 检查是否已登录
  const token = localStorage.getItem('token')
  if (!token) {
    router.push('/')
  }
})

const logout = () => {
  // 清除本地存储
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  
  // 跳转到登录页
  router.push('/')
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  min-height: 100vh;
}

.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-header h2 {
  font-size: 20px;
  color: #333;
            margin: 0 0 8px 0;
          }
          
.dashboard-header p {
  color: #666;
            margin: 0;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
    
    .stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
  gap: 15px;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 6px;
}

.stat-content h3 {
  margin: 0 0 5px 0;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.stat-number {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.dashboard-card {
  background: white;
  padding: 24px;
        border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dashboard-card h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.info-grid {
  display: grid;
  gap: 12px;
}

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
        
.info-item:last-child {
          border-bottom: none;
        }
        
.info-item label {
          font-weight: 500;
  color: #666;
}

.info-item span {
  color: #333;
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.action-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  
  .dashboard-content {
    grid-template-columns: 1fr;
    }
    
    .quick-actions {
    grid-template-columns: 1fr;
  }
}
</style>