<script setup lang="ts">
import { onMounted, ref, onUnmounted, watch, nextTick } from 'vue'

interface DataConnectionItem {
  id: number
  imei: string | null
  networkType: string | null
  wifiBssid: string | null
  wifiState: string | null
  wifiRssi: string | null
  mobileState: string | null
  mobileNetworkType: string | null
  networkId: string | null
  gsmStrength: string | null
  cdmaDbm: string | null
  evdoDbm: string | null
  internalIp: string | null
  webUrl: string | null
  pingValue: string
  userLat: string
  userLon: string
  userLocationInfo: string | null
  bsLat: string | null
  bsLon: string | null
  timeIndexClient: string | null
  version: string | null
  timeServerInsert: string | null
  ds: string | null
  dt: string | null
}

const mapContainer = ref<HTMLDivElement | null>(null)
const operator = ref<string>('CMCC') // 默认选择中国移动
const date = ref<string>('')
const loading = ref<boolean>(false)
const dataLoaded = ref<boolean>(false)
const dataList = ref<DataConnectionItem[]>([])
const markers: any[] = []

let map: any = null
// 存储所有有效坐标点（带原数据）
let validPointsList: Array<{ lat: number; lon: number; item: DataConnectionItem }> = []

// 核心函数：默认聚焦到第一个有效点并放大
const calculateDensityFocus = (): { center: any; zoom: number; hasValid: boolean } => {
  if (!window.BMap || validPointsList.length === 0) {
    return {
      center: new window.BMap.Point(105.8951, 36.5667), // 中国中心
      zoom: 4,
      hasValid: false
    }
  }

  // 默认聚焦到第一个有效点，并放大到17级（更大的缩放级别）
  const firstPoint = validPointsList[0]
  return {
    center: new window.BMap.Point(firstPoint.lon, firstPoint.lat),
    zoom: 17, // 放大到17级，可以看到更详细的区域
    hasValid: true
  }
}

// 清除标记点
const clearMarkers = () => {
  if (!map) return
  // 遍历所有标记点并移除
  markers.forEach(marker => {
    try {
      map.removeOverlay(marker)
    } catch (error) {
      console.warn('移除标记点失败:', error)
    }
  })
  // 清空标记点数组
  markers.length = 0
}

// 获取标记点颜色
const getMarkerColor = (pingValue: string): string => {
  if (pingValue === '11111') return '#10b981'
  if (pingValue === '00000') return '#6b7280'
  return '#3b82f6'
}

// 添加标记点并自动聚焦
const addMarkersAndFocus = () => {
  if (!map || validPointsList.length === 0) return
  clearMarkers()

  // 批量添加标记点
  validPointsList.forEach(({ lat, lon, item }) => {
    const point = new window.BMap.Point(lon, lat)
    const color = getMarkerColor(item.pingValue)

    // 自定义图标（固定大小，确保缩放后可见）
    const icon = new window.BMap.Icon(
      `data:image/svg+xml;base64,${btoa(`
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
          <circle cx="10" cy="10" r="8" fill="${color}" stroke="white" stroke-width="2"/>
        </svg>
      `)}`,
      new window.BMap.Size(20, 20),
      { anchor: new window.BMap.Size(10, 10) }
    )

    const marker = new window.BMap.Marker(point, { icon })
    // 信息窗口
    const infoWindow = new window.BMap.InfoWindow(`
      <div style="padding:8px">
        <p><strong>网络ID:</strong> ${item.networkId || 'N/A'}</p>
        <p><strong>类型:</strong> ${item.networkType || 'N/A'}</p>
        <p><strong>Ping值:</strong> ${item.pingValue}</p>
        <p><strong>坐标:</strong> ${lat.toFixed(6)}, ${lon.toFixed(6)}</p>
      </div>
    `, { width: 200 })

    marker.addEventListener('click', () => map.openInfoWindow(infoWindow, point))
    map.addOverlay(marker)
    markers.push(marker)
  })

  // 标记点添加完成后，立即聚焦密度中心（关键：同步执行，无延迟）
  const { center, zoom } = calculateDensityFocus()
  map.centerAndZoom(center, zoom)
}

