<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="pipeline-list">
        <div v-for="processor in processors" :key="processor.processor_id" class="pipeline-row" :class="`pipeline-${processor.status}`">
          <span class="pipeline-icon">{{ processorIndex(processor) }}</span>
          <div><strong>{{ processor.processor_name }}</strong><small>{{ processor.quality }}</small></div>
          <el-progress :percentage="processor.status === 'completed' ? 100 : processor.status === 'running' ? 58 : 0" :stroke-width="7" />
          <el-tag :type="statusTag(processor.status)" size="small" effect="plain">{{ statusLabel(processor.status) }}</el-tag>
          <em>{{ processor.elapsed_ms || 0 }}ms</em>
        </div>
      </div>
    </section>
    <section class="node-section">
      <h3>质量检查</h3>
      <DetailGrid :items="qualityDetails" />
    </section>
    <section class="node-section">
      <h3>标准化产物</h3>
      <div class="output-list"><div v-for="item in visual.outputs || []" :key="item.resource_id"><strong>{{ item.resource_id }}</strong><span>{{ item.coordinate_system }}</span><el-tag size="small" type="success" effect="plain">{{ statusLabel(item.quality_report) }}</el-tag></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 DetailGrid from "../common/DetailGrid.vue";
import StepPanelShell from "../common/StepPanelShell.vue";
const props = defineProps<{ snapshot: StepSnapshot }>();
defineEmits<{ retry: [] }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const processors = computed<Row[]>(() => Array.isArray(visual.value.processors) ? visual.value.processors : []);
const quality = computed(() => safeObject(visual.value.quality_summary));
const qualityDetails = computed(() => [
  { label: "清晰度", value: quality.value.clarity }, { label: "坐标有效性", value: quality.value.coordinate_validity },
  { label: "时间同步", value: statusLabel(quality.value.time_sync) }, { label: "资源可读性", value: statusLabel(quality.value.readability) },
  { label: "质量通过率", value: `${quality.value.pass_rate || 0}%` }
]);
function processorIndex(processor: Row) { return processors.value.findIndex((item) => item.processor_id === processor.processor_id) + 1; }
</script>
