<template>
  <div class="bzyxqk-screen">
    <!-- ==================== 顶部标题栏 ==================== -->
    <div class="screen-header">
      <div class="header-left">
        <span class="header-time">{{ currentDateTime }}</span>
      </div>
      <div class="header-center">
        <h1 class="header-title">泵站运行情况GIS一张图</h1>
      </div>
      <div class="header-right"></div>
    </div>

    <!-- ==================== 主体三栏布局 ==================== -->
    <div class="screen-body">
      <!-- ========== 左侧面板 ========== -->
      <div class="panel-left">
        <!-- 泵站概况 -->
        <div class="panel-box" style="flex: 0 0 auto;">
          <div class="panel-title">
            <span class="title-icon">▶</span> 泵站概况
          </div>
          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-val">{{ pumpStats.total }}</div>
              <div class="stat-label">泵站总数</div>
            </div>
            <div class="stat-card">
              <div class="stat-val green">{{ pumpStats.running }}</div>
              <div class="stat-label">运行中</div>
            </div>
            <div class="stat-card">
              <div class="stat-val gray">{{ pumpStats.stopped }}</div>
              <div class="stat-label">已停止</div>
            </div>
            <div class="stat-card">
              <div class="stat-val red">{{ pumpStats.fault }}</div>
              <div class="stat-label">故障</div>
            </div>
          </div>
          <div class="pie-chart-wrapper">
            <div id="bzyxqkPieChart" class="chart-area"></div>
            <div class="pie-legend">
              <div class="legend-item" v-for="(item, i) in pieData" :key="i">
                <span class="legend-dot" :style="{ background: item.color }"></span>
                <span class="legend-label">{{ item.name }}</span>
                <span class="legend-value">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 泵站列表 -->
        <div class="panel-box" style="flex: 1 1 0;">
          <div class="panel-title">
            <span class="title-icon">▶</span> 泵站列表
          </div>
          <div class="pump-table-wrap">
            <table class="dark-table">
              <thead>
                <tr>
                  <th>泵站名称</th>
                  <th>状态</th>
                  <th>设计流量</th>
                  <th>设计扬程</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, i) in pumpList" :key="i"
                    :class="{ 'row-active': selectedPumpIndex === i }"
                    @click="selectPump(i)">
                  <td :title="row.name">{{ row.name }}</td>
                  <td>
                    <span :class="'status-tag status-' + row.statusClass">{{ row.status }}</span>
                  </td>
                  <td>{{ row.designFlow }}</td>
                  <td>{{ row.designHead }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- ========== 中间地图区域 ========== -->
      <div class="panel-center">
        <div class="map-search">
          <input type="text" placeholder="搜索泵站" class="search-input" v-model="searchKeyword" @input="onSearchPump" />
          <span class="search-icon">🔍</span>
        </div>
        <div id="bzyxqkMap" class="map-container"></div>
      </div>

      <!-- ========== 右侧面板 ========== -->
      <div class="panel-right">
        <!-- 深度曲线 -->
        <div class="panel-box" style="flex: 1 1 0;">
          <div class="panel-title">
            <span class="title-icon">▶</span>数据统计
          </div>
          <div id="bzyxqkLineChart" class="chart-area-lg"></div>
        </div>

        <!-- 视频监控 -->
        <div class="panel-box" style="flex: 0 0 auto;">
          <div class="panel-title">
            <span class="title-icon">▶</span> 视频监控
          </div>
          <div class="video-grid">
            <div class="video-item" v-for="(v, i) in videoList" :key="i">
              <div class="video-placeholder">
                <span class="camera-icon">📷</span>
              </div>
              <div class="video-name">{{ v.name }}</div>
            </div>
          </div>
        </div>

        <!-- 报警记录 -->
        <div class="panel-box" style="flex: 1 1 0;">
          <div class="panel-title">
            <span class="title-icon">▶</span> 历史报警记录
          </div>
          <div class="alert-stats">
            <div class="alert-stat-card">
              <div class="alert-stat-val">{{ alarmStats.total }}</div>
              <div class="alert-stat-label">报警总数</div>
            </div>
            <div class="alert-stat-card">
              <div class="alert-stat-val green">{{ alarmStats.handled }}</div>
              <div class="alert-stat-label">已处置</div>
            </div>
            <div class="alert-stat-card">
              <div class="alert-stat-val red">{{ alarmStats.unhandled }}</div>
              <div class="alert-stat-label">未处置</div>
            </div>
          </div>
          <div class="alarm-table-wrap">
            <table class="dark-table">
              <thead>
                <tr>
                  <th>站</th>
                  <th>时间</th>
                  <th>类型</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, i) in alarmList" :key="i">
                  <td :title="row.station">{{ row.station }}</td>
                  <td>{{ row.time }}</td>
                  <td>{{ row.type }}</td>
                  <td>
                    <span :class="'handle-tag ' + (row.handled ? 'handled' : 'unhandled')">
                      {{ row.handled ? '已处置' : '未处置' }}
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Bzyxqk">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import locationIcon from '@/assets/images/location.png'
import { getFacilityPage, getPumpStationById, getPumpStationMonthlyStats, getAlarmDataPage } from '@/api/drainage'

