<template>
  <div class="task-statistics">
    <h2>任务统计</h2>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="task-card">
          <div slot="header" class="card-header">
            <span>当日待办工单数</span>
          </div>
          <div class="card-body">
            <h3>{{ todayPendingOrders }}</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="task-card">
          <div slot="header" class="card-header">
            <span>已办工单数</span>
          </div>
          <div class="card-body">
            <h3>{{ completedOrders }}</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="task-card">
          <div slot="header" class="card-header">
            <span>延期工单数</span>
          </div>
          <div class="card-body">
            <h3>{{ delayedOrders }}</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="task-card">
          <div slot="header" class="card-header">
            <span>缓办工单数</span>
          </div>
          <div class="card-body">
            <h3>{{ postponedOrders }}</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 模拟数据
const todayPendingOrders = ref(25);
const completedOrders = ref(40);
const delayedOrders = ref(5);
const postponedOrders = ref(10);

onMounted(() => {
  // 在这里可以调用 API 获取实际的数据
});
</script>

<style scoped>
.task-statistics {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.task-card {
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #f5f5f5;
}

.card-body {
  padding: 20px;
}
</style>
