<template>
  <div class="alarm-map-container">
    <el-card class="legend-card">
      <template #header><span>图例</span></template>
      <div class="legend-items">
        <div class="legend-item"><span class="dot" style="background:#f5222d"></span> 压力异常</div>
        <div class="legend-item"><span class="dot" style="background:#fa8c16"></span> 流量异常</div>
        <div class="legend-item"><span class="dot" style="background:#722ed1"></span> 气体浓度异常</div>
      </div>
    </el-card>
    <div id="alarmMap" class="map"></div>
    <el-drawer v-model="detailVisible" title="报警详情" size="400px">
      <template v-if="currentAlarm">
        <el-descriptions :column="1" border size="small">
          <el-descriptions-item label="设备编码">{{ currentAlarm.deviceCode }}</el-descriptions-item>
          <el-descriptions-item label="报警类型">{{ currentAlarm.warningType }}</el-descriptions-item>
          <el-descriptions-item label="实际值">{{ currentAlarm.actualValue }}</el-descriptions-item>
          <el-descriptions-item label="最小值">{{ currentAlarm.minValue }}</el-descriptions-item>
          <el-descriptions-item label="最大值">{{ currentAlarm.maxValue }}</el-descriptions-item>
          <el-descriptions-item label="报警时间">{{ currentAlarm.alarmTime }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { getActiveAlarmPoints } from '@/api/pipeNetwork/hazard'

const detailVisible = ref(false)
const currentAlarm = ref(null)
let mapInstance = null
const typeColors = { '压力异常': '#f5222d', '流量异常': '#fa8c16', '气体浓度异常': '#722ed1' }

async function initMap() {
  await nextTick()
  const el = document.getElementById('alarmMap')
  if (!el) return
  try {
    const L = await import('leaflet')
    mapInstance = L.map('alarmMap').setView([34.77, 113.65], 12)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(mapInstance)

    const res = await getActiveAlarmPoints()
    const points = res.data || []
    for (const p of points) {
      const color = typeColors[p.warningType] || '#999'
      const marker = L.circleMarker([34.77 + (Math.random() - 0.5) * 0.02, 113.65 + (Math.random() - 0.5) * 0.02], {
        radius: 10, fillColor: color, color: '#fff', weight: 2, fillOpacity: 0.8
      }).addTo(mapInstance)
      marker.bindPopup(`<b>${p.deviceCode}</b><br/>${p.warningType}<br/>值: ${p.actualValue}`)
      marker.on('click', () => { currentAlarm.value = p; detailVisible.value = true })
    }
  } catch (e) { el.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;">请安装Leaflet: npm install leaflet</div>' }
}

onMounted(() => { initMap() })
</script>

<style scoped>
.alarm-map-container { position: relative; height: calc(100vh - 100px); padding: 16px; }
.legend-card { position: absolute; top: 32px; right: 32px; z-index: 1000; width: 160px; }
.legend-items { display: flex; flex-direction: column; gap: 6px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map { width: 100%; height: 100%; border-radius: 4px; }
</style>