// ==================== 实时时间 ====================
const currentDateTime = ref('')
let timer = null

function updateTime() {
  const now = new Date()
  const pad = n => String(n).padStart(2, '0')
  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
  currentDateTime.value = `${now.getFullYear()}/${pad(now.getMonth() + 1)}/${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())} 星期${weekDays[now.getDay()]}`
}

// ==================== 泵站概况 ====================
// 泵站总数/运行/故障/检修 来自 water_pump_station 表 status 字段
const pumpStats = reactive({ total: 0, running: 0, stopped: 0, fault: 0 })

const pieData = computed(() => [
  { name: '运行中', value: pumpStats.running, color: '#67c23a' },
  { name: '已停止', value: pumpStats.stopped, color: '#909399' },
  { name: '故障', value: pumpStats.fault, color: '#f56c6c' }
])

// ==================== 泵站列表 ====================
const pumpList = ref([])
const facilityStartDate = ref('') // 工程设施最早关联日期

const selectedPumpIndex = ref(-1)

function selectPump(index) {
  selectedPumpIndex.value = index
  const pump = pumpList.value[index]
  if (!pump) return
  // 加载深度曲线
  initLineChart()
  // 加载报警数据
  loadPumpAlarm(pump.stationCode)
}

// ==================== 搜索 ====================
const searchKeyword = ref('')

function onSearchPump() {
  if (!searchKeyword.value.trim()) return
  const idx = pumpList.value.findIndex(p => p.name.includes(searchKeyword.value.trim()))
  if (idx >= 0) {
    selectPump(idx)
  }
}

// ==================== 深度曲线 ====================

// ==================== 视频监控 ====================
// TODO: 暂无视频监控API，保留mock数据
const videoList = ref([
  { name: '沅陵一泵站' },
  { name: '城北泵站' },
  { name: '河西泵站' },
  { name: '人民路泵站' }
])

// ==================== 报警记录 ====================
const alarmStats = reactive({ total: 0, handled: 0, unhandled: 0 })
const alarmList = ref([])

async function loadPumpAlarm(stationCode) {
  if (!stationCode) return
  try {
    const res = await getAlarmDataPage(1, 100, { deviceCode: stationCode })
    const pageData = res.code !== undefined ? res.data : res
    const records = pageData.records || pageData.rows || []
    alarmStats.total = records.length
    alarmStats.handled = records.filter(r => r.status === 1 || r.status === '1').length
    alarmStats.unhandled = alarmStats.total - alarmStats.handled
    alarmList.value = records.slice(0, 20).map(r => ({
      station: r.deviceName || r.deviceCode || stationCode,
      time: r.alarmTime || r.createTime || '-',
      type: r.alarmType || r.alarmContent || '-',
      handled: r.status === 1 || r.status === '1'
    }))
  } catch (e) {
    console.error('加载泵站报警失败', e)
    alarmStats.total = 0
    alarmStats.handled = 0
    alarmStats.unhandled = 0
    alarmList.value = []
  }
}

