<template>
  <section class="run-gis-panel">
    <header class="gis-toolbar">
      <div><strong>GIS 空间态势</strong><span>{{ activeStageName }}</span></div>
      <div class="gis-layer-switches">
        <el-checkbox v-model="layers.route">航线</el-checkbox>
        <el-checkbox v-model="layers.zones">规则区域</el-checkbox>
        <el-checkbox v-model="layers.markers">业务点位</el-checkbox>
      </div>
    </header>
    <div class="run-gis-map">
      <svg class="track-layer" viewBox="0 0 1000 520" role="img" aria-label="铁路巡检全链路空间态势">
        <path v-if="layers.zones" class="corridor corridor-outer" d="M65 390 C220 305 360 328 500 245 C650 158 790 185 945 84" />
        <path v-if="layers.zones" class="corridor corridor-inner" d="M88 420 C245 332 382 355 525 270 C670 184 810 210 964 112" />
        <path class="rail-shadow" d="M64 360 C225 276 366 298 508 216 C658 130 798 156 950 55" />
        <path class="rail-line" d="M64 360 C225 276 366 298 508 216 C658 130 798 156 950 55" />
        <path v-if="layers.route" class="route-line" d="M64 344 C225 260 366 282 508 200 C658 114 798 140 950 39" />
        <path class="wire-line" d="M70 318 C232 236 374 258 516 177 C667 92 806 118 956 20" />
        <polygon v-if="layers.zones" class="flood-zone" points="584,225 696,160 812,194 832,300 704,330 610,294" />
        <polygon v-if="layers.zones" class="protected-zone" points="190,315 392,268 448,354 245,410" />
        <text class="mileage-label" x="60" y="458">K123+000</text>
        <text class="mileage-label" x="842" y="116">K130+000</text>
      </svg>

      <button
        v-if="layers.route && routeProgress > 0"
        type="button"
        class="uav-marker"
        :style="{ left: `${uavPosition.x}%`, top: `${uavPosition.y}%` }"
        title="无人机当前位置"
      >{{ routeProgress }}%</button>

      <button
        v-if="layers.markers"
        v-for="(marker, index) in markers"
        :key="marker.id || index"
        type="button"
        class="run-marker"
        :class="[`severity-${marker.severity || 'medium'}`, { selected: selectedEntityId === marker.id }]"
        :style="{ left: `${marker.x}%`, top: `${marker.y}%` }"
        @click="$emit('select', { type: markerType(marker), id: String(marker.id || '') })"
      >
        <span>{{ index + 1 }}</span>
        <span class="marker-card"><strong>{{ marker.scene || '业务点位' }}</strong><em>{{ marker.mileage || '-' }} / {{ marker.distance || '线路邻近' }}</em><small>{{ severityLabel(marker.severity) }} · {{ statusLabel(marker.status) }}</small></span>
      </button>

      <div class="map-legend">
        <span><i class="legend-rail"></i>铁路中心线</span><span><i class="legend-route"></i>无人机航线</span>
        <span><i class="legend-protected"></i>防护区</span><span><i class="legend-flood"></i>重点防洪点</span><span><i class="legend-alarm"></i>业务点位</span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, reactive } from "vue";
import { RUN_STAGES, safeObject, severityLabel, statusLabel, type Row, type StepSnapshot } from "../../types/demo-run";
const props = defineProps<{ stepKey: string; stepSnapshots: Record<string, StepSnapshot>; selectedEntityId?: string }>();
defineEmits<{ select: [entity: { type: string; id: string }] }>();
const layers = reactive({ route: true, zones: true, markers: true });
const activeStageName = computed(() => RUN_STAGES.find((stage) => stage.key === props.stepKey)?.name || "运行态势");
const activeIndex = computed(() => Math.max(0, RUN_STAGES.findIndex((stage) => stage.key === props.stepKey)));
const activeVisual = computed(() => safeObject(props.stepSnapshots[props.stepKey]?.visual_payload));
const missionVisual = computed(() => safeObject(props.stepSnapshots["uav.dispatching"]?.visual_payload));
const routeProgress = computed(() => Number(missionVisual.value.route_progress || 0));
const uavPosition = computed(() => ({ x: 7 + routeProgress.value * 0.86, y: 72 - routeProgress.value * 0.54 }));
const markers = computed<Row[]>(() => {
  const own = activeVisual.value.markers;
  if (Array.isArray(own) && own.length) return own;
  for (let index = activeIndex.value; index >= 0; index--) {
    const visual = safeObject(props.stepSnapshots[RUN_STAGES[index].key]?.visual_payload);
    if (Array.isArray(visual.markers) && visual.markers.length) return visual.markers;
  }
  return [];
});
function markerType(marker: Row) {
  if (marker.alarm_id || String(marker.id).startsWith("alarm")) return "alarm";
  if (String(marker.id).startsWith("result")) return "result";
  if (String(marker.id).startsWith("res")) return "resource";
  if (String(marker.id).startsWith("wo")) return "workorder";
  return "entity";
}
</script>
