<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>
      <DetailGrid :items="ingestDetails" />
    </section>
    <section class="node-section">
      <div class="section-heading"><h3>接入资源</h3><span>{{ resources.length }} 项</span></div>
      <el-table :data="resources" size="small" max-height="320" row-key="resource_id">
        <el-table-column prop="resource_name" label="资源" min-width="180" show-overflow-tooltip />
        <el-table-column label="类型" width="100"><template #default="scope">{{ resourceLabel(scope.row.resource_type) }}</template></el-table-column>
        <el-table-column label="进度" min-width="140"><template #default="scope"><el-progress :percentage="Number(scope.row.upload_progress || 0)" :stroke-width="7" /></template></el-table-column>
        <el-table-column label="校验" width="94"><template #default="scope"><el-tag :type="statusTag(scope.row.checksum_status)" size="small" effect="plain">{{ statusLabel(scope.row.checksum_status) }}</el-tag></template></el-table-column>
        <el-table-column prop="mileage" label="里程" width="105" />
        <el-table-column label="操作" width="80"><template #default="scope"><el-button link type="primary" :disabled="String(scope.row.resource_id).startsWith('pending-')" @click="$emit('inspect', { type: 'resource', id: scope.row.resource_id })">查看</el-button></template></el-table-column>
      </el-table>
    </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: []; inspect: [entity: { type: string; id: string }] }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const resources = computed(() => Array.isArray(visual.value.resources) ? visual.value.resources : []);
const ingestDetails = computed(() => [
  { label: "计划数据量", value: formatBytes(visual.value.expected_bytes) }, { label: "已接收", value: formatBytes(visual.value.received_bytes) },
  { label: "当前速率", value: `${visual.value.ingest_rate_mbps || 0}MB/s` }, { label: "资源类型", value: Object.keys(safeObject(visual.value.resource_stats)).length }
]);
function formatBytes(value: unknown) { return `${(Number(value || 0) / 1024 / 1024).toFixed(1)}MB`; }
function resourceLabel(value: string) { return ({ image: "可见光", thermal: "红外", tif: "TIF", pointcloud: "点云" } as Record<string, string>)[value] || value; }
</script>
