<template>
  <el-card shadow="never">
    <template #header><span>调度回放（PlaybackPolicy.retentionDays={{ retention }} 天）</span></template>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input v-model="filter.kw" placeholder="按任务 / 车辆检索" clearable />
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="filter.range"
          type="datetimerange"
          range-separator="→"
          start-placeholder="开始"
          end-placeholder="结束"
          style="width: 100%" />
      </el-col>
      <el-col :span="10">
        <el-button type="primary">检索快照</el-button>
        <el-button>下载日志</el-button>
        <el-button :icon="VideoPlay" plain>回放选中</el-button>
      </el-col>
    </el-row>

    <el-divider />

    <el-table :data="rows" stripe>
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="ts" label="时间" width="180" />
      <el-table-column prop="type" label="类型" width="140" />
      <el-table-column prop="summary" label="概要" />
      <el-table-column prop="size" label="大小" width="100" />
      <el-table-column label="操作" width="160">
        <template #default>
          <el-button text size="small">回放</el-button>
          <el-button text size="small">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { VideoPlay } from '@element-plus/icons-vue'

const retention = 30
const filter = reactive<{ kw: string; range: [Date, Date] | null }>({ kw: '', range: null })

const rows = ref([
  { id: 'SNAP-001', ts: '2026-05-19 10:21:33', type: '调度异常', summary: 'AGV-005 上线超时 → 故障', size: '128 KB' },
  { id: 'SNAP-002', ts: '2026-05-19 14:05:17', type: '路口死锁', summary: '路口-N 等待链 3 节点 30s', size: '64 KB' },
  { id: 'SNAP-003', ts: '2026-05-20 09:11:02', type: '手动快照', summary: '用户 admin 触发 SnapshotExport', size: '420 KB' }
])
</script>
