<template>
  <el-card shadow="never" class="info-card recent-card">
    <div class="card-header">
      <span>今天的警情</span>
    </div>
    <div class="recent-timeline-box">
      <el-timeline class="recent-timeline">
        <el-timeline-item
          v-for="alert in recentAlerts"
          :key="alert.id"
          :timestamp="alert.time"
          placement="top"
        >
          <div class="alert-item">
            <div class="title">
              <span>{{ alert.alertNo }}</span>
              <el-tag size="mini" :type="alert.statusTag">{{ alert.status }}</el-tag>
            </div>
            <div class="summary">{{ alert.summary }}</div>
            <div class="meta">
              <el-tag size="mini" effect="plain">{{ alert.channel }}</el-tag>
              <el-button type="text" size="mini" @click="handlePreview(alert)">查看</el-button>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
</template>

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

export default {
  name: 'RecentAlertsCard',
  data() {
    return {
      recentAlerts: []
    }
  },
  mounted() {
    this.loadTodayAlerts()
  },
  methods: {
    
    /**
     * 加载今天的警情列表
     */
    async loadTodayAlerts() {
      try {
        // 获取今天的开始和结束时间
        const { startOfDay, endOfDay } = getTodayDateRange()
        
        // 查询今天的所有警情
        const res = await listAlerts({
          beginOccurredAt: formatDateTime(startOfDay),
          endOccurredAt: formatDateTime(endOfDay)
        })
        
        if (res.code === 200) {
          const alerts = res.rows || []
          // Filter out drafts - only show received and later states
          const nonDraftAlerts = alerts.filter(alert => alert.status !== 'draft')
          // 转换数据格式
          this.recentAlerts = nonDraftAlerts.map(alert => transformAlertData(alert))
        }
      } catch (error) {
        console.error('获取今日警情列表失败:', error)
        // 发生错误时保持当前数据，不显示错误（避免影响用户体验）
      }
    },
    
    /**
     * 预览警情详情
     */
    handlePreview(alert) {
      this.$emit('preview', alert)
    }
  }
}
</script>

<style lang="scss" scoped>
.recent-timeline-box {
  margin-top: 16px;
  box-sizing: border-box;
  overflow-x: auto;
  min-height: 0;
}
.recent-timeline {
  padding-left: 0;
}

::v-deep .el-timeline-item {
  padding-right: 16px;
}

.alert-item .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.alert-item .summary {
  margin: 6px 0;
  color: #606266;
}

.alert-item .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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