<template>
  <div>
    <h1>数据工作台</h1>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in stats" :key="item.label">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>{{ item.label }}</span>
            </div>
          </template>
          <div class="card-value">{{ item.value }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card header="Recent Activity">
           <el-timeline>
            <el-timeline-item timestamp="2024/04/12" placement="top">
              <el-card>
                <h4>Update Design System</h4>
                <p>Tom committed 2024/04/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024/04/03" placement="top">
              <el-card>
                <h4>New Component Added</h4>
                <p>Tom committed 2024/04/03 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="Quick Actions">
          <el-button type="primary">Create New Project</el-button>
          <el-button>Import Assets</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

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

interface StatItem {
  label: string
  value: string
}

const stats = ref<StatItem[]>([])

onMounted(async () => {
  try {
    const res = await axios.get('/api/stats')
    if (res.data.code === 0) {
      stats.value = res.data.data
    }
  } catch (error) {
    console.error('Failed to fetch stats:', error)
  }
})
</script>

<style scoped>
.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}
.card-header {
  font-weight: bold;
}
</style>
