<!--相邻地下空间可燃气体浓度监测-->
<template>
  <div class="methane-monitor-dashboard">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-icon><Warning /></el-icon>
        <span class="title">燃气管网相邻地下空间甲烷监测中心</span>
        <div class="stats-badge">
          <span class="stat-item critical"><i class="dot"></i>严重告警 {{ criticalCount }}</span>
          <span class="stat-item warning"><i class="dot"></i>预警 {{ warningCount }}</span>
          <span class="stat-item normal"><i class="dot"></i>正常 {{ normalCount }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-input v-model="searchKeyword" placeholder="搜索点位/地址" clearable :prefix-icon="Search" style="width:200px" />
        <el-button type="primary" :icon="Refresh" @click="refreshData">刷新</el-button>
        <el-button :icon="Download" @click="exportReport">导出报表</el-button>
      </div>
    </div>

    <!-- KPI指标卡片 -->
    <div class="kpi-cards">
      <div class="kpi-card critical">
        <div class="kpi-value">{{ maxConcentration }}<span class="unit">%VOL</span></div>
        <div class="kpi-label">最高甲烷浓度</div>
        <div class="kpi-trend">点位: {{ maxConcentrationPoint }}</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ avgConcentration }}<span class="unit">%VOL</span></div>
        <div class="kpi-label">平均浓度</div>
        <div class="kpi-trend">监测点位 {{ totalPoints }} 个</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ onlineRate }}<span class="unit">%</span></div>
        <div class="kpi-label">设备在线率</div>
        <div class="kpi-trend">在线 {{ onlineCount }}/{{ totalDevices }}</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value">{{ coverageRate }}<span class="unit">%</span></div>
        <div class="kpi-label">管网覆盖率</div>
        <div class="kpi-trend">覆盖 {{ coveredPipelines }} 条管线</div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-layout">
      <!-- 左侧监测点位列表 -->
      <div class="point-list-panel">
        <div class="list-header">
          <span>监测点位列表</span>
          <span class="total-num">共 {{ filteredPoints.length }} 个</span>
        </div>
        <div class="filter-row">
          <el-select v-model="alertFilter" placeholder="告警等级" clearable size="small" style="width:100%">
            <el-option label="严重告警" value="critical" />
            <el-option label="预警" value="warning" />
            <el-option label="正常" value="normal" />
          </el-select>
        </div>
        <div class="point-list">
          <div
            v-for="point in paginatedPoints"
            :key="point.id"
            class="point-item"
            :class="{ selected: selectedPoint?.id === point.id, critical: point.alertLevel === 'critical', warning: point.alertLevel === 'warning' }"
            @click="selectPoint(point)"
          >
            <div class="point-header">
              <span class="point-name">{{ point.name }}</span>
              <el-tag :type="point.alertLevel === 'critical' ? 'danger' : point.alertLevel === 'warning' ? 'warning' : 'success'" size="small">
                {{ point.alertLevel === 'critical' ? '严重' : point.alertLevel === 'warning' ? '预警' : '正常' }}
              </el-tag>
            </div>
            <div class="point-address">{{ point.address }}</div>
            <div class="point-concentration" :class="{ high: point.methane > 1.0 }">
              甲烷: <b>{{ point.methane }}</b> %VOL
            </div>
            <div class="point-device">设备: {{ point.deviceModel }} | 电量: {{ point.battery }}% | {{ point.updateTime }}</div>
          </div>
          <el-empty v-if="filteredPoints.length === 0" description="暂无匹配点位" :image-size="50" />
        </div>
        <div class="pagination-area">
          <el-pagination small layout="prev, pager, next" :total="filteredPoints.length" :page-size="pageSize" v-model:current-page="currentPage" />
        </div>
      </div>

      <!-- 右侧GIS地图与详情 -->
      <div class="map-panel">
        <div class="map-toolbar">
          <el-button-group>
            <el-button size="small" :icon="ZoomIn" @click="zoomIn">放大</el-button>
            <el-button size="small" :icon="ZoomOut" @click="zoomOut">缩小</el-button>
            <el-button size="small" :icon="Location" @click="fitBounds">重置视图</el-button>
          </el-button-group>
          <div class="legend">
            <span><i class="legend-dot critical-dot"></i>严重告警 (>1%VOL)</span>
            <span><i class="legend-dot warning-dot"></i>预警 (0.5~1%)</span>
            <span><i class="legend-dot normal-dot"></i>正常 (<0.5%)</span>
            <span><i class="legend-dot offline-dot"></i>离线设备</span>
          </div>
        </div>
        <div class="map-wrapper">
          <div id="methaneBaiduMap" class="map-div"></div>
          <div v-if="mapError" class="map-error">{{ mapError }}</div>
        </div>

        <!-- 点位详情抽屉 -->
        <el-drawer v-model="detailDrawerVisible" :title="`监测点位详情 - ${currentPoint?.name || ''}`" size="480px" direction="rtl">
          <div v-if="currentPoint" class="point-detail">
            <el-descriptions :column="1" border size="small">
              <el-descriptions-item label="点位名称">{{ currentPoint.name }}</el-descriptions-item>
              <el-descriptions-item label="点位编号">{{ currentPoint.code }}</el-descriptions-item>
              <el-descriptions-item label="详细地址">{{ currentPoint.address }}</el-descriptions-item>
              <el-descriptions-item label="经纬度">{{ currentPoint.lng }}, {{ currentPoint.lat }}</el-descriptions-item>
              <el-descriptions-item label="所属管线">{{ currentPoint.pipelineName }}</el-descriptions-item>
              <el-descriptions-item label="空间类型">{{ currentPoint.spaceType }}</el-descriptions-item>
              <el-descriptions-item label="风险等级">
                <el-tag :type="currentPoint.alertLevel === 'critical' ? 'danger' : currentPoint.alertLevel === 'warning' ? 'warning' : 'success'">
                  {{ currentPoint.alertLevel === 'critical' ? '严重' : currentPoint.alertLevel === 'warning' ? '预警' : '正常' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>

            <div class="data-section">
              <div class="section-title">实时监测数据</div>
              <div class="data-cards">
                <div class="data-card" :class="{ danger: currentPoint.methane > 1.0, warning: currentPoint.methane > 0.5 && currentPoint.methane <= 1.0 }">
                  <div class="data-label">甲烷浓度</div>
                  <div class="data-value">{{ currentPoint.methane }} <span class="unit">%VOL</span></div>
                </div>
                <div class="data-card">
                  <div class="data-label">环境温度</div>
                  <div class="data-value">{{ currentPoint.temperature }} <span class="unit">°C</span></div>
                </div>
                <div class="data-card">
                  <div class="data-label">环境湿度</div>
                  <div class="data-value">{{ currentPoint.humidity }} <span class="unit">%RH</span></div>
                </div>
              </div>
            </div>

            <div class="device-section">
              <div class="section-title">监测设备信息</div>
              <el-descriptions :column="1" border size="small">
                <el-descriptions-item label="设备编号">{{ currentPoint.deviceCode }}</el-descriptions-item>
                <el-descriptions-item label="设备型号">{{ currentPoint.deviceModel }}</el-descriptions-item>
                <el-descriptions-item label="生产厂商">{{ currentPoint.manufacturer }}</el-descriptions-item>
                <el-descriptions-item label="安装日期">{{ currentPoint.installDate }}</el-descriptions-item>
                <el-descriptions-item label="运行状态">
                  <el-tag :type="currentPoint.deviceStatus === 'online' ? 'success' : 'danger'">
                    {{ currentPoint.deviceStatus === 'online' ? '在线' : '离线' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="电池电量">{{ currentPoint.battery }}%</el-descriptions-item>
                <el-descriptions-item label="信号强度">{{ currentPoint.signal }}%</el-descriptions-item>
                <el-descriptions-item label="最后通讯">{{ currentPoint.updateTime }}</el-descriptions-item>
              </el-descriptions>
            </div>

            <div class="trend-section">
              <div class="section-title">浓度趋势（最近24小时）</div>
              <div ref="trendChartRef" class="trend-chart"></div>
            </div>

            <div class="alert-section" v-if="currentPoint.alertRecords?.length">
              <div class="section-title">告警记录</div>
              <el-timeline>
                <el-timeline-item v-for="record in currentPoint.alertRecords" :key="record.id" :timestamp="record.time" :type="record.type === 'danger' ? 'danger' : 'warning'">
                  {{ record.content }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
import { Warning, Refresh, Download, Search, ZoomIn, ZoomOut, Location } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

// ==================== 沅陵县太常片区相邻地下空间甲烷监测数据 ====================
const MAP_CENTER = { lng: 110.395, lat: 28.470 }
const MAP_DEFAULT_ZOOM = 14

const mockPoints = ref([
  {
    id: 1, code: 'CH4-YL-001', name: '辰州北路地下管廊1#', address: '沅陵县太常片区辰州北路地下综合管廊南段',
    lng: 110.3940, lat: 28.4765, methane: 1.42, temperature: 20.1, humidity: 68,
    pipelineName: '辰州北路高压段', spaceType: '地下综合管廊', alertLevel: 'critical',
    deviceCode: 'GT-CH4-1001', deviceModel: 'GT-CX2000', manufacturer: '汉威科技', installDate: '2025-03-15',
    deviceStatus: 'online', battery: 68, signal: 82, updateTime: '2026-06-13 15:23:45',
    alertRecords: [
      { id: 1, time: '2026-06-13 13:20:00', type: 'danger', content: '甲烷浓度1.42%VOL，严重超限，已触发联动排风' },
      { id: 2, time: '2026-06-13 10:15:00', type: 'warning', content: '甲烷浓度0.88%VOL，超过预警阈值0.5%' }
    ],
    trendData: [0.45, 0.48, 0.52, 0.58, 0.62, 0.68, 0.72, 0.78, 0.82, 0.88, 0.95, 1.05, 1.15, 1.25, 1.32, 1.38, 1.42, 1.42, 1.40, 1.38, 1.35, 1.32, 1.28, 1.25]
  },
  {
    id: 2, code: 'CH4-YL-002', name: '古城中路地下空间2#', address: '沅陵县太常片区古城中路太常安置区地下车库B区',
    lng: 110.3972, lat: 28.4710, methane: 0.68, temperature: 22.3, humidity: 72,
    pipelineName: '古城中路中压段', spaceType: '地下车库', alertLevel: 'warning',
    deviceCode: 'GT-CH4-1002', deviceModel: 'GT-CX2000', manufacturer: '汉威科技', installDate: '2025-04-20',
    deviceStatus: 'online', battery: 75, signal: 88, updateTime: '2026-06-13 15:22:30',
    alertRecords: [
      { id: 1, time: '2026-06-13 14:30:00', type: 'warning', content: '甲烷浓度0.68%VOL，超过预警阈值0.5%，需关注' }
    ],
    trendData: [0.42, 0.44, 0.46, 0.48, 0.50, 0.52, 0.55, 0.58, 0.60, 0.62, 0.64, 0.66, 0.68, 0.68, 0.67, 0.66, 0.65, 0.64, 0.62, 0.60, 0.58, 0.55, 0.52, 0.50]
  },
  {
    id: 3, code: 'CH4-YL-003', name: '迎宾东路地下通道3#', address: '沅陵县太常片区迎宾东路商贸城地下人行通道',
    lng: 110.4055, lat: 28.4690, methane: 2.15, temperature: 23.5, humidity: 75,
    pipelineName: '迎宾东路中压段', spaceType: '地下人行通道', alertLevel: 'critical',
    deviceCode: 'GT-CH4-1003', deviceModel: 'GT-CX2000Pro', manufacturer: '汉威科技', installDate: '2025-05-10',
    deviceStatus: 'online', battery: 52, signal: 71, updateTime: '2026-06-13 15:21:15',
    alertRecords: [
      { id: 1, time: '2026-06-13 12:45:00', type: 'danger', content: '甲烷浓度2.15%VOL，严重超标，已通知燃气公司现场处置' },
      { id: 2, time: '2026-06-13 08:30:00', type: 'danger', content: '甲烷浓度1.85%VOL，持续上升趋势' }
    ],
    trendData: [0.85, 0.92, 1.05, 1.18, 1.32, 1.45, 1.58, 1.68, 1.75, 1.82, 1.90, 1.98, 2.05, 2.10, 2.15, 2.15, 2.12, 2.10, 2.08, 2.05, 2.02, 1.98, 1.95, 1.90]
  },
  {
    id: 4, code: 'CH4-YL-004', name: '建设路地下管沟4#', address: '沅陵县太常片区建设路县政府南侧地下管线沟',
    lng: 110.3940, lat: 28.4656, methane: 0.18, temperature: 19.2, humidity: 62,
    pipelineName: '建设路中压段', spaceType: '地下管线沟', alertLevel: 'normal',
    deviceCode: 'GT-CH4-1004', deviceModel: 'GT-CX2000', manufacturer: '汉威科技', installDate: '2025-06-01',
    deviceStatus: 'online', battery: 91, signal: 93, updateTime: '2026-06-13 15:24:00',
    alertRecords: [],
    trendData: [0.12, 0.13, 0.14, 0.14, 0.15, 0.15, 0.16, 0.16, 0.17, 0.17, 0.18, 0.18, 0.18, 0.17, 0.17, 0.16, 0.16, 0.15, 0.15, 0.14, 0.14, 0.13, 0.13, 0.12]
  },
  {
    id: 6, code: 'CH4-YL-006', name: '天宁东路管沟6#', address: '沅陵县太常片区天宁东路末端综合管沟',
    lng: 110.4088, lat: 28.4752, methane: 0.72, temperature: 22.0, humidity: 65,
    pipelineName: '天宁路中压段', spaceType: '综合管沟', alertLevel: 'warning',
    deviceCode: 'GT-CH4-1006', deviceModel: 'GT-CX2000', manufacturer: '汉威科技', installDate: '2025-08-20',
    deviceStatus: 'online', battery: 72, signal: 79, updateTime: '2026-06-13 15:19:45',
    alertRecords: [
      { id: 1, time: '2026-06-13 15:00:00', type: 'warning', content: '甲烷浓度0.72%VOL，超过预警阈值' }
    ],
    trendData: [0.35, 0.38, 0.42, 0.45, 0.48, 0.52, 0.55, 0.58, 0.62, 0.65, 0.68, 0.70, 0.72, 0.72, 0.71, 0.70, 0.68, 0.66, 0.64, 0.62, 0.60, 0.58, 0.55, 0.52]
  },
  {
    id: 7, code: 'CH4-YL-007', name: '辰州中路管廊入口7#', address: '沅陵县太常片区辰州中路与天宁路交叉口管廊入口',
    lng: 110.3935, lat: 28.4710, methane: 0.35, temperature: 19.8, humidity: 66,
    pipelineName: '辰州中路高压段', spaceType: '管廊入口井', alertLevel: 'normal',
    deviceCode: 'GT-CH4-1007', deviceModel: 'GT-CX2000', manufacturer: '汉威科技', installDate: '2025-09-10',
    deviceStatus: 'online', battery: 88, signal: 91, updateTime: '2026-06-13 15:25:10',
    alertRecords: [],
    trendData: [0.28, 0.29, 0.30, 0.31, 0.32, 0.33, 0.34, 0.34, 0.35, 0.35, 0.35, 0.34, 0.34, 0.33, 0.32, 0.31, 0.30, 0.29, 0.29, 0.28, 0.28, 0.28, 0.29, 0.30]
  },
  {
    id: 8, code: 'CH4-YL-008', name: '古城北路管廊8#', address: '沅陵县太常片区古城北路与天宁路交叉口管廊检查井',
    lng: 110.3978, lat: 28.4775, methane: 0.22, temperature: 21.5, humidity: 60,
    pipelineName: '古城北路中压段', spaceType: '管廊检查井', alertLevel: 'normal',
    deviceCode: 'GT-CH4-1008', deviceModel: 'GT-CX2000', manufacturer: '汉威科技', installDate: '2025-10-05',
    deviceStatus: 'online', battery: 82, signal: 87, updateTime: '2026-06-13 15:23:00',
    alertRecords: [],
    trendData: [0.18, 0.19, 0.19, 0.20, 0.20, 0.21, 0.21, 0.22, 0.22, 0.22, 0.23, 0.23, 0.22, 0.22, 0.21, 0.21, 0.20, 0.20, 0.19, 0.19, 0.18, 0.18, 0.19, 0.19]
  },
  {
    id: 9, code: 'CH4-YL-009', name: '建设东路工业园9#', address: '沅陵县太常片区建设东路工业园地下管廊入口',
    lng: 110.4050, lat: 28.4658, methane: 0.55, temperature: 24.2, humidity: 58,
    pipelineName: '建设东路高压段', spaceType: '工业园地下管廊', alertLevel: 'warning',
    deviceCode: 'GT-CH4-1009', deviceModel: 'GT-CX2000Pro', manufacturer: '汉威科技', installDate: '2025-11-20',
    deviceStatus: 'online', battery: 65, signal: 74, updateTime: '2026-06-13 15:22:00',
    alertRecords: [
      { id: 1, time: '2026-06-13 11:40:00', type: 'warning', content: '甲烷浓度0.55%VOL，略超预警阈值，持续观察中' }
    ],
    trendData: [0.30, 0.32, 0.35, 0.38, 0.40, 0.42, 0.45, 0.48, 0.50, 0.52, 0.55, 0.55, 0.54, 0.52, 0.50, 0.48, 0.46, 0.44, 0.42, 0.40, 0.38, 0.35, 0.33, 0.32]
  },
  {
    id: 11, code: 'CH4-YL-011', name: '滨江东路商业街11#', address: '沅陵县太常片区滨江东路商业街地下管沟',
    lng: 110.4066, lat: 28.4630, methane: 0.95, temperature: 22.8, humidity: 70,
    pipelineName: '滨江东路低压段', spaceType: '商业街地下管沟', alertLevel: 'warning',
    deviceCode: 'GT-CH4-1011', deviceModel: 'GT-CX2000Pro', manufacturer: '汉威科技', installDate: '2026-01-15',
    deviceStatus: 'online', battery: 58, signal: 68, updateTime: '2026-06-13 15:20:50',
    alertRecords: [
      { id: 1, time: '2026-06-13 16:10:00', type: 'warning', content: '甲烷浓度0.95%VOL，接近严重告警阈值，需加密巡检' }
    ],
    trendData: [0.55, 0.58, 0.62, 0.65, 0.68, 0.72, 0.75, 0.78, 0.82, 0.85, 0.88, 0.90, 0.92, 0.95, 0.95, 0.94, 0.92, 0.90, 0.88, 0.85, 0.82, 0.78, 0.75, 0.72]
  }
])

// ==================== 统计数据 ====================
const criticalCount = computed(() => mockPoints.value.filter(p => p.alertLevel === 'critical').length)
const warningCount = computed(() => mockPoints.value.filter(p => p.alertLevel === 'warning').length)
const normalCount = computed(() => mockPoints.value.filter(p => p.alertLevel === 'normal').length)
const totalPoints = computed(() => mockPoints.value.length)
const totalDevices = computed(() => mockPoints.value.length)
const onlineCount = computed(() => mockPoints.value.filter(p => p.deviceStatus === 'online').length)
const onlineRate = computed(() => ((onlineCount.value / totalDevices.value) * 100).toFixed(1))
const coverageRate = computed(() => 82)
const coveredPipelines = computed(() => 10)
const maxConcentration = computed(() => Math.max(...mockPoints.value.map(p => p.methane)).toFixed(2))
const maxConcentrationPoint = computed(() => mockPoints.value.find(p => p.methane === Math.max(...mockPoints.value.map(x => x.methane)))?.name || '—')
const avgConcentration = computed(() => (mockPoints.value.reduce((sum, p) => sum + p.methane, 0) / totalPoints.value).toFixed(2))

// ==================== 筛选与分页 ====================
const searchKeyword = ref('')
const alertFilter = ref('')
const currentPage = ref(1)
const pageSize = 5
const selectedPoint = ref(mockPoints.value[0])
const currentPoint = ref(null)
const detailDrawerVisible = ref(false)
const trendChartRef = ref(null)
let trendChartInstance = null

const filteredPoints = computed(() => {
  let list = mockPoints.value
  if (searchKeyword.value) {
    const kw = searchKeyword.value.toLowerCase()
    list = list.filter(p => p.name.toLowerCase().includes(kw) || p.address.toLowerCase().includes(kw))
  }
  if (alertFilter.value) list = list.filter(p => p.alertLevel === alertFilter.value)
  return list
})
const paginatedPoints = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return filteredPoints.value.slice(start, start + pageSize)
})

// ==================== 选择点位 ====================
function selectPoint(point) {
  currentPoint.value = point
  detailDrawerVisible.value = true
  nextTick(() => renderTrendChart())
}

// ==================== ECharts趋势图 ====================
function renderTrendChart() {
  if (!trendChartRef.value || !currentPoint.value) return
  if (!trendChartInstance) {
    trendChartInstance = echarts.init(trendChartRef.value)
  }
  const times = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`)
  const data = currentPoint.value.trendData

  trendChartInstance.setOption({
    tooltip: {
      trigger: 'axis',
      formatter: params => `${params[0].axisValue}<br/>甲烷浓度: <b>${params[0].value} %VOL</b>`
    },
    grid: { left: '3%', right: '5%', top: 10, bottom: 20, containLabel: true },
    xAxis: { type: 'category', data: times, axisLabel: { fontSize: 10, interval: 4 }, axisTick: { show: false } },
    yAxis: { type: 'value', name: '%VOL', min: 0, axisTick: { show: false }, splitLine: { lineStyle: { color: '#f0f0f0' } } },
    series: [{
      name: '甲烷浓度', type: 'line', data,
      smooth: true, symbol: 'circle', symbolSize: 3,
      lineStyle: { color: '#f56c6c', width: 2 },
      itemStyle: { color: '#f56c6c' },
      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(245,108,108,0.2)' }, { offset: 1, color: 'rgba(245,108,108,0.02)' }]) },
      markLine: {
        silent: true, symbol: 'none',
        label: { fontSize: 10, formatter: '{b}' },
        data: [
          { name: '预警0.5%', yAxis: 0.5, lineStyle: { color: '#e6a23c', type: 'dashed', width: 1 } },
          { name: '严重1.0%', yAxis: 1.0, lineStyle: { color: '#f56c6c', type: 'dashed', width: 1 } }
        ]
      }
    }]
  })
}

// ==================== 百度地图 ====================
const mapError = ref('')
let mapInstance = null
let activeInfoWindow = null
let mapMarkers = []

function waitForBMapGL() {
  if (typeof BMapGL !== 'undefined') { initMap(); return }
  let attempts = 0
  const timer = setInterval(() => {
    attempts++
    if (typeof BMapGL !== 'undefined') { clearInterval(timer); initMap(); return }
    if (attempts >= 50) { clearInterval(timer); mapError.value = '百度地图脚本加载超时，请刷新页面重试。' }
  }, 200)
}

function closeInfoWindow() {
  if (activeInfoWindow) {
    try { activeInfoWindow.close(); mapInstance.removeOverlay(activeInfoWindow) } catch (_) {}
    activeInfoWindow = null
  }
}

function initMap() {
  const el = document.getElementById('methaneBaiduMap')
  if (!el) { mapError.value = '地图容器未找到。'; return }

  try {
    mapInstance = new BMapGL.Map('methaneBaiduMap', { enableMapClick: true })
  } catch (e) {
    mapError.value = '百度地图初始化失败，请检查AK和网络连接。'
    return
  }

  mapInstance.centerAndZoom(new BMapGL.Point(MAP_CENTER.lng, MAP_CENTER.lat), MAP_DEFAULT_ZOOM)
  mapInstance.enableScrollWheelZoom(true)
  mapInstance.setMinZoom(12)
  mapInstance.setMaxZoom(18)

  mapInstance.addEventListener('click', () => {
    closeInfoWindow()
  })

  renderMapMarkers()
}

function renderMapMarkers() {
  if (!mapInstance || typeof BMapGL === 'undefined') return
  closeInfoWindow()
  mapMarkers.forEach(m => { try { mapInstance.removeOverlay(m) } catch (_) {} })
  mapMarkers = []

  mockPoints.value.forEach(p => {
    const pt = new BMapGL.Point(p.lng, p.lat)
    let color = '#67c23a'
    let size = 12
    if (p.alertLevel === 'critical') { color = '#f56c6c'; size = 16 }
    else if (p.alertLevel === 'warning') { color = '#e6a23c'; size = 14 }
    if (p.deviceStatus === 'offline') { color = '#909399'; size = 10 }

    const html = `<div style="width:${size*2}px;height:${size*2}px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:bold;">CH4</div>`
    const label = new BMapGL.Label(html, {
      position: pt,
      offset: new BMapGL.Size(-size, -size)
    })
    label.setStyle({ border: 'none', background: 'transparent', padding: '0' })

    label.addEventListener('click', (e) => {
      if (e && e.domEvent) e.domEvent.stopPropagation()
      openPointInfo(p)
    })

    mapInstance.addOverlay(label)
    mapMarkers.push(label)

    // 严重告警脉冲圈
    if (p.alertLevel === 'critical') {
      const pulseHtml = `<div style="width:${size*3}px;height:${size*3}px;border-radius:50%;background:rgba(245,108,108,0.25);border:2px solid rgba(245,108,108,0.5);"></div>`
      const pulseLabel = new BMapGL.Label(pulseHtml, {
        position: pt,
        offset: new BMapGL.Size(-size * 1.5, -size * 1.5)
      })
      pulseLabel.setStyle({ border: 'none', background: 'transparent', padding: '0' })
      mapInstance.addOverlay(pulseLabel)
      mapMarkers.push(pulseLabel)
    }
  })
}

function openPointInfo(point) {
  selectPoint(point)
  closeInfoWindow()
  const pt = new BMapGL.Point(point.lng, point.lat)
  const levelText = point.alertLevel === 'critical' ? '严重告警' : point.alertLevel === 'warning' ? '预警' : '正常'
  const html = `<div style="font-size:13px;line-height:1.8;max-width:240px;"><b>${point.name}</b><br/>甲烷: <b style="color:${point.methane > 1 ? '#f56c6c' : point.methane > 0.5 ? '#e6a23c' : '#67c23a'}">${point.methane} %VOL</b><br/>状态: ${levelText}<br/>地址: ${point.address}</div>`
  activeInfoWindow = new BMapGL.InfoWindow(html, { width: 240, height: 120 })
  mapInstance.openInfoWindow(activeInfoWindow, pt)
  mapInstance.panTo(pt)
}

function zoomIn() { mapInstance?.zoomIn() }
function zoomOut() { mapInstance?.zoomOut() }
function fitBounds() {
  if (!mapInstance || typeof BMapGL === 'undefined') return
  mapInstance.centerAndZoom(new BMapGL.Point(MAP_CENTER.lng, MAP_CENTER.lat), MAP_DEFAULT_ZOOM)
  closeInfoWindow()
}

function refreshData() {
  renderMapMarkers()
  ElMessage.success('数据已刷新')
}
function exportReport() { ElMessage.success('导出报表（演示功能）') }

// 搜索联动地图
watch([searchKeyword, alertFilter], () => {
  currentPage.value = 1
})

onMounted(() => {
  nextTick(() => {
    waitForBMapGL()
  })
  window.addEventListener('resize', () => { try { trendChartInstance?.resize() } catch {} })
})

onBeforeUnmount(() => {
  try { mapInstance?.destroy() } catch (_) {}
  try { trendChartInstance?.dispose() } catch (_) {}
  mapInstance = null
  trendChartInstance = null
})
</script>

<style scoped>
.methane-monitor-dashboard {
  background: #f0f2f6;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-header {
  background: #fff;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.header-left .title { font-size: 1.25rem; font-weight: 600; color: #1f2d3d; }
.stats-badge { display: flex; gap: 20px; }
.stat-item { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat-item.critical { color: #f56c6c; }
.stat-item.warning { color: #e6a23c; }
.stat-item.normal { color: #67c23a; }
.stat-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c23a; }
.stat-item.critical .dot { background: #f56c6c; }
.stat-item.warning .dot { background: #e6a23c; }
.header-right { display: flex; gap: 12px; }

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
  background: #fff;
  margin: 0 12px 12px 12px;
  border-radius: 12px;
  flex-shrink: 0;
}
.kpi-card { text-align: center; }
.kpi-card.critical .kpi-value { color: #f56c6c; }
.kpi-value { font-size: 28px; font-weight: 700; }
.kpi-value .unit { font-size: 13px; font-weight: 400; }
.kpi-label { font-size: 13px; color: #909399; margin-top: 4px; }
.kpi-trend { font-size: 11px; color: #67c23a; margin-top: 4px; }

.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0 12px 12px 12px;
  gap: 12px;
}

/* 左侧列表 */
.point-list-panel {
  width: 370px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.list-header {
  padding: 14px 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.total-num { font-size: 12px; color: #909399; font-weight: 400; }
.filter-row { padding: 6px 16px; }
.point-list { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.point-item {
  padding: 12px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: #fafbfc;
  border: 1px solid #e9ecef;
  cursor: pointer;
  transition: all 0.2s;
}
.point-item:hover { background: #f0f5ff; }
.point-item.selected { background: #ecf5ff; border-color: #409eff; }
.point-item.critical { border-left: 3px solid #f56c6c; }
.point-item.warning { border-left: 3px solid #e6a23c; }
.point-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.point-name { font-weight: 600; font-size: 14px; }
.point-address { font-size: 11px; color: #909399; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.point-concentration { font-size: 13px; margin-bottom: 4px; }
.point-concentration b { color: #1f2d3d; }
.point-concentration.high { color: #f56c6c; }
.point-concentration.high b { color: #f56c6c; }
.point-device { font-size: 11px; color: #c0c4cc; }
.pagination-area { padding: 10px; text-align: center; border-top: 1px solid #eee; }

/* 右侧地图 */
.map-panel {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.legend { display: flex; gap: 16px; font-size: 12px; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.critical-dot { background: #f56c6c; }
.warning-dot { background: #e6a23c; }
.normal-dot { background: #67c23a; }
.offline-dot { background: #909399; }
.map-wrapper { flex: 1; position: relative; overflow: hidden; }
.map-div { width: 100%; height: 100%; }
.map-error {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #f56c6c; font-size: 14px; background: #fff; padding: 16px 24px;
  border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* 详情抽屉 */
.point-detail { padding: 8px; }
.section-title { font-weight: 600; margin: 16px 0 12px 0; font-size: 14px; }
.data-cards { display: flex; gap: 12px; }
.data-card { flex: 1; background: #f8f9fc; border-radius: 12px; padding: 12px; text-align: center; }
.data-card.danger { background: #fef0f0; border: 1px solid #f56c6c; }
.data-card.warning { background: #fdf6ec; border: 1px solid #e6a23c; }
.data-label { font-size: 12px; color: #909399; }
.data-value { font-size: 20px; font-weight: 700; margin-top: 4px; }
.data-value .unit { font-size: 11px; font-weight: 400; color: #909399; }
.trend-chart { height: 200px; }
.device-section { margin-top: 8px; }
.alert-section { margin-top: 8px; }
</style>