// 过滤有效坐标点（中国境内）
const filterValidPoints = (data: DataConnectionItem[]) => {
  validPointsList = data.filter(item => {
    if (!item.userLat || !item.userLon) return false
    const lat = parseFloat(item.userLat)
    const lon = parseFloat(item.userLon)
    // 中国经纬度范围：纬度18°N-53°N，经度73°E-135°E
    return !isNaN(lat) && !isNaN(lon) && lat >= 18 && lat <= 53 && lon >= 73 && lon <= 135
  }).map(item => ({
    lat: parseFloat(item.userLat!),
    lon: parseFloat(item.userLon!),
    item
  }))
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  dataLoaded.value = false
  
  // 先清除旧数据：清空有效点列表和地图上的标记点
  validPointsList = []
  if (map) {
    clearMarkers()
  }
  
  try {
    const body: { operator?: string; date?: string } = {}
    if (operator.value) body.operator = operator.value
    if (date.value) body.date = date.value

    const response = await fetch('http://localhost:8081/dataConnection', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    })

    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
    const data = await response.json() as DataConnectionItem[]
    dataList.value = data

    // 过滤有效点
    filterValidPoints(data)

    // 地图已初始化：直接添加标记点并聚焦
    if (map) {
      await nextTick()
      addMarkersAndFocus()
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    validPointsList = []
    clearMarkers()
  } finally {
    loading.value = false
    dataLoaded.value = true
  }
}

// 初始化地图（必须在数据加载完成后执行！）
const initMapAfterData = async () => {
  // 等待DOM渲染和百度地图API加载
  await nextTick()
  
  // 检查百度地图API是否加载完成
  if (!window.BMap || !window.BMap.Map) {
    console.warn('百度地图API未加载，等待中...')
    setTimeout(() => initMapAfterData(), 200)
    return
  }

  if (!mapContainer.value) {
    console.warn('地图容器未找到')
    return
  }

  // 如果地图已存在，先清除
  if (map) {
    clearMarkers()
  }

  // 初始化地图
  map = new window.BMap.Map(mapContainer.value)
  map.enableScrollWheelZoom(true)
  map.enableDragging(true)
  // 添加地图控件
  map.addControl(new window.BMap.MapTypeControl({
    mapTypes: [window.BMap.MapTypeId.NORMAL, window.BMap.MapTypeId.SATELLITE]
  }))
  map.addControl(new window.BMap.NavigationControl())
  map.addControl(new window.BMap.ScaleControl())

  // 如果有数据，添加标记点并聚焦
  if (validPointsList.length > 0) {
    // 等待地图完全初始化后再添加标记点
    setTimeout(() => {
      addMarkersAndFocus()
    }, 100)
  } else {
    // 无数据时显示全国地图
    map.centerAndZoom(new window.BMap.Point(105.8951, 36.5667), 4)
  }
}

// 监听筛选条件变化
watch([operator, date], () => {
  if (map && dataLoaded.value) fetchData()
})

onMounted(async () => {
  // 第一步：先加载数据
  await fetchData()
  // 第二步：数据加载完成后，再初始化地图
  await initMapAfterData()
})

onUnmounted(() => {
  clearMarkers()
  map = null
})
</script>

<template>
  <div class="page">
    <!-- 加载遮罩 -->
    <div v-if="loading || !dataLoaded" class="loading-overlay">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <p class="loading-text">加载数据中...</p>
      </div>
    </div>

    <h2>业务需求15：数据链接-数据链接率分布</h2>

    <div class="filter-bar">
      <div class="filter-item">
        <label for="operator">运营商:</label>
        <select id="operator" v-model="operator" class="select-input" :disabled="loading">
          <option value="CMCC">中国移动</option>
          <option value="CUCC">中国联通</option>
          <option value="CTCC">中国电信</option>
        </select>
      </div>
      <div class="filter-item">
        <label for="date">日期:</label>
        <input id="date" type="date" v-model="date" class="date-input" :disabled="loading" />
      </div>
      <button @click="fetchData" class="refresh-btn" :disabled="loading">
        {{ loading ? '加载中...' : '刷新' }}
      </button>
    </div>

    <div class="legend">
      <div class="legend-item">
        <span class="legend-dot" style="background-color: #10b981;"></span>
        <span>正常 (11111)</span>
      </div>
      <div class="legend-item">
        <span class="legend-dot" style="background-color: #6b7280;"></span>
        <span>异常 (00000)</span>
      </div>
    </div>

    <div class="map-container" ref="mapContainer"></div>
  </div>
</template>

<style scoped>
.page {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* 让加载遮罩只覆盖当前页面，而不是全局 */
}

h2 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-input, .date-input {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}

.refresh-btn {
  padding: 6px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.refresh-btn:hover:not(:disabled) { background: #2563eb; }
.refresh-btn:disabled { background: #9ca3af; cursor: not-allowed; }

.legend {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 4px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.map-container {
  width: 100%;
  height: calc(100vh - 280px);
  min-height: 500px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  flex: 1;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.spinner {
  width: 48px; height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 16px; color: #374151; margin: 0; }
</style>