<template>
  <div class="railway-gis-map">
    <svg viewBox="0 0 1100 620" role="img" aria-label="铁路线路综合空间态势">
      <g class="gis-grid-lines">
        <path v-for="x in [100, 250, 400, 550, 700, 850, 1000]" :key="`x-${x}`" :d="`M${x} 0 V620`" />
        <path v-for="y in [80, 180, 280, 380, 480, 580]" :key="`y-${y}`" :d="`M0 ${y} H1100`" />
      </g>
      <g v-if="layers.rules">
        <path class="gis-corridor outer" d="M60 520 C220 445 330 455 470 370 C635 270 745 302 1040 88" />
        <path class="gis-corridor inner" d="M60 520 C220 445 330 455 470 370 C635 270 745 302 1040 88" />
        <polygon class="gis-flood-zone" points="610,326 726,246 850,278 870,388 734,430 642,398" />
        <polygon class="gis-protected-zone" points="176,432 350,396 410,482 234,536" />
      </g>
      <path class="gis-rail-shadow" d="M60 520 C220 445 330 455 470 370 C635 270 745 302 1040 88" />
      <path class="gis-rail-line" d="M60 520 C220 445 330 455 470 370 C635 270 745 302 1040 88" />
      <path v-if="layers.routes" class="gis-route-line" d="M70 482 C226 408 344 418 484 334 C644 238 762 270 1022 70" />
      <text x="52" y="568">K123+000</text><text x="934" y="116">K130+000</text>
    </svg>

    <button
      v-for="marker in markers"
      :key="marker.id"
      class="gis-business-marker"
      :class="[`severity-${marker.severity}`, { selected: marker.id === selectedId }]"
      :style="{ left: `${marker.x}%`, top: `${marker.y}%` }"
      type="button"
      :aria-label="`${marker.scene} ${marker.mileage}`"
      @click="$emit('select', marker.row)"
    >
      <span>{{ marker.index }}</span>
      <div><strong>{{ marker.scene }}</strong><small>{{ marker.mileage }} · {{ marker.statusLabel }}</small></div>
    </button>

    <div class="gis-scale">500 m</div>
    <div class="gis-legend">
      <span><i class="line"></i>线路中心线</span><span v-if="layers.routes"><i class="route"></i>无人机航线</span>
      <span v-if="layers.rules"><i class="zone"></i>规则区域</span><span v-if="layers.alarms"><i class="alarm"></i>告警点位</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, severityLabel, statusLabel, type Row } from "../../types/demo-run";

const props = withDefaults(defineProps<{
  alarms?: Row[];
  selectedId?: string;
  layers?: { routes: boolean; rules: boolean; alarms: boolean };
}>(), {
  alarms: () => [],
  selectedId: "",
  layers: () => ({ routes: true, rules: true, alarms: true })
});
defineEmits<{ select: [row: Row] }>();

const markers = computed(() => {
  if (!props.layers.alarms) return [];
  const rows = props.alarms.slice(0, 36);
  const total = Math.max(rows.length - 1, 1);
  return rows.map((row, index) => {
    const location = safeObject(row.location);
    const progress = index / total;
    return {
      id: String(row.alarm_id || index),
      index: index + 1,
      scene: String(row.scene || "隐患"),
      mileage: String(location.mileage || `K${123 + index % 7}+${String(120 + index * 23).padStart(3, "0")}`),
      severity: String(row.severity || "medium"),
      statusLabel: `${severityLabel(row.severity)} · ${statusLabel(row.status)}`,
      x: Math.max(6, Math.min(94, 7 + progress * 87 + ((index % 4) - 1.5) * 1.6)),
      y: Math.max(8, Math.min(88, 82 - progress * 65 + (index % 2 ? 7 : -7))),
      row
    };
  });
});
</script>
