<template>
  <StepPanelShell title="告警生成" :snapshot="snapshot">
    <template #actions><el-button v-if="snapshot.status === 'failed'" type="danger" plain @click="$emit('retry')">重试生成</el-button></template>
    <section class="node-section">
      <h3>告警生成漏斗</h3>
      <div class="funnel-row"><div v-for="item in funnelItems" :key="item.label"><strong>{{ item.value }}</strong><span>{{ item.label }}</span></div></div>
    </section>
    <section class="node-section">
      <h3>等级分布</h3>
      <div class="severity-summary"><div v-for="severity in severityItems" :key="severity.key" :class="`severity-box severity-${severity.key}`"><strong>{{ severity.value }}</strong><span>{{ severity.label }}</span></div></div>
    </section>
    <section class="node-section">
      <div class="section-heading"><h3>有效告警</h3><span>{{ alarms.length }} 项</span></div>
      <el-table :data="alarms" size="small" max-height="300" row-key="alarm_id">
        <el-table-column prop="scene" label="场景" min-width="130" />
        <el-table-column prop="category" label="类别" min-width="110" />
        <el-table-column label="等级" width="80"><template #default="scope"><el-tag :type="severityTag(scope.row.severity)" size="small" effect="dark">{{ severityLabel(scope.row.severity) }}</el-tag></template></el-table-column>
        <el-table-column prop="confidence" label="置信度" width="90" />
        <el-table-column label="操作" width="120"><template #default="scope"><el-button link type="primary" @click="$emit('inspect', { type: 'alarm', id: scope.row.alarm_id })">证据链</el-button><el-button link type="primary" @click="$emit('locate', { type: 'alarm', id: scope.row.alarm_id })">定位</el-button></template></el-table-column>
      </el-table>
    </section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, severityLabel, type Row, type StepSnapshot } from "../../../types/demo-run";
import StepPanelShell from "../common/StepPanelShell.vue";
const props = defineProps<{ snapshot: StepSnapshot }>();
defineEmits<{ retry: []; inspect: [entity: { type: string; id: string }]; locate: [entity: { type: string; id: string }] }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const alarms = computed<Row[]>(() => Array.isArray(visual.value.alarms) ? visual.value.alarms : []);
const funnel = computed(() => safeObject(visual.value.funnel));
const severities = computed(() => safeObject(visual.value.severity_counts));
const funnelItems = computed(() => [
  { label: "AI候选", value: funnel.value.ai_candidates || 0 }, { label: "规则命中", value: funnel.value.rule_hits || 0 },
  { label: "已抑制", value: funnel.value.suppressed || 0 }, { label: "有效告警", value: funnel.value.effective_alarms || 0 },
  { label: "待派单", value: funnel.value.pending_dispatch || 0 }
]);
const severityItems = computed(() => [
  { key: "critical", label: "严重", value: severities.value.critical || 0 }, { key: "high", label: "高", value: severities.value.high || 0 },
  { key: "medium", label: "中", value: severities.value.medium || 0 }, { key: "low", label: "低", value: severities.value.low || 0 }
]);
function severityTag(value: unknown): "danger" | "warning" | "info" | "success" { return ({ critical: "danger", high: "warning", medium: "info", low: "success" } as any)[String(value)] || "info"; }
</script>
