<template>
  <section class="evidence-tabs">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="事件流" name="events">
        <div class="evidence-toolbar"><el-select v-model="eventFilter" size="small" style="width: 150px"><el-option label="全部事件" value="all" /><el-option label="当前节点" value="current" /><el-option label="异常事件" value="error" /></el-select><span>{{ filteredEvents.length }} 条</span></div>
        <div class="event-stream-rich"><button v-for="event in filteredEvents" :key="event.event_id" type="button" :class="`event-${event.status}`" @click="$emit('select-step', event.step_key)"><time>{{ formatTime(event.created_at) }}</time><strong>{{ event.step_name }}</strong><span>{{ event.title }}</span><em>{{ statusLabel(event.status) }}</em></button></div>
      </el-tab-pane>
      <el-tab-pane :label="`数据资源 ${resources.length}`" name="resources">
        <el-table :data="resources" size="small" height="260"><el-table-column prop="resource_name" label="资源" min-width="180" /><el-table-column prop="resource_type" label="类型" width="100" /><el-table-column prop="mileage" label="里程" width="110" /><el-table-column prop="ingest_status" label="状态" width="100" /><el-table-column label="操作" width="80"><template #default="scope"><el-button link type="primary" @click="$emit('inspect', { type: 'resource', id: scope.row.resource_id })">查看</el-button></template></el-table-column></el-table>
      </el-tab-pane>
      <el-tab-pane :label="`AI结果 ${results.length}`" name="results">
        <el-table :data="results" size="small" height="260"><el-table-column prop="scene" label="场景" /><el-table-column prop="category" label="类别" /><el-table-column prop="confidence" label="置信度" width="100" /><el-table-column prop="model_version" label="版本" width="100" /><el-table-column label="操作" width="80"><template #default="scope"><el-button link type="primary" @click="$emit('inspect', { type: 'result', id: scope.row.ai_result_id })">证据</el-button></template></el-table-column></el-table>
      </el-tab-pane>
      <el-tab-pane :label="`规则命中 ${ruleHits.length}`" name="rules"><el-table :data="ruleHits" size="small" height="260"><el-table-column prop="scene" label="场景" /><el-table-column prop="threshold" label="阈值" /><el-table-column prop="decision" label="结论" width="100" /><el-table-column label="依据"><template #default="scope">{{ (scope.row.rule_hits || []).join(' / ') }}</template></el-table-column></el-table></el-tab-pane>
      <el-tab-pane :label="`告警工单 ${alarms.length}/${workorders.length}`" name="alarms"><el-table :data="workorders" size="small" height="260"><el-table-column prop="workorder_id" label="工单" min-width="150" /><el-table-column prop="scene" label="场景" /><el-table-column prop="severity" label="等级" width="90" /><el-table-column prop="status" label="状态" width="100" /></el-table></el-tab-pane>
      <el-tab-pane :label="`样本回流 ${samples.length}`" name="samples"><el-table :data="samples" size="small" height="260"><el-table-column prop="sample_id" label="样本" min-width="150" /><el-table-column prop="feedback_reason" label="原因" /><el-table-column prop="target_model_group" label="目标模型" /><el-table-column prop="labeling_status" label="状态" width="100" /></el-table></el-tab-pane>
    </el-tabs>
  </section>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { formatTime, safeObject, statusLabel, type Row, type RunEvent, type StepSnapshot } from "../../types/demo-run";
const props = defineProps<{ events: RunEvent[]; currentStepKey: string; stepSnapshots: Record<string, StepSnapshot> }>();
defineEmits<{ inspect: [entity: { type: string; id: string }]; "select-step": [stepKey: string] }>();
const activeTab = ref("events");
const eventFilter = ref("all");
const visual = (key: string) => safeObject(props.stepSnapshots[key]?.visual_payload);
const resources = computed<Row[]>(() => visual("resource.ingesting").resources || []);
const results = computed<Row[]>(() => visual("ai.inferencing").results || []);
const ruleHits = computed<Row[]>(() => visual("rule.evaluating").rule_hits || []);
const alarms = computed<Row[]>(() => visual("alarm.generating").alarms || []);
const workorders = computed<Row[]>(() => visual("workorder.closing").workorders || visual("workorder.dispatching").workorders || []);
const samples = computed<Row[]>(() => visual("sample.feedback").samples || []);
const filteredEvents = computed(() => [...props.events].reverse().filter((event) => {
  if (eventFilter.value === "current") return event.step_key === props.currentStepKey;
  if (eventFilter.value === "error") return event.status === "failed" || event.status === "cancelled";
  return true;
}).slice(0, 200));
</script>
