<template>
  <el-card
    shadow="never"
    class="info-card stats-card"
    :loading="loading"
  >
    <div class="card-header">
      <span>我的任务统计</span>
    </div>
    <div class="stats-grid">
      <div 
        class="stat-item" 
        v-for="item in stats" 
        :key="item.key"
        @click="handleStatClick(item)"
      >
        <div class="label">{{ item.label }}</div>
        <div class="value" :style="{ color: item.color }">{{ item.value }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { listMyDispatchTasks } from '@/api/emergency/dispatchTask'

export default {
  name: 'DisposalStatsCard',
  data() {
    return {
      stats: [
        { key: 'pendingConfirm', label: '待确认', value: 0, color: '#F56C6C' },
        { key: 'inProgress', label: '执行中', value: 0, color: '#409EFF' },
        { key: 'todayDisposals', label: '今日记录', value: 0, color: '#67C23A' }
      ],
      loading: false,
      intervalId: null
    }
  },
  created() {
    this.fetchStats()
    this.startAutoRefresh()
  },
  beforeDestroy() {
    this.stopAutoRefresh()
  },
  methods: {
    async fetchStats() {
      this.loading = true
      try {
        const { rows = [] } = await listMyDispatchTasks({
          pageNum: 1,
          pageSize: 200
        })
        this.stats = this.computeStats(rows)
      } catch (error) {
        this.$message?.error('统计数据获取失败')
        // Keep previous stats if fetch fails
      } finally {
        this.loading = false
      }
    },
    computeStats(tasks) {
      const summary = {
        pendingConfirm: 0,
        inProgress: 0,
        todayDisposals: 0
      }
      const today = new Date().toISOString().slice(0, 10)
      tasks.forEach(task => {
        const status = task?.status
        if (['published', 'pending', 'pending_confirm'].includes(status)) {
          summary.pendingConfirm += 1
        }
        if (['in_progress', 'executing'].includes(status)) {
          summary.inProgress += 1
        }
        const referenceTime = task?.updateTime || task?.createTime || ''
        if (referenceTime.startsWith(today)) {
          summary.todayDisposals += 1
        }
      })
      return [
        { key: 'pendingConfirm', label: '待确认', value: summary.pendingConfirm, color: '#F56C6C' },
        { key: 'inProgress', label: '执行中', value: summary.inProgress, color: '#409EFF' },
        { key: 'todayDisposals', label: '今日记录', value: summary.todayDisposals, color: '#67C23A' }
      ]
    },
    startAutoRefresh() {
      this.stopAutoRefresh()
      this.intervalId = setInterval(() => {
        this.fetchStats()
      }, 30000)
    },
    stopAutoRefresh() {
      if (this.intervalId) {
        clearInterval(this.intervalId)
        this.intervalId = null
      }
    },
    handleStatClick(stat) {
      this.$emit('stat-click', stat)
    }
  }
}
</script>

<style lang="scss" scoped>
.stats-card {
  margin-bottom: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
}

.stat-item {
  background: #f7f8fa;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    background: #f0f2f5;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

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

.stat-item .value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 6px;
  }
  
  .stat-item {
    padding: 10px 6px;
  }
  
  .stat-item .value {
    font-size: 20px;
  }
}
</style>