// ==================== 数据加载 ====================
async function loadData() {
  try {
    // 1. 先查询设施类型为"泵站"的工程设施，获取关联的泵站ID和坐标
    const facilityRes = await getFacilityPage(1, 1000, { facilityType: '泵站' })
    const facilityPage = facilityRes.code !== undefined ? facilityRes.data : facilityRes
    const facilities = facilityPage.records || []

    // 2. 收集所有关联的泵站ID和对应的设施坐标
    const pumpIdFacilityMap = {} // { pumpId: { lng, lat, facilityName, dataTime } }
    let earliestDataTime = null
    facilities.forEach(f => {
      if (f.equipmentId) {
        // 解析设施坐标（来自points字段）
        let fLng = 0, fLat = 0
        if (f.points) {
          try {
            const pts = typeof f.points === 'string' ? JSON.parse(f.points) : f.points
            if (Array.isArray(pts) && pts.length > 0) {
              fLng = Number(pts[0].lng) || 0
              fLat = Number(pts[0].lat) || 0
            }
          } catch (e) { /* ignore */ }
        }
        // 记录设施的数据时间（关联时间）
        const fTime = f.dataTime || f.createTime || ''
        if (fTime && (!earliestDataTime || fTime < earliestDataTime)) {
          earliestDataTime = fTime
        }
        // 分割多个ID
        const ids = f.equipmentId.split(',').map(s => s.trim()).filter(Boolean)
        ids.forEach(id => {
          pumpIdFacilityMap[id] = { lng: fLng, lat: fLat, facilityName: f.name || '', dataTime: fTime }
        })
      }
    })

    const pumpIds = Object.keys(pumpIdFacilityMap)
    // 保存最早关联日期
    facilityStartDate.value = earliestDataTime ? earliestDataTime.substring(0, 10) : ''
    if (pumpIds.length === 0) {
      pumpList.value = []
      pumpStats.total = 0
      pumpStats.running = 0
      pumpStats.stopped = 0
      pumpStats.fault = 0
      renderMapMarkers()
      return
    }

    // 3. 逐个查询泵站详情
    const results = []
    for (const id of pumpIds) {
      try {
        const res = await getPumpStationById(id)
        const item = res.code !== undefined ? res.data : res
        if (item && item.id) results.push(item)
      } catch (e) { /* skip */ }
    }

    // 4. 组装泵站列表数据（坐标来自工程设施的points）
    pumpList.value = results.map(item => {
      let status = '正常', statusClass = 'running'
      if (item.status === '1' || item.status === 1) { status = '故障'; statusClass = 'fault' }
      else if (item.status === '2' || item.status === 2) { status = '检修'; statusClass = 'repair' }

      const facilityInfo = pumpIdFacilityMap[String(item.id)] || {}
      return {
        id: item.id,
        stationCode: item.stationCode || item.station_code || '',
        name: item.stationName || item.station_name || '未命名泵站',
        status,
        statusClass,
        designFlow: item.designFlow ?? item.design_flow ?? '-',
        designHead: item.designHead ?? item.design_head ?? '-',
        lng: facilityInfo.lng || 0,
        lat: facilityInfo.lat || 0
      }
    })

    // 计算统计
    pumpStats.total = pumpList.value.length
    pumpStats.running = pumpList.value.filter(p => p.statusClass === 'running').length
    pumpStats.stopped = pumpList.value.filter(p => p.statusClass === 'repair').length
    pumpStats.fault = pumpList.value.filter(p => p.statusClass === 'fault').length

    // 渲染地图
    renderMapMarkers()

    // 默认选中第一个泵站加载曲线和报警
    if (pumpList.value.length > 0) {
      selectPump(0)
    }
  } catch (e) {
    console.error('加载泵站数据失败：', e)
  }
}

// ==================== 地图初始化 ====================
let mapInstance = null

function initMap() {
  const container = document.getElementById('bzyxqkMap')
  if (!container || typeof BMapGL === 'undefined') {
    console.warn('BMapGL 未加载或容器不存在')
    return
  }

  try {
    mapInstance = new BMapGL.Map('bzyxqkMap')
    const centerPoint = new BMapGL.Point(110.393, 28.452)
    mapInstance.centerAndZoom(centerPoint, 15)
    mapInstance.enableScrollWheelZoom(true)

    // 渲染泵站标记（数据加载完成后由loadData调用）
    renderMapMarkers()
  } catch (e) {
    console.error('百度地图初始化失败：', e)
  }
}

