import * as echarts from 'echarts';
import 'echarts-extension-amap';

/**
 * 计算地图中心点和缩放比例
 * @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 = 10;
  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;
  }

  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);
  const chart = echarts.init(div);

  chart.on('amaproam', function (e) {
    console.log(e);
  });

  // // get AMap extension component
  // var amapComponent = chart.getModel().getComponent('amap');
  // // get the instance of AMap
  // var amap = amapComponent.getAMap();
  // // add some controls provided by AMap.
  // amap.addControl(new AMap.Scale());
  // amap.addControl(new AMap.ToolBar());
  // // add SatelliteLayer and RoadNetLayer to map
  // // var satelliteLayer = new AMap.TileLayer.Satellite();
  // // var roadNetLayer = new AMap.TileLayer.RoadNet();
  // // amap.add([satelliteLayer, roadNetLayer]);
  // // Add a marker to map
  // amap.add(
  //   new AMap.Marker({
  //     position: [110, 35]
  //   })
  // );

  // 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'
    },
    // amap component option
    amap: {
      // enable 3D mode
      viewMode: '3D',
      // initial options of AMap
      // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
      // initial map center [lng, lat]
      center: [centerLng, centerLat],
      // initial map zoom
      zoom: zoom,
      // whether the map and echarts automatically handles browser window resize to update itself.
      resizeEnable: true,
      // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
      mapStyle: 'amap://styles/dark',
      // whether echarts layer should be rendered when the map is moving. Default is true.
      // if false, it will only be re-rendered after the map `moveend`.
      // It's better to set this option to false if data is large.
      renderOnMoving: false,
      // the zIndex of echarts layer for AMap, default value is 2000.
      // deprecated since v1.9.0, use `echartsLayerInteractive` instead.
      // echartsLayerZIndex: 2019,
      // whether echarts layer is interactive. Default value is true
      // supported since v1.9.0
      echartsLayerInteractive: true,
      // whether to enable large mode. Default value is false
      // supported since v1.9.0
      largeMode: false,
      // whether to return map camera state in `amaproam` event.
      // supported since v1.10.0
      returnMapCameraState: true
      // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
      // There are some bugs about it, we can use `amap.add` instead.
      // Refer to the codes at the bottom.

      // More initial options...
    },
    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: grid.value[2],
              lineWidth: 2
            })
          };
        },
        data: gridPolygons,
        label: { show: false }
      }
    ]
  };

  chart.setOption(option);
  // 3. 导出为图片（返回base64）
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const url = chart.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff'
      });
      resolve(url);
    }, 3000);
  });
}

export default { generateGridMap };