<template>
  <StepPanelShell title="AI 推理分析" :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="model-matrix">
        <article v-for="model in models" :key="model.model_group">
          <header><strong>{{ model.model_group }}</strong><el-tag :type="statusTag(model.status)" size="small" effect="plain">{{ statusLabel(model.status) }}</el-tag></header>
          <span>{{ model.model_name }} / {{ model.model_version }}</span>
          <div class="model-stats"><b>{{ model.result_count }}</b><small>结果</small><b>{{ model.avg_confidence }}</b><small>平均置信度</small><b>{{ model.elapsed_ms }}ms</b><small>耗时</small></div>
          <footer>{{ model.runtime }} · {{ model.device }} · {{ model.throughput }} FPS</footer>
        </article>
      </div>
    </section>
    <section class="node-section">
      <div class="section-heading"><h3>识别结果</h3><span>{{ results.length }} 项</span></div>
      <el-table :data="results" size="small" max-height="300" row-key="ai_result_id">
        <el-table-column prop="scene" label="场景" min-width="130" />
        <el-table-column prop="category" label="类别" min-width="110" />
        <el-table-column label="置信度" width="110"><template #default="scope"><strong>{{ Number(scope.row.confidence || 0).toFixed(2) }}</strong></template></el-table-column>
        <el-table-column prop="model_version" label="模型版本" width="105" />
        <el-table-column prop="mileage" label="里程" width="105" />
        <el-table-column label="操作" width="120"><template #default="scope"><el-button link type="primary" @click="$emit('inspect', { type: 'result', id: scope.row.ai_result_id })">证据</el-button><el-button link type="primary" @click="$emit('locate', { type: 'result', id: scope.row.ai_result_id })">定位</el-button></template></el-table-column>
      </el-table>
    </section>
    <section class="node-section"><h3>置信度分布</h3><div class="confidence-bars"><div v-for="(count, bucket) in visual.confidence_buckets || {}" :key="bucket"><span>{{ bucket }}</span><el-progress :percentage="confidencePercent(count)" :format="() => String(count)" /></div></div></section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, statusLabel, statusTag, 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 models = computed<Row[]>(() => Array.isArray(visual.value.models) ? visual.value.models : []);
const results = computed<Row[]>(() => Array.isArray(visual.value.results) ? visual.value.results : []);
function confidencePercent(count: unknown) { return results.value.length ? Math.round(Number(count || 0) * 100 / results.value.length) : 0; }
</script>
