<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card shadow="hover">
        <template #header>
          <span>总用户数</span>
        </template>
        <el-text size="large" tag="div" type="primary">1,280</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <template #header>
          <span>今日访问</span>
        </template>
        <el-text size="large" tag="div" type="primary">5,420</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <template #header>
          <span>订单总数</span>
        </template>
        <el-text size="large" tag="div" type="primary">836</el-text>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <template #header>
          <span>销售额</span>
        </template>
        <el-text size="large" tag="div" type="primary">¥128,500</el-text>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :span="16">
      <el-card shadow="hover">
        <template #header>
          <span>最近活动</span>
        </template>
        <el-table :data="recentActivities" stripe>
          <el-table-column prop="time" label="时间" width="180" />
          <el-table-column prop="user" label="用户" width="120" />
          <el-table-column prop="action" label="操作" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '成功' ? 'success' : row.status === '处理中' ? 'warning' : 'danger'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <template #header>
          <span>待办事项</span>
        </template>
        <el-timeline>
          <el-timeline-item timestamp="2026-05-13" placement="top">
            审核新用户注册申请
          </el-timeline-item>
          <el-timeline-item timestamp="2026-05-12" placement="top">
            处理退款订单
          </el-timeline-item>
          <el-timeline-item timestamp="2026-05-11" placement="top">
            更新系统配置
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
const recentActivities = [
  { time: '2026-05-13 10:30', user: '张三', action: '提交了订单', status: '成功' },
  { time: '2026-05-13 09:15', user: '李四', action: '修改了个人资料', status: '成功' },
  { time: '2026-05-12 18:00', user: '王五', action: '发起了退款', status: '处理中' },
  { time: '2026-05-12 14:22', user: '赵六', action: '删除了评论', status: '失败' },
  { time: '2026-05-12 11:05', user: '孙七', action: '注册了账号', status: '成功' },
]
</script>
