<template>
  <el-card shadow="never" class="info-card stats-card">
    <div class="card-header">
      <span>今日警情概览</span>
    </div>
    <div class="stats-grid">
      <div v-for="item in stats" :key="item.label" class="stat-item">
        <div class="label">{{ item.label }}</div>
        <div :class="['value', item.type]">{{ item.value }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { listAlerts } from '@/api/duty/alert'
import { formatDateTime, getTodayDateRange } from '../utils/dateHelpers'

export default {
  name: 'StatsCard',
  data() {
    return {
      stats: [
        { label: '已接警', value: 0, type: 'primary' },
        { label: '已转警', value: 0, type: 'info' },
        { label: '已转事件', value: 0, type: 'success' },
        { label: '已关闭', value: 0, type: 'success' }
      ]
    }
  },
  mounted() {
    this.loadTodayStats()
  },
  methods: {
    /**
     * 加载今日警情统计
     */
    async loadTodayStats() {
      try {
        // 获取今天的开始和结束时间
        const { startOfDay, endOfDay } = getTodayDateRange()
        
        // 查询今天的所有警情
        const res = await listAlerts({
          beginOccurredAt: formatDateTime(startOfDay),
          endOccurredAt: formatDateTime(endOfDay)
        })
        
        if (res.code === 200) {
          const alerts = res.rows || []
          
          // 统计总数
          const total = alerts.length
          
          // 按状态统计
          const transferred = alerts.filter(a => a.status === 'transferred').length
          const converted = alerts.filter(a => a.status === 'converted').length
          const closed = alerts.filter(a => a.status === 'closed').length
          
          // 更新统计数据
          this.stats = [
            { label: '已接警', value: total, type: 'primary' },
            { label: '已转警', value: transferred, type: 'info' },
            { label: '已转事件', value: converted, type: 'success' },
            { label: '已关闭', value: closed, type: 'success' }
          ]
        }
      } catch (error) {
        console.error('获取今日警情统计失败:', error)
        // 发生错误时保持当前数据，不显示错误（避免影响用户体验）
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
}

.stat-item {
  background: #f7f8fa;
  border-radius: 6px;
  padding: 12px;
}

.stat-item .label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-item .value {
  font-size: 20px;
  font-weight: 600;
}

.stat-item .value.warning {
  color: #e6a23c;
}

.stat-item .value.info {
  color: #409eff;
}

.stat-item .value.success {
  color: #67c23a;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
}
</style>