import * as echarts from 'echarts';
// import * as shanghaiMap from 'echarts-china-cities-js/echarts-china-cities-js/shanghai.js'; // 修正地图数据文件路径
// import 'echarts-china-cities-js/echarts-china-cities-js/shanghai.js'; // 修正地图数据文件路径
import { shanghai, jingan } from '@/utils/chart/shanghai.js'; // 确保路径正确

/**
 * 计算地图中心点和缩放比例
 * @param {*} gridData 网格数据
 * @returns
 */
function calCenterPointAndZoom(gridData) {
  let centerLng = 0;
  let centerLat = 0;
  let maxLng = -180;
  let minLng = 180;
  let maxLat = -90;
  let minLat = 90;
  let zoom = 100;
  gridData.forEach((g) => {
    centerLng += g.centerLng;
    centerLat += g.centerLat;
    maxLng = Math.max(maxLng, g.centerLng);
    minLng = Math.min(minLng, g.centerLng);
    maxLat = Math.max(maxLat, g.centerLat);
    minLat = Math.min(minLat, g.centerLat);
  });
  if (gridData.length > 0) {
    centerLng /= gridData.length;
    centerLat /= gridData.length;
  }

  console.log((maxLng - centerLng) / zoom);

  return {
    centerLng,
    centerLat,
    zoom
  };
}

function generateGridMap(gridData) {
  // 1. 创建临时DOM元素
  const div = document.createElement('div');
  div.style.width = '800px';
  div.style.height = '400px';
  document.body.appendChild(div);
  // 注册上海市地图数据
  // console.log(shanghaiMap);

  // shanghaiMap(echarts);
  echarts.registerMap('shanghai', { geoJSON: shanghai });
  const chart = echarts.init(div);

  // 1. 准备网格数据（转换为ECharts多边形格式）
  const gridPolygons = gridData.map((grid, index) => ({
    name: `grid_${index}`,
    value: [grid.centerLng, grid.centerLat, grid.value], // 中心点经纬度和数值
    coords: grid.coordinates // 网格四角经纬度坐标数组 [[lng1,lat1], [lng2,lat2], ...]
  }));
  const { centerLng, centerLat, zoom } = calCenterPointAndZoom(gridData);

  // 2. 配置项
  const option = {
    // title: {
    //   text: 'Travel Routes'
    // },
    geo: {
      map: 'shanghai', // 基础地图
      center: [centerLng, centerLat],
      roam: true, // 禁止缩放平移
      zoom: zoom, // 地图缩放比例
      label: { show: true }, // 显示地名标签
      itemStyle: { areaColor: '#ddddddff', borderColor: '#999' }
    },
    // series: [
    //   {
    //     type: 'scatter',
    //     coordinateSystem: 'geo',
    //     data: [
    //       {
    //         name: '黄浦区',
    //         value: [121.490317, 31.222771, 100] // 中心点坐标+数值
    //       }
    //     ]
    //   }
    // ]
    series: [
      {
        type: 'custom',
        coordinateSystem: 'geo',
        renderItem: (params, api) => {
          // 将经纬度转换为屏幕坐标
          const grid = gridPolygons[params.dataIndex];
          // const v = api.value(0);
          const points = grid.coords.map((coord) => api.coord(coord));
          // const points = grid.coords;
          return {
            type: 'polygon',
            transition: ['shape'],
            shape: { points },
            style: api.style({
              fill: grid.value[2],
              stroke: 'white',
              lineWidth: 1
            })
          };
        },
        data: gridPolygons,
        label: { show: false }
      }
    ]
  };

  chart.setOption(option);
  // 3. 导出为图片（返回base64）
  return chart.getDataURL({
    type: 'png',
    pixelRatio: 1,
    backgroundColor: '#ddddddff'
  });
}

export default { generateGridMap };