<template>
  <StepPanelShell title="运行初始化" :snapshot="snapshot">
    <template #actions>
      <el-button v-if="snapshot.status === 'failed'" type="primary" plain @click="$emit('retry')">重试节点</el-button>
    </template>
    <section class="node-section">
      <h3>运行与线路基线</h3>
      <DetailGrid :items="runDetails" />
    </section>
    <section class="node-section">
      <h3>能力与场景</h3>
      <div class="tag-list">
        <el-tag v-for="scene in visual.scenes || []" :key="scene" effect="plain">{{ scene }}</el-tag>
      </div>
    </section>
    <section class="node-section">
      <h3>依赖检查</h3>
      <div class="dependency-list">
        <div v-for="item in visual.dependencies || []" :key="item.name" class="dependency-row">
          <span class="status-dot" :class="`dot-${item.status}`"></span>
          <strong>{{ item.name }}</strong>
          <el-tag :type="statusTag(item.status)" size="small" effect="plain">{{ statusLabel(item.status) }}</el-tag>
          <em>{{ item.latency_ms || 0 }}ms</em>
        </div>
      </div>
    </section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, statusLabel, statusTag, 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 runDetails = computed(() => {
  const run = safeObject(visual.value.run);
  const line = safeObject(visual.value.line);
  return [
    { label: "运行编号", value: run.run_id }, { label: "发起方式", value: run.trigger_mode },
    { label: "线路", value: line.line_name || line.line_id }, { label: "里程范围", value: `${line.mileage_start || '-'} - ${line.mileage_end || '-'}` },
    { label: "坐标系", value: line.coordinate_system }, { label: "规则版本", value: visual.value.rule_set_version }
  ];
});
</script>