// 渲染地图标记（数据加载完成后调用）
function renderMapMarkers() {
  if (!mapInstance) return
  mapInstance.clearOverlays()

  const allPoints = []
  pumpList.value.forEach(pump => {
    if (pump.lng && pump.lat) {
      addMapMarker(pump)
      allPoints.push(new BMapGL.Point(pump.lng, pump.lat))
    }
  })

  // 自动调整视野以包含所有标记
  if (allPoints.length > 0) {
    mapInstance.setViewport(allPoints)
  }
}

function addMapMarker(pump) {
  const statusColor = {
    'running': '#67c23a',
    'stopped': '#909399',
    'fault': '#f56c6c'
  }
  const statusText = {
    'running': '运行',
    'stopped': '停止',
    'fault': '故障'
  }
  const color = statusColor[pump.statusClass] || '#409eff'
  const bPoint = new BMapGL.Point(pump.lng, pump.lat)

  const html = `<div style="text-align:center;cursor:pointer;">
    <div style="color:#fff;background:${color};border-radius:4px;padding:2px 6px;font-size:11px;white-space:nowrap;display:inline-block;margin-bottom:2px;">${pump.name}</div>
    <div><img src="${locationIcon}" style="width:24px;height:24px;display:block;margin:0 auto;"/></div>
  </div>`

  const label = new BMapGL.Label(html, {
    position: bPoint,
    offset: new BMapGL.Size(-30, -55)
  })
  label.setStyle({
    border: 'none',
    background: 'transparent',
    padding: '0'
  })
  mapInstance.addOverlay(label)

  // 点击标记弹出详情
  label.addEventListener('click', function () {
    const infoContent = `<div style="color:#333;font-size:13px;padding:4px;">
      <div style="font-weight:bold;margin-bottom:6px;font-size:14px;">${pump.name}</div>
      <div>运行状态：<b style="color:${color}">${statusText[pump.statusClass]}</b></div>
      <div>地址：${pump.address || '-'}</div>
      <div>区域：${pump.district || '-'}</div>
      <div>运营单位：${pump.operator || '-'}</div>
      <div>经度：${pump.lng}</div>
      <div>纬度：${pump.lat}</div>
    </div>`
    const infoWindow = new BMapGL.InfoWindow(infoContent, {
      width: 220,
      title: ''
    })
    mapInstance.openInfoWindow(infoWindow, bPoint)
  })
}

// ==================== ECharts 图表 ====================
let pieChart = null
let lineChart = null

function initPieChart() {
  const dom = document.getElementById('bzyxqkPieChart')
  if (!dom) return
  pieChart = echarts.init(dom)
  const total = pieData.value.reduce((s, d) => s + d.value, 0)
  pieChart.setOption({
    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
    legend: { show: false },
    graphic: [{
      type: 'text',
      left: 'center',
      top: '38%',
      style: { text: '泵站总数', fill: '#a0cfff', fontSize: 12, textAlign: 'center' }
    }, {
      type: 'text',
      left: 'center',
      top: '52%',
      style: { text: String(total), fill: '#fff', fontSize: 22, fontWeight: 'bold', textAlign: 'center' }
    }],
    series: [{
      type: 'pie',
      radius: ['45%', '70%'],
      center: ['50%', '50%'],
      label: { show: false },
      labelLine: { show: false },
      data: pieData.value.map(d => ({ name: d.name, value: d.value, itemStyle: { color: d.color } })),
      emphasis: { scale: true, scaleSize: 5 }
    }]
  })
}

