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'; // 确保路径正确
import calculate from '@/utils/map/calculate.js';

// 偏移纬度，对应约100米
const OFFSET_LAT = 0.00082;
// 偏移纬度，对应约100米
const OFFSET_LNG = 0.0009;

/**
 * 计算地图中心点和缩放比例
 * @param {*} gridData 网格数据
 * @returns
 */
function calCenterPointAndZoom(gridData) {
  const coordinates = [];
  let maxLng = -180;
  let minLng = 180;
  let maxLat = -90;
  let minLat = 90;
  let zoom = 1;
  gridData.forEach((g) => {
    g.coordinates.forEach((coordArr) => {
      coordinates.push({
        lng: coordArr[0],
        lat: coordArr[1]
      });
      maxLng = Math.max(maxLng, coordArr[0]);
      minLng = Math.min(minLng, coordArr[0]);
      maxLat = Math.max(maxLat, coordArr[1]);
      minLat = Math.min(minLat, coordArr[1]);
    });
  });

  console.log('zoom', zoom);

  return {
    centerLng: (maxLng + minLng) / 2,
    centerLat: (maxLat + minLat) / 2,
    zoom,
    bounds: [
      minLng - OFFSET_LNG,
      minLat - OFFSET_LAT,
      maxLng + OFFSET_LNG,
      maxLat + OFFSET_LAT
    ]
  };
}

function generateGridMap(gridData) {
  const width = 800;
  const height = 400;
  // 1. 创建临时DOM元素
  const div = document.createElement('div');
  div.style.width = `${width}px`;
  div.style.height = `${height}px`;
  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, bounds } =
    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: '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);

  // 将像素坐标转换为经纬度
  // const convert = (x, y) => {
  //   return chart.convertFromPixel(
  //     {
  //       geoIndex: 0
  //     },
  //     [x, y]
  //   );
  // };

  // 将经纬度转换为像素坐标
  const convert = (lng, lat) => {
    return chart.convertToPixel(
      {
        geoIndex: 0
      },
      [lng, lat]
    );
  };

  // 计算画布的左上角和右下角对应的经纬度
  // 计算网格区域的左上角和右下角经纬度对应的像素坐标
  const topLeft = convert(bounds[0], bounds[3]);
  const bottomRight = convert(bounds[2], bounds[1]);
  // 计算合适的缩放倍数
  const scale = Math.min(
    Math.abs(width / (bottomRight[0] - topLeft[0])),
    Math.abs(height / (bottomRight[1] - topLeft[1]))
  );
  console.log('scale', scale);

  // 地图缩放比例
  chart.setOption({
    geo: {
      zoom: scale
    }
  });

  // 3. 导出为图片（返回base64）
  return new Promise((resolve, reject) => {
    // 延迟执行确保绘制完成
    setTimeout(() => {
      const url = chart.getDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#fff'
      });
      resolve(url);
    }, 1000);
  });
  // return captureMapByBounds({
  //   chart: chart,
  //   bounds: bounds
  // }).catch((err) => {
  //   console.error('截图失败:', err);
  // });
}

/**
 * 根据经纬度范围截取地图区域
 * @param {Object} params - 截取参数
 * @param {Array} params.bounds - 经纬度范围 [minLng, minLat, maxLng, maxLat]
 * @param {Object} params.chart - ECharts实例
 * @returns {Promise<string>} 截取区域的base64图片
 */
// function captureMapByBounds(params) {
//   const { bounds, chart } = params;
//   const [minLng, minLat, maxLng, maxLat] = bounds;

//   // 获取地图坐标系
//   // const geo = chart.getModel().getComponent('geo');
//   // if (!geo) return Promise.reject('未找到地图组件');

//   // 将经纬度转换为像素坐标
//   const convert = (lng, lat) => {
//     return chart.convertToPixel(
//       {
//         geoIndex: 0
//       },
//       [lng, lat]
//     );
//   };

//   // 计算四个角的像素坐标
//   const topLeft = convert(minLng, maxLat);
//   const bottomRight = convert(maxLng, minLat);

//   // 创建临时Canvas
//   const canvas = document.createElement('canvas');
//   const ctx = canvas.getContext('2d');

//   // 获取原始图表Canvas
//   const originalCanvas = chart.getDom().querySelector('canvas');

//   // 设置Canvas尺寸为截取区域大小
//   topLeft[0] -= 10;
//   topLeft[1] -= 10;
//   bottomRight[0] += 10;
//   bottomRight[1] += 10;
//   topLeft[0] = Math.max(topLeft[0], 0);
//   topLeft[1] = Math.max(topLeft[1], 0);
//   bottomRight[0] = Math.min(bottomRight[0], originalCanvas.width);
//   bottomRight[1] = Math.min(bottomRight[1], originalCanvas.height);
//   const width = bottomRight[0] - topLeft[0];
//   const height = bottomRight[1] - topLeft[1];
//   canvas.width = width;
//   canvas.height = height;

//   // 裁剪指定区域
//   ctx.drawImage(
//     originalCanvas,
//     topLeft[0],
//     topLeft[1], // 源图像裁剪起点
//     width,
//     height, // 源图像裁剪尺寸
//     0,
//     0, // 目标图像绘制起点
//     width,
//     height // 目标图像绘制尺寸
//   );

//   // 转换为base64图片
//   return new Promise((resolve) => {
//     // 延迟执行确保绘制完成
//     setTimeout(() => {
//       const base64 = canvas.toDataURL('image/png', 1.0);
//       resolve(base64);
//     }, 100);
//   });
// }

export default { generateGridMap };