<template>
  <StepPanelShell title="完成汇总" :snapshot="snapshot">
    <section class="node-section">
      <h3>业务产物</h3>
      <div class="summary-grid"><div v-for="item in businessItems" :key="item.label"><strong>{{ item.value }}</strong><span>{{ item.label }}</span></div></div>
    </section>
    <section class="node-section">
      <h3>质量指标</h3>
      <div class="quality-bars"><div v-for="item in qualityItems" :key="item.label"><span>{{ item.label }}</span><el-progress :percentage="Number(item.value || 0)" :stroke-width="9" /></div></div>
    </section>
    <section class="node-section">
      <h3>阶段耗时</h3>
      <div class="duration-list"><div v-for="step in visual.step_durations || []" :key="step.step_key"><span>{{ step.step_name }}</span><div><i :style="{ width: durationWidth(step.elapsed_ms) }"></i></div><strong>{{ formatDuration(step.elapsed_ms) }}</strong><el-tag :type="statusTag(step.status)" size="small" effect="plain">{{ statusLabel(step.status) }}</el-tag></div></div>
    </section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { formatDuration, safeObject, statusLabel, statusTag, type StepSnapshot } from "../../../types/demo-run";
import StepPanelShell from "../common/StepPanelShell.vue";
const props = defineProps<{ snapshot: StepSnapshot }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const business = computed(() => safeObject(visual.value.business_metrics || visual.value.summary));
const quality = computed(() => safeObject(visual.value.quality_metrics));
const businessLabels: Record<string, string> = { tasks: "巡检任务", resources: "数据资源", analysis_jobs: "分析任务", ai_results: "AI结果", alarms: "有效告警", suppressed: "抑制结果", workorders: "工单", closed_workorders: "已闭环", pending_workorders: "待处置", sample_candidates: "回流样本" };
const qualityLabels: Record<string, string> = { resource_completion_rate: "数据接入完成率", preprocess_pass_rate: "预处理通过率", model_success_rate: "模型成功率", alarm_dispatch_rate: "告警派单率", workorder_closure_rate: "工单闭环率" };
const businessItems = computed(() => Object.entries(business.value).map(([key, value]) => ({ label: businessLabels[key] || key, value })));
const qualityItems = computed(() => Object.entries(quality.value).map(([key, value]) => ({ label: qualityLabels[key] || key, value })));
function durationWidth(value: unknown) { const ms = Number(value || 0); return `${Math.max(6, Math.min(100, ms / 20))}%`; }
</script>
