import React, { useEffect, useState, FC } from 'react';
// 引入 ECharts 主模块
import * as echarts from 'echarts';
import * as Coords from '@/static/mapJson/geoCoordMap'
import './index.scss'

const loadjson = (name) => {
  return new Promise((resolve) => {
    // 加载
    import(`../static/mapJson/${name}.json`).then((data) => {
      resolve(data.default)
    })
  })
}
const MMapgworld: FC = ({
  draggable = true,
  configer
}) => {
  // 只在最顶层使用 Hook, 不要在循环，条件或嵌套函数中调用 Hook
  // 如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部
  // React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。
  // 接收父组件的值
  const { width, height, data, dataType, cityProperty, valueProperty, destName, lineColor, piecesValue, legendShow, legendTitle, mapType } = configer;
  console.log('data-------->', data);
  const [legendColor, setlegendColor] = useState(lineColor.reverse())
  let myChart: any = null;

  const handleDrag = (e) => {
    // antdI本来应该是个数组的，因为一个组件可能包含多个antd的组件，外面可以扁平化啊
    const params = JSON.stringify({ type: 'other', id: 'MMapgworld', antdI: '', relate: 'in' })
    e.dataTransfer.setData('Text', params)
  }

  const convertData = (list: []) => {
    const res = [];
    for (let i = 0; i < list.length; i += 1) {
      const dataItem = list[i];
      const fromCoord: [] =
        dataType === 1
          ? Coords.GeoCoordMap[dataItem[cityProperty]]
          : Coords.GeoCoordMap[destName]; // 来源地
      const toCoord: [] =
        dataType === 1
          ? Coords.GeoCoordMap[destName]
          : Coords.GeoCoordMap[dataItem[cityProperty]]; // 目的地

      if (fromCoord && toCoord) {
        res.push({
          fromName: dataType === 1 ? dataItem[cityProperty] : destName,
          toName: dataType === 1 ? destName : dataItem[cityProperty],
          value: +dataItem[valueProperty],
          coords: [fromCoord, toCoord]
        });
      }
    }
    return res;
  };

  const setCharts = (): void => {
    if (!myChart) {
      myChart = echarts.init(
        document.getElementById('mworldContainer') as HTMLDivElement
      );
    }
    const series = [
      {
        type: 'lines',
        zlevel: 1,
        animation: false,
        effect: {
          show: true,
          period: 4, // 箭头指向速度，值越小速度越快
          trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', // 箭头图标
          symbolSize: 5 // 图标大小
        },
        lineStyle: {
          width: 1, // 尾迹线条宽度
          opacity: 1, // 尾迹线条透明度
          curveness: 0.3 // 尾迹线条曲直度
        },
        data: convertData(data)
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        showEffectOn: 'render',
        rippleEffect: {
          // 涟漪特效
          period: 4, // 动画时间，值越小速度越快
          brushType: 'stroke', // 波纹绘制方式 stroke, fill
          scale: 4.5 // 波纹圆环最大限制，值越大波纹越大
        },
        label: {
          show: true,
          color: '#fff',
          position: 'right', // 显示位置
          offset: [3, 0], // 偏移设置
          formatter: (params: any) => params.data.name, // 圆环显示文字
          fontSize: 13
        },
        symbolSize: 5, // (val) => Math.min(val[2] / 100, 20), // 圆环大小
        itemStyle: {
          show: false
        },
        data: data.map((dataItem) => ({
          name: dataItem[cityProperty],
          value: Coords.GeoCoordMap[dataItem[cityProperty]]?.concat([
            +dataItem[valueProperty]
          ])
        }))
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 3,
        symbol: 'pin',
        symbolSize: 55,
        label: {
          show: true,
          position: 'inside',
          offset: [1, 0],
          color: '#fff',
          formatter: '{b}',
          fontWeight: 'bold'
        },
        textStyle: {
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff'
          }
        },
        itemStyle: {
          color: '#ff3333',
          opacity: 0.9
        },
        data: [
          {
            name: destName,
            visualMap: false,
            value: Coords.GeoCoordMap[destName]
          }
        ]
      }
    ];
    const option = {
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        textStyle: {
          color: '#fff'
        },
        formatter: (params: any) => {
          if (params.componentSubType === 'lines') {
            return `${params.data.fromName}->${params.data.toName}: ${params.data.value}人`;
          }
          return '';
        }
      },
      visualMap: [
        {
          // 图例值控制
          type: 'piecewise',
          calculable: true,
          show: false,
          left: 0,
          color: lineColor,
          pieces: [
            // { min: 1500 }, // 不指定 max，表示 max 为无限大（Infinity）。
            { min: piecesValue[4] },
            { min: piecesValue[3], max: piecesValue[4] },
            { min: piecesValue[2], max: piecesValue[3] },
            { min: piecesValue[1], max: piecesValue[2] },
            { min: piecesValue[0], max: piecesValue[1] }
          ],
          itemSymbol: 'rect', // 单独设置itemSymbol不起作用，需要设置inRange
          controller: {
            inRange: {
              // color: ['#00ffff', '#0aff00', '#ffff00', '#ffa500', '#ff3333'],
              symbol: 'rect'
            }
          },
          textStyle: {
            color: '#fff'
          }
          // formatter: (value, value2) =>
          //   `${toThousands(value)} - ${toThousands(value2)}`, // 范围标签显示内容。
        }
      ],
      geo: {
        map: mapType,
        zoom: 1,
        roam: false, // 是否允许缩放
        itemStyle: {
          color: 'rgba(2, 87, 136, .8)', // 地图背景色
          borderColor: '#2ad1e7', // 省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          label: {
            show: false
          },
          itemStyle: {
            color: 'rgba(37, 43, 61, .5)' // 悬浮背景
          }
        }
      },
      series
    };
    option && myChart?.setOption(option, true);
    window.addEventListener('resize', () => {
      myChart?.resize();
    })
  };

  useEffect(() => {
    setlegendColor(lineColor.reverse())
    loadjson(mapType).then(res=>{
      echarts.registerMap(mapType, res);
      setCharts();
    })
    // 组件被卸载的时候执行
    return () => {
      myChart && myChart.dispose();
    };
    // 对于第二个参数是对象的问题，可以是string化，也可以是md5化
  }, [JSON.stringify(configer)])

  return (
    <div
      draggable={draggable}
      className={`dragor ${configer.clazz} cz-mmapworld`}
      onDragStart={(e) => { handleDrag(e) }}
      style={{width:width,height:height}}
    >
      <div id="mworldContainer"></div>
      {
        legendShow === '是' ?
          <div className="legend-box">
            <div>{legendTitle}</div>
            <ul className="legend-ui">
              {
                piecesValue.length ? piecesValue.map((item, index) => {
                  return (<li key={index}>
                    <i className="color" style={{ background: legendColor[index], display: 'inline-block', width: '20px', height: '10px' }}></i>
                    {index < piecesValue.length - 1 ? item + '-' + piecesValue[index + 1] : '>' + item}
                  </li>)
                }) : ''
              }

            </ul>
          </div> : null
      }
    </div>
  );
};

export default MMapgworld
