<template>
  <BaseCard class="map-card">
    <!-- 顶部切换按钮 -->
    <div class="map-controls">
      <div class="control-buttons">
        <button
          v-for="mode in modes"
          :key="mode.key"
          type="button"
          class="mode-btn"
          :class="{ active: currentMode === mode.key }"
          @click="currentMode = mode.key"
        >
          <img
            class="mode-btn-bg"
            :src="currentMode === mode.key ? BTN_ACTIVE : BTN_NORMAL"
            alt=""
          />
          <span class="mode-btn-text">{{ mode.label }}</span>
        </button>
      </div>
    </div>
    
    <!-- 左侧来源分析面板 -->
    <div 
      v-if="showSourcePanel && sourceData" 
      class="source-panel floating-panel"
    >
      <h3>牦牛来源分析</h3>
      <div ref="sourceChartRef" class="panel-chart"></div>
    </div>
    
    <!-- 右侧销售分析面板 -->
    <div 
      v-if="showSalesPanel && salesData" 
      class="sales-panel floating-panel"
    >
      <h3>牦牛销售分析</h3>
      <div ref="salesChartRef" class="panel-chart"></div>
    </div>
    
    <!-- 交易明细浮动框 -->
    <div 
      v-if="showDetailPanel && detailData" 
      class="detail-panel"
    >
      <div class="detail-header">
        <h3>{{ selectedCity }} - 交易明细统计</h3>
        <button @click="closeDetailPanel" class="close-btn">×</button>
      </div>
      <div class="detail-content">
        <table class="detail-table">
          <thead>
            <tr>
              <th>检疫编号</th>
              <th>货主</th>
              <th>启运地点</th>
              <th>到达地点</th>
              <th>车牌号</th>
              <th>牦牛数量</th>
              <th>联系人</th>
              <th>联系方式</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in detailData" :key="index">
              <td>{{ item.quarantineNo }}</td>
              <td>{{ item.owner }}</td>
              <td>{{ item.origin }}</td>
              <td>{{ item.destination }}</td>
              <td>{{ item.vehiclePlate }}</td>
              <td>{{ item.yakCount }}头</td>
              <td>{{ item.contactPerson }}</td>
              <td>{{ item.contactPhone }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <div class="map-stage">
      image.png      <img
        class="map-world-bg"
        src="/images/世界地图背景.png"
        alt=""
      />
      <div ref="chartRef" class="chart-container"></div>
      <div class="map-legend" aria-hidden="true">
        <img class="map-legend-bg" :src="LEGEND_BG" alt="" />
        <ul class="map-legend-list">
          <li class="map-legend-item">
            <span class="legend-icon legend-icon-line"></span>
            <span class="legend-label">流向</span>
          </li>
          <li class="map-legend-item">
            <span class="legend-icon legend-icon-city"></span>
            <span class="legend-label">交易城市</span>
          </li>
          <li class="map-legend-item">
            <span class="legend-icon legend-icon-node"></span>
            <span class="legend-label">重要节点</span>
          </li>
        </ul>
      </div>
    </div>
  </BaseCard>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import BaseCard from './BaseCard.vue'
import { loadSystemConfig, DEFAULT_MAP_HUB, DEFAULT_MAP_FLOW_LEVELS } from '../utils/systemConfig.js'

const MAP_TRADING_API = '/api/dashboard/map-trading-network'
const FALLBACK_TRADING_JSON = './yak-trading-data.json'

const chartRef = ref(null)
const sourceChartRef = ref(null)
const salesChartRef = ref(null)
const currentMode = ref('outflow')
let chartInstance = null
let sourceChartInstance = null
let salesChartInstance = null
let resizeObserver = null
let chinaMapData = null
let tradingData = null
let mapSystemConfig = null
let cachedOutlineKey = ''
let cachedOutlinePaths = []
let unitedMapKey = ''
let mapBgImage = null
let mapBgImagePromise = null
let mapSurfaceTexture = null
let mapSurfaceTextureKey = ''

// 浮动面板状态
const showSourcePanel = ref(false)
const showSalesPanel = ref(false)
const sourceData = ref(null)
const salesData = ref(null)

// 交易明细面板状态
const showDetailPanel = ref(false)
const detailData = ref(null)
const selectedCity = ref('')

const modes = [
  { key: 'outflow', label: '销售网络分布图' },
  { key: 'inflow', label: '源地供应分布图' },
  { key: 'local', label: '红原出栏分布图' }
]

const BTN_NORMAL = '/images/按钮.png'
const BTN_ACTIVE = '/images/按钮选中.png'
const LEGEND_BG = '/images/图例bg.png'
const GEO_DATA_INDEX = 4
const WIREFRAME_GEO_INDEX = 5
const MAP_ASPECT_SCALE = 0.82
const MAP_ZOOM_FACTOR = 1
const MAP_LAYOUT_SIZE = '88%'
const MAP_ANCHOR_CENTER = [105.2, 36.8]
const MAP_ANCHOR_ZOOM = 1.08
const MAP_GLOBAL_OFFSET_LNG = 1.2
const MAP_GLOBAL_OFFSET_LAT = 0.85
const MAP_GLOBAL_LAYOUT_X = -2.2
const MAP_GLOBAL_LAYOUT_Y = 2.8
const MAP_SHADOW_OFFSET_FAR = 1.85
const MAP_SHADOW_OFFSET_MID = 1.2
const MAP_SHADOW_OFFSET_NEAR = 0.62
const MAP_SHADOW_OFFSET_LNG = -0.42
const MAP_SHADOW_OFFSET_FAR_LOCAL = 5
const MAP_SHADOW_OFFSET_MID_LOCAL = 3.5
const MAP_SHADOW_OFFSET_NEAR_LOCAL = 2.2
const MAP_SHADOW_OFFSET_LNG_LOCAL = -2
const MAP_WIREFRAME_OFFSET = -0.72
const MAP_WIREFRAME_OFFSET_LNG = 0.1
const MAP_WIREFRAME_OFFSET_LOCAL = -3.5
const MAP_WIREFRAME_OFFSET_LNG_LOCAL = 0.6
const MAP_WIREFRAME_COLOR = '#f2fdff'
const MAP_INNER_BORDER = 'rgba(4, 32, 52, 0.28)'
const MAP_INNER_BORDER_WIDTH = 0.45
const MAP_SHADOW_FILL_FAR = '#010204'
const MAP_SHADOW_FILL_MID = '#020408'
const MAP_SHADOW_FILL_NEAR = '#030a12'
const MAP_LABEL_COLOR = '#ffffff'
// 世界地图背景源图（4318×1078）中中国区域裁剪，用于烘焙进地图纹理
const MAP_BG_IMAGE = '/images/世界地图背景.png'
const MAP_BG_NATIVE_WIDTH = 4318
const MAP_BG_NATIVE_HEIGHT = 1078
const MAP_BG_CROP_CHINA = { x: 1160, y: 108, width: 2000, height: 828 }
const MAP_BG_CROP_LOCAL = { x: 1860, y: 332, width: 820, height: 520 }
const MAP_SURFACE_TEXTURE_WIDTH = 1536
const MAP_SURFACE_TEXTURE_HEIGHT = 1152
const MAP_SURFACE_FALLBACK = 'rgb(92, 202, 206)'
const MAP_SURFACE_COLOR = 'rgba(0, 0, 0, 0)'

// path 符号需朝上绘制，ECharts 会沿路径切线自动旋转
const METEOR_EFFECT_PATH = 'path://M0.5,0 L0.56,0.14 L0.52,1 L0.48,1 L0.44,0.14 Z'

// 获取当前模式对应的地图文件路径
const getMapFilePath = (mode) => {
  switch (mode) {
    case 'local':
      return './datas/513233.json'
    default:
      return './china.json'
  }
}

// 获取当前模式对应的地图注册名
const getMapName = (mode) => {
  switch (mode) {
    case 'local':
      return 'hongyuan'
    default:
      return 'china'
  }
}

const getHubName = () => {
  return tradingData?.centerCity?.name || mapSystemConfig?.mapHub?.name || DEFAULT_MAP_HUB.name
}

const buildGeoCoordMap = (systemConfig, fallbackGeoCoordMap = {}) => {
  const hub = systemConfig?.mapHub || DEFAULT_MAP_HUB
  return {
    ...fallbackGeoCoordMap,
    ...(systemConfig?.mapGeoCoordMap || {}),
    [hub.name]: hub.coordinates
  }
}

const loadTradingNetwork = async (systemConfig, fallbackPayload) => {
  const hub = systemConfig?.mapHub || DEFAULT_MAP_HUB
  const buildPayload = (tradingModes) => ({
    centerCity: {
      name: hub.name,
      coordinates: hub.coordinates,
      description: hub.description || fallbackPayload?.centerCity?.description || ''
    },
    geoCoordMap: buildGeoCoordMap(systemConfig, fallbackPayload?.geoCoordMap),
    tradingModes,
    flowLevels: systemConfig?.mapFlowLevels || fallbackPayload?.flowLevels || DEFAULT_MAP_FLOW_LEVELS
  })

  try {
    const response = await fetch(MAP_TRADING_API)
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`)
    }
    const result = await response.json()
    if (result.code !== 1 || !result.data?.tradingModes) {
      throw new Error(result.message || '地图迁徙接口返回异常')
    }
    return buildPayload(result.data.tradingModes)
  } catch (error) {
    console.warn('加载地图迁徙数据失败，使用本地兜底数据:', error)
    if (!fallbackPayload?.tradingModes) {
      return null
    }
    return buildPayload(fallbackPayload.tradingModes)
  }
}

// 加载地图数据和交易数据
const loadData = async (mapMode = 'china') => {
  try {
    const mapFilePath = getMapFilePath(mapMode)
    const [mapResponse, systemConfig, fallbackResponse] = await Promise.all([
      fetch(mapFilePath),
      loadSystemConfig(),
      fetch(FALLBACK_TRADING_JSON)
    ])
    chinaMapData = await mapResponse.json()
    mapSystemConfig = systemConfig
    const fallbackPayload = await fallbackResponse.json()
    tradingData = await loadTradingNetwork(systemConfig, fallbackPayload)
    if (!tradingData) {
      return false
    }
    
    // 注册地图
    const mapName = getMapName(mapMode)
    echarts.registerMap(mapName, chinaMapData)
    unitedMapKey = ''
    registerUnitedMap(mapMode)
    mapSurfaceTexture = null
    mapSurfaceTextureKey = ''
    cachedOutlineKey = ''
    cachedOutlinePaths = []
    
    return true
  } catch (error) {
    console.error('数据加载失败:', error)
    return false
  }
}

// 获取流量等级颜色
const getFlowColor = (value) => {
  const { flowLevels } = tradingData
  if (value >= flowLevels.high.threshold) return flowLevels.high.color
  if (value >= flowLevels.medium.threshold) return flowLevels.medium.color
  return flowLevels.low.color
}

// 获取节点颜色（区分流出和流入）
const getNodeColor = (city) => {
  const hubName = getHubName()
  if (currentMode.value === 'outflow') {
    return city === hubName ? '#FFD048' : '#6ecfff'
  }
  if (currentMode.value === 'inflow') {
    return city === hubName ? '#67C23A' : '#5eb8ff'
  }
  return city === hubName ? '#FFD048' : '#6ecfff'
}

// 获取当前模式的数据
const getCurrentModeData = () => {
  if (!tradingData) return { flows: [], title: '', description: '' }
  return tradingData.tradingModes[currentMode.value]
}

// 生成散点数据
const generateScatterData = () => {
  const modeData = getCurrentModeData()
  const scatterData = []
  const citySet = new Set()
  
  // 收集所有涉及的城市
  modeData.flows.forEach(flow => {
    citySet.add(flow.from)
    citySet.add(flow.to)
  })
  
  // 为每个城市生成散点数据
  citySet.forEach(city => {
    const coord = tradingData.geoCoordMap[city]
    if (coord) {
      const hubName = getHubName()
      // 计算该城市的总流量
      let totalFlow = 0
      modeData.flows.forEach(flow => {
        if (flow.from === city || flow.to === city) {
          totalFlow += flow.value
        }
      })
      
      scatterData.push({
        name: city,
        value: coord.concat([totalFlow]),
        symbol: city === hubName ? 'diamond' : 'circle',
        symbolSize: Math.max(6, Math.min(18, totalFlow / 80)),
        itemStyle: {
          color: getNodeColor(city),
          borderColor: '#fff',
          borderWidth: 1.5,
          shadowBlur: 6,
          shadowColor: getNodeColor(city)
        }
      })
    }
  })
  
  return scatterData
}

// 生成流向线数据
const generateLinesData = () => {
  const modeData = getCurrentModeData()
  return modeData.flows
    .map((flow) => {
      const fromCoord = tradingData.geoCoordMap[flow.from]
      const toCoord = tradingData.geoCoordMap[flow.to]
      if (!fromCoord || !toCoord) {
        return null
      }
      return {
        fromName: flow.from,
        toName: flow.to,
        coords: [fromCoord, toCoord],
        value: flow.value,
        description: flow.description
      }
    })
    .filter(Boolean)
}

// 生成波纹效果数据
const generateEffectScatterData = () => {
  const modeData = getCurrentModeData()
  const effectData = []
  const cityFlows = {}
  
  // 统计每个城市的流量
  modeData.flows.forEach(flow => {
    cityFlows[flow.from] = (cityFlows[flow.from] || 0) + flow.value
    cityFlows[flow.to] = (cityFlows[flow.to] || 0) + flow.value
  })
  
  // 为流量大的城市添加波纹效果
  const flowThreshold = tradingData?.flowLevels?.medium?.threshold || 40
  const hubName = getHubName()
  Object.entries(cityFlows).forEach(([city, totalFlow]) => {
    if (totalFlow > flowThreshold) {
      const coord = tradingData.geoCoordMap[city]
      if (coord) {
        effectData.push({
          name: city,
          value: coord.concat([totalFlow]),
          symbol: city === hubName ? 'diamond' : 'circle',
          symbolSize: Math.max(14, Math.min(26, totalFlow / 60)),
          itemStyle: {
            color: getNodeColor(city),
            shadowBlur: 12,
            shadowColor: getNodeColor(city)
          }
        })
      }
    }
  })
  
  return effectData
}

// 获取城市来源数据
const getCitySourceData = (cityName) => {
  const modeData = getCurrentModeData()
  const sources = []
  
  modeData.flows.forEach(flow => {
    if (flow.to === cityName) {
      sources.push({
        name: flow.from,
        value: flow.value,
        description: flow.description
      })
    }
  })
  
  return sources
}

// 获取城市销售数据
const getCitySalesData = (cityName) => {
  const modeData = getCurrentModeData()
  const sales = []
  
  modeData.flows.forEach(flow => {
    if (flow.from === cityName) {
      sales.push({
        name: flow.to,
        value: flow.value,
        description: flow.description
      })
    }
  })
  
  return sales
}

// 创建饼图配置
const createPieOption = (data, title) => {
  return {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(15, 25, 45, 0.95)',
      borderColor: '#00d4ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      formatter: '{b}: {c}头 ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      bottom: '5%',
      textStyle: {
        color: '#8cc8ff',
        fontSize: 9
      },
      itemWidth: 10,
      itemHeight: 8,
      itemGap: 8,
      formatter: function(name) {
        const item = data.find(d => d.name === name)
        return item ? `${name}(${item.value})` : name
      }
    },
    series: [{
      type: 'pie',
      radius: ['30%', '55%'],
      center: ['50%', '40%'],
      data: data.map(item => ({
        name: item.name,
        value: item.value,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        }
      })),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 212, 255, 0.5)'
        }
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      }
    }],
    color: ['#00d4ff', '#67c23a', '#e6a23c', '#ff6b6b', '#9c27b0', '#26c6da', '#ffc107', '#8bc34a']
  }
}

// 显示浮动面板
const showFloatingPanels = (cityName) => {
  const sources = getCitySourceData(cityName)
  const sales = getCitySalesData(cityName)
  
  if (sources.length > 0) {
    sourceData.value = sources
    showSourcePanel.value = true
    nextTick(() => {
      if (sourceChartRef.value && !sourceChartInstance) {
        sourceChartInstance = echarts.init(sourceChartRef.value)
      }
      if (sourceChartInstance) {
        sourceChartInstance.setOption(createPieOption(sources, '来源分布'))
      }
    })
  }
  
  if (sales.length > 0) {
    salesData.value = sales
    showSalesPanel.value = true
    nextTick(() => {
      if (salesChartRef.value && !salesChartInstance) {
        salesChartInstance = echarts.init(salesChartRef.value)
      }
      if (salesChartInstance) {
        salesChartInstance.setOption(createPieOption(sales, '销售分布'))
      }
    })
  }
}

// 隐藏浮动面板
const hideFloatingPanels = () => {
  showSourcePanel.value = false
  showSalesPanel.value = false
  sourceData.value = null
  salesData.value = null
  
  if (sourceChartInstance) {
    sourceChartInstance.dispose()
    sourceChartInstance = null
  }
  if (salesChartInstance) {
    salesChartInstance.dispose()
    salesChartInstance = null
  }
}

// 生成交易明细数据
const generateDetailData = (cityName) => {
  // 模拟交易明细数据
  const baseData = [
    {
      quarantineNo: 'JY2024010001',
      owner: '阿坝县扎西畜牧专业合作社',
      origin: '阿坝县若尔盖草原',
      destination: '成都市双流区',
      vehiclePlate: '川A·12345',
      yakCount: 120,
      contactPerson: '扎西多吉',
      contactPhone: '138****1234'
    },
    {
      quarantineNo: 'JY2024010002',
      owner: '红原县草原牧业有限公司',
      origin: '红原县安曲镇',
      destination: '重庆市渝北区',
      vehiclePlate: '川A·23456',
      yakCount: 95,
      contactPerson: '次仁德勒',
      contactPhone: '139****2345'
    },
    {
      quarantineNo: 'JY2024010003',
      owner: '若尔盖县牧民专业合作社',
      origin: '若尔盖县花湖草原',
      destination: '西安市雁塔区',
      vehiclePlate: '川U·34567',
      yakCount: 80,
      contactPerson: '旺久多杰',
      contactPhone: '136****3456'
    },
    {
      quarantineNo: 'JY2024010004',
      owner: '松潘县高原牧业合作社',
      origin: '松潘县川主寺镇',
      destination: '兰州市城关区',
      vehiclePlate: '川A·45678',
      yakCount: 65,
      contactPerson: '桑杰嘉措',
      contactPhone: '137****4567'
    },
    {
      quarantineNo: 'JY2024010005',
      owner: '马尔康市康巴牧业有限公司',
      origin: '马尔康市梭磨乡',
      destination: '昆明市西山区',
      vehiclePlate: '川A·56789',
      yakCount: 55,
      contactPerson: '格桑旺堆',
      contactPhone: '135****5678'
    },
    {
      quarantineNo: 'JY2024010006',
      owner: '壤塘县藏区牧业专业合作社',
      origin: '壤塘县中壤塘镇',
      destination: '贵阳市观山湖区',
      vehiclePlate: '川A·67890',
      yakCount: 45,
      contactPerson: '洛桑扎西',
      contactPhone: '134****6789'
    }
  ]
  
  // 根据不同城市返回相应的明细数据
  if (cityName === getHubName()) {
    return baseData
  } else {
    // 为其他城市生成相应的数据
    return baseData.map((item, index) => ({
      ...item,
      quarantineNo: `JY2024${String(Math.floor(Math.random() * 9000) + 1000).substr(0, 4)}${String(index + 1).padStart(3, '0')}`,
      owner: `${cityName}${['畜牧专业合作社', '高原牧业有限公司', '牧民专业合作社', '草原牧业集团'][index % 4]}`,
      origin: `${cityName}${['草原', '镇', '乡', '县'][index % 4]}`,
      destination: `${cityName}${['经开区', '高新区', '市中区', '新城区'][index % 4]}`,
      vehiclePlate: `${['川A', '川B', '川C', '川U'][index % 4]}·${Math.floor(Math.random() * 90000) + 10000}`,
      contactPerson: ['扎西', '次仁', '旺久', '桑杰', '格桑', '洛桑'][index % 6] + ['多吉', '德勒', '多杰', '嘉措', '旺堆', '扎西'][Math.floor(Math.random() * 6)],
      contactPhone: `${['138', '139', '136', '137', '135', '134'][index % 6]}****${Math.floor(Math.random() * 9000) + 1000}`
    }))
  }
}

// 显示交易明细面板
const showDetailData = (cityName) => {
  selectedCity.value = cityName
  detailData.value = generateDetailData(cityName)
  showDetailPanel.value = true
  
  // 隐藏其他面板
  hideFloatingPanels()
}

// 关闭交易明细面板
const closeDetailPanel = () => {
  showDetailPanel.value = false
  detailData.value = null
  selectedCity.value = ''
}



// 计算地图最佳视野范围
const calculateMapBounds = () => {
  if (currentMode.value === 'local') {
    return { center: [104, 35], zoom: 1.0 }
  }

  return {
    center: [...MAP_ANCHOR_CENTER],
    zoom: MAP_ANCHOR_ZOOM * MAP_ZOOM_FACTOR
  }
}

const getFeatureCenter = (feature) => {
  const cp = feature?.properties?.cp || feature?.properties?.center
  if (Array.isArray(cp) && cp.length >= 2) {
    return cp
  }
  if (Array.isArray(cp) && cp.length === 1) {
    return [cp[0], 35]
  }
  return [104, 35]
}

const getUnitedMapName = (mode = currentMode.value) => `${getMapName(mode)}-united`

const buildUnitedGeoJson = (geojson) => {
  if (!geojson?.features?.length) {
    return geojson
  }

  const coordinates = []
  geojson.features.forEach((feature) => {
    const geom = feature.geometry
    if (!geom) {
      return
    }
    if (geom.type === 'Polygon') {
      coordinates.push(geom.coordinates)
    } else if (geom.type === 'MultiPolygon') {
      geom.coordinates.forEach((polygon) => coordinates.push(polygon))
    }
  })

  return {
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      properties: { name: 'united' },
      geometry: {
        type: 'MultiPolygon',
        coordinates
      }
    }]
  }
}

const registerUnitedMap = (mapMode = currentMode.value) => {
  const unitedName = getUnitedMapName(mapMode)
  const key = `${unitedName}-${chinaMapData?.features?.length || 0}`
  if (unitedMapKey !== key) {
    echarts.registerMap(unitedName, buildUnitedGeoJson(chinaMapData))
    unitedMapKey = key
    mapSurfaceTexture = null
    mapSurfaceTextureKey = ''
  }
  return unitedName
}

const getMapBgCrop = () => (
  currentMode.value === 'local' ? MAP_BG_CROP_LOCAL : MAP_BG_CROP_CHINA
)

const loadMapBgImage = () => {
  if (mapBgImage) {
    return Promise.resolve(mapBgImage)
  }
  if (mapBgImagePromise) {
    return mapBgImagePromise
  }

  mapBgImagePromise = new Promise((resolve, reject) => {
    if (typeof Image === 'undefined') {
      reject(new Error('Image is not available'))
      return
    }

    const image = new Image()
    image.decoding = 'async'
    image.onload = () => {
      mapBgImage = image
      resolve(image)
    }
    image.onerror = () => {
      mapBgImagePromise = null
      reject(new Error(`Failed to load ${MAP_BG_IMAGE}`))
    }
    image.src = MAP_BG_IMAGE
  })

  return mapBgImagePromise
}

const paintMapSurfaceTexture = (ctx, width, height, image, crop) => {
  ctx.clearRect(0, 0, width, height)

  // 1. 地形纹理打底（略提亮对比，保证纹路可见）
  ctx.filter = 'brightness(1.28) contrast(1.18)'
  ctx.drawImage(
    image,
    crop.x,
    crop.y,
    crop.width,
    crop.height,
    0,
    0,
    width,
    height
  )
  ctx.filter = 'none'

  // 2. overlay 青蓝染色：G/B 均衡，介于青色与蓝色之间
  ctx.globalCompositeOperation = 'overlay'
  const tintGradient = ctx.createRadialGradient(
    width * 0.44,
    height * 0.48,
    0,
    width * 0.44,
    height * 0.48,
    Math.max(width, height) * 0.86
  )
  tintGradient.addColorStop(0, 'rgba(158, 236, 228, 0.94)')
  tintGradient.addColorStop(0.42, 'rgba(108, 212, 214, 0.90)')
  tintGradient.addColorStop(0.78, 'rgba(82, 194, 200, 0.86)')
  tintGradient.addColorStop(1, 'rgba(68, 180, 188, 0.82)')
  ctx.fillStyle = tintGradient
  ctx.fillRect(0, 0, width, height)

  // 3. soft-light 补一层青蓝，提亮暗部
  ctx.globalCompositeOperation = 'soft-light'
  ctx.fillStyle = 'rgba(118, 218, 214, 0.36)'
  ctx.fillRect(0, 0, width, height)

  // 4. screen 中心高光
  ctx.globalCompositeOperation = 'screen'
  const glowGradient = ctx.createRadialGradient(
    width * 0.43,
    height * 0.46,
    0,
    width * 0.43,
    height * 0.46,
    Math.max(width, height) * 0.58
  )
  glowGradient.addColorStop(0, 'rgba(205, 248, 242, 0.34)')
  glowGradient.addColorStop(0.55, 'rgba(175, 235, 228, 0.14)')
  glowGradient.addColorStop(1, 'rgba(175, 235, 228, 0)')
  ctx.fillStyle = glowGradient
  ctx.fillRect(0, 0, width, height)

  ctx.globalCompositeOperation = 'source-over'
}

const createMapSurfaceTexture = (image) => {
  const width = MAP_SURFACE_TEXTURE_WIDTH
  const height = MAP_SURFACE_TEXTURE_HEIGHT
  const canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  const ctx = canvas.getContext('2d')
  if (!ctx) {
    return null
  }

  paintMapSurfaceTexture(ctx, width, height, image, getMapBgCrop())
  return canvas
}

const ensureMapSurfaceTexture = async () => {
  const key = currentMode.value
  if (mapSurfaceTexture && mapSurfaceTextureKey === key) {
    return mapSurfaceTexture
  }

  const image = await loadMapBgImage()
  mapSurfaceTexture = createMapSurfaceTexture(image)
  mapSurfaceTextureKey = key
  return mapSurfaceTexture
}

const getMapSurfaceAreaStyle = () => {
  if (mapSurfaceTexture) {
    return {
      areaColor: {
        image: mapSurfaceTexture,
        repeat: 'no-repeat'
      }
    }
  }

  return { areaColor: MAP_SURFACE_FALLBACK }
}

const refreshMapSurfaceTexture = async () => {
  if (!chartInstance) {
    return
  }

  try {
    await ensureMapSurfaceTexture()
    const mapBounds = calculateMapBounds()
    const mapName = getMapName(currentMode.value)
    const unitedMapName = registerUnitedMap(currentMode.value)
    chartInstance.setOption({
      geo: buildGeoLayers(mapName, unitedMapName, mapBounds)
    }, {
      replaceMerge: ['geo']
    })
  } catch (error) {
    console.warn('地图纹理生成失败:', error)
  }
}

const pointKey = ([lng, lat]) => `${lng.toFixed(5)},${lat.toFixed(5)}`

const edgeKey = (a, b) => {
  const ka = pointKey(a)
  const kb = pointKey(b)
  return ka < kb ? `${ka}|${kb}` : `${kb}|${ka}`
}

const forEachOuterRing = (geometry, callback) => {
  if (!geometry) return
  if (geometry.type === 'Polygon') {
    if (geometry.coordinates[0]) {
      callback(geometry.coordinates[0])
    }
  } else if (geometry.type === 'MultiPolygon') {
    geometry.coordinates.forEach((polygon) => {
      if (polygon[0]) {
        callback(polygon[0])
      }
    })
  }
}

const stitchBoundarySegments = (segments) => {
  const adj = new Map()
  segments.forEach(([a, b], idx) => {
    const ka = pointKey(a)
    const kb = pointKey(b)
    if (!adj.has(ka)) adj.set(ka, [])
    if (!adj.has(kb)) adj.set(kb, [])
    adj.get(ka).push({ point: b, idx })
    adj.get(kb).push({ point: a, idx })
  })

  const used = new Set()
  const paths = []

  segments.forEach(([a, b], idx) => {
    if (used.has(idx)) {
      return
    }

    used.add(idx)
    const path = [a, b]

    const extendTail = () => {
      const tailKey = pointKey(path[path.length - 1])
      const candidates = (adj.get(tailKey) || []).filter((item) => !used.has(item.idx))
      if (!candidates.length) {
        return false
      }
      const next = candidates[0]
      used.add(next.idx)
      path.push(next.point)
      return true
    }

    const extendHead = () => {
      const headKey = pointKey(path[0])
      const candidates = (adj.get(headKey) || []).filter((item) => !used.has(item.idx))
      if (!candidates.length) {
        return false
      }
      const next = candidates[0]
      used.add(next.idx)
      path.unshift(next.point)
      return true
    }

    while (extendTail()) {}
    while (extendHead()) {}
    paths.push(path)
  })

  return paths
}

const buildNationalOutlinePaths = (geojson) => {
  if (!geojson?.features?.length) {
    return []
  }

  const edgeCount = new Map()
  const edgeList = []

  geojson.features.forEach((feature) => {
    forEachOuterRing(feature.geometry, (ring) => {
      if (!Array.isArray(ring) || ring.length < 2) {
        return
      }
      for (let i = 0; i < ring.length - 1; i += 1) {
        const a = ring[i]
        const b = ring[i + 1]
        if (!a || !b || (a[0] === b[0] && a[1] === b[1])) {
          continue
        }
        const key = edgeKey(a, b)
        edgeCount.set(key, (edgeCount.get(key) || 0) + 1)
        edgeList.push({ key, a, b })
      }
    })
  })

  const boundarySegments = []
  edgeList.forEach(({ key, a, b }) => {
    if (edgeCount.get(key) === 1) {
      boundarySegments.push([a, b])
    }
  })

  return stitchBoundarySegments(boundarySegments)
}

const getWireframePaths = () => {
  const mapName = getMapName(currentMode.value)
  const cacheKey = `${mapName}-${chinaMapData?.features?.length || 0}`
  if (cacheKey === cachedOutlineKey) {
    return cachedOutlinePaths
  }

  const minPoints = currentMode.value === 'local' ? 8 : 30
  cachedOutlineKey = cacheKey
  cachedOutlinePaths = buildNationalOutlinePaths(chinaMapData)
    .filter((path) => path.length >= minPoints)

  return cachedOutlinePaths
}

const getMapProjection = (mapBounds, latOffset = 0, lngOffset = 0) => {
  const isLocal = currentMode.value === 'local'
  if (isLocal) {
    return {
      aspectScale: MAP_ASPECT_SCALE,
      layoutCenter: [
        `${50 + lngOffset + MAP_GLOBAL_LAYOUT_X}%`,
        `${50 + latOffset + MAP_GLOBAL_LAYOUT_Y}%`
      ],
      layoutSize: MAP_LAYOUT_SIZE
    }
  }
  const center = mapBounds.center || MAP_ANCHOR_CENTER
  const zoom = mapBounds.zoom || MAP_ANCHOR_ZOOM
  return {
    aspectScale: MAP_ASPECT_SCALE,
    zoom,
    center: [
      center[0] + lngOffset + MAP_GLOBAL_OFFSET_LNG,
      center[1] + latOffset + MAP_GLOBAL_OFFSET_LAT
    ]
  }
}

const buildShadowFillGeo = (unitedMapName, mapBounds, latOffset, lngOffset, areaColor, z) => ({
  map: unitedMapName,
  roam: false,
  ...getMapProjection(mapBounds, latOffset, lngOffset),
  silent: true,
  zlevel: 0,
  z,
  label: { show: false },
  itemStyle: {
    areaColor,
    borderColor: 'transparent',
    borderWidth: 0
  },
  emphasis: {
    disabled: true
  }
})

const getShadowOffsets = () => {
  const isLocal = currentMode.value === 'local'
  return {
    far: isLocal ? MAP_SHADOW_OFFSET_FAR_LOCAL : MAP_SHADOW_OFFSET_FAR,
    mid: isLocal ? MAP_SHADOW_OFFSET_MID_LOCAL : MAP_SHADOW_OFFSET_MID,
    near: isLocal ? MAP_SHADOW_OFFSET_NEAR_LOCAL : MAP_SHADOW_OFFSET_NEAR,
    lng: isLocal ? MAP_SHADOW_OFFSET_LNG_LOCAL : MAP_SHADOW_OFFSET_LNG
  }
}

const buildGeoLayers = (mapName, unitedMapName, mapBounds) => {
  const isLocal = currentMode.value === 'local'
  const wireframeOffset = isLocal ? MAP_WIREFRAME_OFFSET_LOCAL : MAP_WIREFRAME_OFFSET
  const wireframeLngOffset = isLocal ? MAP_WIREFRAME_OFFSET_LNG_LOCAL : MAP_WIREFRAME_OFFSET_LNG
  const { far, mid, near, lng } = getShadowOffsets()

  return [
    buildShadowFillGeo(unitedMapName, mapBounds, far, lng, MAP_SHADOW_FILL_FAR, 1),
    buildShadowFillGeo(unitedMapName, mapBounds, mid, lng, MAP_SHADOW_FILL_MID, 2),
    buildShadowFillGeo(unitedMapName, mapBounds, near, lng, MAP_SHADOW_FILL_NEAR, 3),
    {
      map: unitedMapName,
      roam: false,
      ...getMapProjection(mapBounds, 0),
      silent: true,
      zlevel: 1,
      z: 2,
      label: { show: false },
      itemStyle: {
        ...getMapSurfaceAreaStyle(),
        borderColor: 'transparent',
        borderWidth: 0
      },
      emphasis: {
        disabled: true
      }
    },
    {
      map: mapName,
      roam: false,
      ...getMapProjection(mapBounds, 0),
      silent: true,
      zlevel: 1,
      z: 1,
      label: { show: false },
      itemStyle: {
        areaColor: 'rgba(0, 0, 0, 0)',
        borderColor: 'transparent',
        borderWidth: 0
      },
      emphasis: {
        disabled: true
      }
    },
    {
      map: mapName,
      roam: false,
      ...getMapProjection(mapBounds, wireframeOffset, wireframeLngOffset),
      silent: true,
      zlevel: 4,
      z: 1,
      label: { show: false },
      itemStyle: {
        areaColor: 'rgba(0, 0, 0, 0)',
        borderColor: 'transparent',
        borderWidth: 0
      },
      emphasis: {
        disabled: true
      }
    }
  ]
}

// 初始化图表配置
const getChartOption = () => {
  const modeData = getCurrentModeData()
  const scatterData = generateScatterData()
  const linesData = generateLinesData()
  const effectScatterData = generateEffectScatterData()
  const mapBounds = calculateMapBounds()
  const mapName = getMapName(currentMode.value)
  const unitedMapName = registerUnitedMap(currentMode.value)
  const mapLayout = getMapProjection(mapBounds, 0)
  const outlinePaths = getWireframePaths()
  const wireframeData = outlinePaths.map((coords) => ({ coords }))
  
  return {
    backgroundColor: 'transparent', // 透明背景，与卡片一致
    // title: {
    //   text: modeData.title,
    //   subtext: modeData.description,
    //   left: 'center',
    //   textStyle: {
    //     color: '#ffffff',
    //     fontSize: 20,
    //     fontWeight: 'bold'
    //   },
    //   subtextStyle: {
    //     color: '#8cc8ff',
    //     fontSize: 14
    //   }
    // },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(15, 25, 45, 0.95)',
      borderColor: '#00d4ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 13
      },
      formatter: function(params) {
        if (params.componentType === 'geo') {
          return `<div style="padding: 8px;">
            <strong style="color: #00d4ff;">${params.name}</strong><br/>
            <span style="color: #8cc8ff;">省份/地区</span>
          </div>`
        } else if (params.seriesType === 'scatter') {
          const value = params.value[2] || 0
          const hubName = getHubName()
          const nodeType = params.name === hubName ? '中心节点' : 
                          (currentMode.value === 'outflow' ? '销售市场' : '供应来源')
          return `<div style="padding: 8px;">
            <strong style="color: #00d4ff;">${params.name}</strong><br/>
            <span style="color: #67c23a;">总流量: ${value} 头</span><br/>
            <span style="color: #8cc8ff;">节点类型: ${nodeType}</span>
          </div>`
        } else if (params.seriesType === 'lines') {
          const lineData = linesData.find(line => 
            line.fromName === params.data.fromName && 
            line.toName === params.data.toName
          )
          return `<div style="padding: 8px;">
            <strong style="color: #00d4ff;">${params.data.fromName} → ${params.data.toName}</strong><br/>
            <span style="color: #67c23a;">流量: ${params.data.value} 头</span><br/>
            <span style="color: #8cc8ff;">${lineData ? lineData.description : ''}</span>
          </div>`
        } else if (params.seriesType === 'effectScatter') {
          const value = params.value[2] || 0
          return `<div style="padding: 8px;">
            <strong style="color: #00d4ff;">${params.name}</strong><br/>
            <span style="color: #67c23a;">总流量: ${value} 头</span><br/>
            <span style="color: #e6a23c;">重要交易节点</span>
          </div>`
        }
        return params.name
      }
    },
    geo: buildGeoLayers(mapName, unitedMapName, mapBounds),
    series: [
      {
        name: 'mapFill',
        type: 'map',
        map: mapName,
        roam: false,
        ...mapLayout,
        zlevel: 2,
        silent: true,
        selectedMode: false,
        itemStyle: {
          areaColor: MAP_SURFACE_COLOR,
          borderColor: MAP_INNER_BORDER,
          borderWidth: MAP_INNER_BORDER_WIDTH
        },
        label: {
          show: true,
          color: MAP_LABEL_COLOR,
          fontSize: 12,
          fontFamily: 'Microsoft YaHei, sans-serif',
          fontWeight: 'bold',
          textBorderColor: 'rgba(0, 0, 0, 0.5)',
          textBorderWidth: 2
        },
        emphasis: {
          disabled: true
        }
      },
      {
        name: 'mapWireframe',
        type: 'lines',
        coordinateSystem: 'geo',
        geoIndex: WIREFRAME_GEO_INDEX,
        zlevel: 5,
        polyline: true,
        silent: true,
        data: wireframeData,
        lineStyle: {
          color: MAP_WIREFRAME_COLOR,
          width: 4.2,
          opacity: 0.98,
          cap: 'round',
          join: 'round',
          shadowBlur: 22,
          shadowColor: 'rgba(130, 245, 255, 0.78)'
        }
      },
      {
        name: '交易城市',
        type: 'scatter',
        coordinateSystem: 'geo',
        geoIndex: GEO_DATA_INDEX,
        zlevel: 6,
        data: scatterData,
        symbolSize: 8,
        label: {
          show: true,
          position: 'top',
          color: MAP_LABEL_COLOR,
          fontSize: 11,
          fontWeight: 'bold',
          formatter: '{b}',
          textBorderColor: 'rgba(0, 0, 0, 0.35)',
          textBorderWidth: 2
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 13,
            color: MAP_LABEL_COLOR
          },
          itemStyle: {
            borderColor: '#00d4ff',
            borderWidth: 3,
            shadowBlur: 15
          }
        }
      },
      {
        name: '流向',
        type: 'lines',
        coordinateSystem: 'geo',
        geoIndex: GEO_DATA_INDEX,
        zlevel: 6,
        data: linesData,
        lineStyle: {
          color: '#a8f6ff',
          width: 1.5,
          opacity: 0.82,
          curveness: 0.32,
          shadowBlur: 10,
          shadowColor: 'rgba(120, 240, 255, 0.65)'
        },
        emphasis: {
          lineStyle: {
            width: 2.5,
            opacity: 1,
            shadowBlur: 6
          }
        }
      },
      {
        name: '流向流光',
        type: 'lines',
        coordinateSystem: 'geo',
        geoIndex: GEO_DATA_INDEX,
        zlevel: 8,
        silent: true,
        animation: false,
        data: linesData,
        effect: {
          show: true,
          constantSpeed: 55,
          symbol: METEOR_EFFECT_PATH,
          symbolSize: [5, 22],
          trailLength: 0.16,
          loop: true,
          color: '#e8fbff'
        },
        lineStyle: {
          width: 0,
          opacity: 0,
          curveness: 0.32
        }
      },
      {
        name: '重要节点',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        geoIndex: GEO_DATA_INDEX,
        zlevel: 6,
        data: effectScatterData,
        symbolSize: function(val) {
          return Math.max(14, Math.min(26, val[2] / 60))
        },
        showEffectOn: 'render',
        rippleEffect: {
          period: 3,
          scale: 3,
          brushType: 'stroke'
        },
        label: {
          show: true,
          position: 'top',
          color: MAP_LABEL_COLOR,
          fontSize: 12,
          fontWeight: 'bold',
          formatter: '{b}',
          textBorderColor: 'rgba(0, 0, 0, 0.35)',
          textBorderWidth: 2
        },
        itemStyle: {
          shadowBlur: 15
        },
        emphasis: {
          scale: true,
          itemStyle: {
            borderColor: '#00d4ff',
            borderWidth: 3,
            shadowBlur: 20
          }
        }
      }
    ],
    animationDuration: 2500,
    animationEasing: 'cubicInOut'
  }
}

// 重新加载地图数据
const reloadMapData = async (mapMode) => {
  try {
    const mapFilePath = getMapFilePath(mapMode)
    const mapResponse = await fetch(mapFilePath)
    chinaMapData = await mapResponse.json()
    
    const mapName = getMapName(mapMode)
    echarts.registerMap(mapName, chinaMapData)
    unitedMapKey = ''
    registerUnitedMap(mapMode)
    mapSurfaceTexture = null
    mapSurfaceTextureKey = ''
    cachedOutlineKey = ''
    cachedOutlinePaths = []
    
    return true
  } catch (error) {
    console.error('地图数据重新加载失败:', error)
    return false
  }
}

const handleChartResize = () => {
  chartInstance?.resize()
}

// 初始化图表
const initChart = async () => {
  if (!chartRef.value) return
  
  const dataLoaded = await loadData(currentMode.value)
  if (!dataLoaded) return
  
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(getChartOption())
  await refreshMapSurfaceTexture()
  
  // 添加鼠标事件监听
  chartInstance.on('mouseover', (params) => {
    if (params.seriesType === 'scatter' || params.seriesType === 'effectScatter') {
      showFloatingPanels(params.name)
    }
  })
  
  chartInstance.on('mouseout', (params) => {
    if (params.seriesType === 'scatter' || params.seriesType === 'effectScatter') {
      hideFloatingPanels()
    }
  })
  
  // 添加点击事件监听
  chartInstance.on('click', (params) => {
    if (params.seriesType === 'scatter' || params.seriesType === 'effectScatter') {
      showDetailData(params.name)
    }
  })
  
  window.addEventListener('resize', handleChartResize)
  const mountPoint = chartRef.value.parentElement
  if (mountPoint) {
    resizeObserver = new ResizeObserver(handleChartResize)
    resizeObserver.observe(mountPoint)
  }

  await nextTick()
  requestAnimationFrame(() => {
    handleChartResize()
    setTimeout(handleChartResize, 160)
  })
}

// 更新图表
const updateChart = async (needReloadMap = false) => {
  if (chartInstance && tradingData) {
    if (needReloadMap) {
      const mapLoaded = await reloadMapData(currentMode.value)
      if (!mapLoaded) return
    }
    
    chartInstance.setOption(getChartOption(), {
      notMerge: false,
      replaceMerge: ['geo', 'series']
    })
    await refreshMapSurfaceTexture()
    await nextTick()
    handleChartResize()
  }
}

// 监听模式变化
watch(currentMode, (newMode, oldMode) => {
  nextTick(async () => {
    // 判断是否需要重新加载地图数据
    const oldMapName = getMapName(oldMode)
    const newMapName = getMapName(newMode)
    const needReloadMap = oldMapName !== newMapName
    
    await updateChart(needReloadMap)
  })
})

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  window.removeEventListener('resize', handleChartResize)
  resizeObserver?.disconnect()
  resizeObserver = null
  if (chartInstance) {
    chartInstance.dispose()
  }
  if (sourceChartInstance) {
    sourceChartInstance.dispose()
  }
  if (salesChartInstance) {
    salesChartInstance.dispose()
  }
})
</script>

<style scoped>
.map-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.map-card :deep(.card-content) {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 0;
}

.map-controls {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.control-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.mode-btn {
  position: relative;
  width: 235px;
  height: 52px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.mode-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.mode-btn.active {
  filter: brightness(1.05);
}

.mode-btn-bg {
  position: absolute;
  inset: 0;
  width: 235px;
  height: 52px;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.mode-btn-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #d9f7ff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.mode-btn.active .mode-btn-text {
  color: #fff7e8;
}

.map-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.map-world-bg {
  position: absolute;
  width: var(--screen-width, 5120px);
  height: var(--screen-height, 1440px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.chart-container {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  z-index: 1;
  transform: translate(-0.4%, 0.6%);
}

.map-legend {
  position: absolute;
  left: 14px;
  bottom: 18px;
  width: 183px;
  height: 147px;
  z-index: 100;
  pointer-events: none;
  user-select: none;
}

.map-legend-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.map-legend-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  height: 100%;
  margin: 0;
  padding: 24px 18px 20px 26px;
  list-style: none;
}

.map-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
}

.legend-icon {
  flex-shrink: 0;
}

.legend-icon-line {
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(126, 232, 255, 0.35), #7ee8ff 45%, rgba(126, 232, 255, 0.35));
  box-shadow: 0 0 6px rgba(110, 232, 255, 0.75);
}

.legend-icon-city {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd048;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 208, 72, 0.65);
}

.legend-icon-node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6ecfff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(110, 207, 255, 0.65);
}

.legend-label {
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #eefaff;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.floating-panel {
  position: absolute;
  width: 280px;
  height: 380px;
  background: rgba(15, 25, 45, 0.95);
  border: 1px solid #00d4ff;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
  top: 80px;
}

.source-panel {
  left: 20px;
}

.sales-panel {
  right: 20px;
}

.floating-panel h3 {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  text-align: center;
}

.panel-chart {
  width: 100%;
  height: 340px;
  padding: 0;
}

.detail-panel {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1200px;
  max-height: 400px;
  background: rgba(15, 25, 45, 0.98);
  border: 1px solid #00d4ff;
  border-radius: 8px;
  backdrop-filter: blur(15px);
  z-index: 1200;
  box-shadow: 0 12px 32px rgba(0, 212, 255, 0.4);
  overflow: hidden;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.1);
}

.detail-header h3 {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: #8cc8ff;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
  transform: scale(1.1);
}

.detail-content {
  max-height: 320px;
  overflow-y: auto;
  padding: 0;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.detail-table th {
  background: rgba(0, 212, 255, 0.15);
  color: #00d4ff;
  font-weight: bold;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
  position: sticky;
  top: 0;
  z-index: 10;
}

.detail-table td {
  color: #8cc8ff;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.detail-table tr:hover {
  background: rgba(0, 212, 255, 0.05);
}

.detail-table tr:hover td {
  color: #fff;
}

/* 滚动条样式 */
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, 0.1);
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.5);
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.7);
}
</style> 