async function initLineChart() {
  const container = document.getElementById('bzyxqkLineChart')
  if (!container) return

  let chartInstance = echarts.getInstanceByDom(container)
  if (!chartInstance) {
    chartInstance = echarts.init(container)
  }
  lineChart = chartInstance

  // 收集所有已关联泵站ID
  const allIds = pumpList.value.map(p => p.id).filter(Boolean)
  if (allIds.length === 0) {
    chartInstance.setOption({ title: { text: '暂无泵站数据', left: 'center', top: 'center', textStyle: { color: '#8ec6f0', fontSize: 14 } }, xAxis: { show: false }, yAxis: { show: false }, series: [] })
    return
  }

  try {
    const res = await getPumpStationMonthlyStats(allIds.join(','), facilityStartDate.value)
    const statsData = res.code !== undefined ? res.data : res
    if (!Array.isArray(statsData) || statsData.length === 0) {
      chartInstance.setOption({ title: { text: '暂无统计数据', left: 'center', top: 'center', textStyle: { color: '#8ec6f0', fontSize: 14 } }, xAxis: { show: false }, yAxis: { show: false }, series: [] })
      return
    }

    const months = statsData.map(d => d.month)
    const flowData = statsData.map(d => d.designFlow || 0)
    const headData = statsData.map(d => d.designHead || 0)

    chartInstance.setOption({
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      legend: { data: ['设计流量', '设计扬程'], top: 5, textStyle: { color: '#8ec6f0', fontSize: 11 } },
      grid: { top: 40, bottom: 30, left: 50, right: 50 },
      xAxis: { type: 'category', data: months, axisLabel: { color: '#8ec6f0', fontSize: 11 }, axisLine: { lineStyle: { color: '#3a5f7a' } } },
      yAxis: [
        { type: 'value', name: 'm³/h', nameTextStyle: { color: '#8ec6f0', fontSize: 10 }, axisLabel: { color: '#8ec6f0', fontSize: 10 }, splitLine: { lineStyle: { color: '#1e3a50' } } },
        { type: 'value', name: 'm', nameTextStyle: { color: '#8ec6f0', fontSize: 10 }, axisLabel: { color: '#8ec6f0', fontSize: 10 }, splitLine: { show: false } }
      ],
      series: [
        { name: '设计流量', type: 'bar', data: flowData, barWidth: '30%', itemStyle: { color: '#409eff', borderRadius: [4, 4, 0, 0] } },
        { name: '设计扬程', type: 'bar', data: headData, yAxisIndex: 1, barWidth: '30%', itemStyle: { color: '#67c23a', borderRadius: [4, 4, 0, 0] } }
      ]
    })
  } catch (e) {
    console.error('加载泵站月度统计失败：', e)
  }
}

// ==================== 生命周期 ====================
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)

  // 先加载后端数据，完成后初始化地图和图表
  loadData().finally(() => {
    setTimeout(() => {
      initMap()
      initPieChart()
      initLineChart()
    }, 300)
  })
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
  if (pieChart) pieChart.dispose()
  if (lineChart) lineChart.dispose()
  if (mapInstance) mapInstance = null
})

window.addEventListener('resize', () => {
  if (pieChart) pieChart.resize()
  if (lineChart) lineChart.resize()
})
</script>

<style scoped>
/* ==================== 全局暗色大屏 ==================== */
.bzyxqk-screen {
  width: 100%;
  height: 100vh;
  background: #0a1929;
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==================== 顶部标题栏 ==================== */
.screen-header {
  height: 64px;
  background: linear-gradient(180deg, #0d2137 0%, #0a1929 100%);
  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
  position: relative;
}

.screen-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #409eff, transparent);
}

.header-left {
  flex: 1;
  text-align: left;
}

.header-time {
  font-size: 15px;
  color: #a0cfff;
  letter-spacing: 1px;
}

.header-center {
  flex: 2;
  text-align: center;
}

.header-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #fff 0%, #7ec8e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.header-right {
  flex: 1;
  text-align: right;
}

/* ==================== 主体三栏 ==================== */
.screen-body {
  flex: 1;
  display: flex;
  padding: 12px;
  gap: 12px;
  min-height: 0;
}

.panel-left,
.panel-right {
  width: 22%;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.panel-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* ==================== 面板盒子 ==================== */
.panel-box {
  background: rgba(6, 30, 65, 0.8);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #7ec8e3;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.title-icon {
  color: #409eff;
  font-size: 10px;
}

/* ==================== 泵站概况统计卡片 ==================== */
.stats-cards {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.stat-card {
  flex: 1;
  background: rgba(10, 25, 50, 0.6);
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
}

.stat-val {
  font-size: 20px;
  font-weight: 700;
  color: #409eff;
}

.stat-val.green {
  color: #67c23a;
}

.stat-val.gray {
  color: #909399;
}

.stat-val.red {
  color: #f56c6c;
}

.stat-label {
  font-size: 10px;
  color: #7ec8e3;
  margin-top: 2px;
}

/* ==================== 环形图 ==================== */
.pie-chart-wrapper {
  display: flex;
  align-items: center;
  height: 140px;
}

.chart-area {
  width: 55%;
  height: 140px;
}

.pie-legend {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-label {
  color: #a0cfff;
  flex: 1;
}

.legend-value {
  color: #fff;
  font-weight: 600;
}

/* ==================== 泵站列表表格 ==================== */
.pump-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.dark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dark-table th {
  background: rgba(20, 60, 110, 0.6);
  color: #7ec8e3;
  padding: 7px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(64, 158, 255, 0.2);
  font-weight: 500;
  white-space: nowrap;
}

.dark-table td {
  padding: 6px;
  text-align: center;
  color: #d0e8ff;
  border-bottom: 1px solid rgba(64, 158, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.dark-table tbody tr:nth-child(odd) {
  background: rgba(10, 25, 50, 0.4);
}

.dark-table tbody tr:nth-child(even) {
  background: rgba(20, 40, 70, 0.3);
}

.dark-table tbody tr:hover {
  background: rgba(64, 158, 255, 0.1);
  cursor: pointer;
}

.dark-table tbody tr.row-active {
  background: rgba(64, 158, 255, 0.2) !important;
  border-left: 2px solid #409eff;
}

.status-tag {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.status-running {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.15);
}

.status-stopped {
  color: #909399;
  background: rgba(144, 147, 153, 0.15);
}

.status-fault {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.15);
}

.status-repair {
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.15);
}

/* ==================== 中间地图 ==================== */
.map-container {
  flex: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(64, 158, 255, 0.2);
  min-height: 0;
}

.map-search {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
}

.search-input {
  background: rgba(6, 30, 65, 0.85);
  border: 1px solid rgba(64, 158, 255, 0.3);
  color: #a0cfff;
  padding: 6px 30px 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
  width: 160px;
}

.search-input::placeholder {
  color: #4a6a8a;
}

.search-icon {
  position: absolute;
  right: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* ==================== 深度曲线 ==================== */
.time-btn-group {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
  flex-shrink: 0;
  background: rgba(10, 25, 50, 0.6);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.time-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #a0cfff;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s;
  border-right: 1px solid rgba(64, 158, 255, 0.1);
}

.time-btn:last-child {
  border-right: none;
}

.time-btn.active {
  background: rgba(64, 158, 255, 0.25);
  color: #fff;
  font-weight: 600;
}

.time-btn:hover {
  background: rgba(64, 158, 255, 0.15);
}

.chart-area-lg {
  width: 100%;
  flex: 1;
  min-height: 130px;
}

/* ==================== 视频监控 ==================== */
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
}

.video-item {
  text-align: center;
}

.video-placeholder {
  background: rgba(10, 25, 50, 0.8);
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 4px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-icon {
  font-size: 22px;
  opacity: 0.5;
}

.video-name {
  font-size: 10px;
  color: #a0cfff;
  margin-top: 4px;
}

/* ==================== 报警记录 ==================== */
.alert-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.alert-stat-card {
  flex: 1;
  background: rgba(10, 25, 50, 0.6);
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.alert-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: #e6a23c;
}

.alert-stat-val.green {
  color: #67c23a;
}

.alert-stat-val.red {
  color: #f56c6c;
}

.alert-stat-label {
  font-size: 10px;
  color: #7ec8e3;
  margin-top: 2px;
}

.alarm-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.handle-tag {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.handle-tag.handled {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.15);
}

.handle-tag.unhandled {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.15);
}

/* ==================== 滚动条样式 ==================== */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 25, 50, 0.3);
}

::-webkit-scrollbar-thumb {
  background: rgba(64, 158, 255, 0.3);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(64, 158, 255, 0.5);
}
</style>
