import * as echarts from 'echarts';
import styles from './mapComponent.less';
import React, { useEffect, useRef } from 'react';
import { queryMapJson } from '@/services/dataBoardService';
import { message } from 'antd';

interface propsData {
  userData: number;
  deviceData: number;
  areaList: any;
  // mapData: any;
}

/**
 * 地图组件
 * @constructor
 */
const MapComponent: React.FC<propsData> = (props) => {
  const chartRef: any = useRef();
  const { userData, deviceData, areaList } = props;
  const geoCoordMap = {
    济南市: [117, 36.65],
    青岛市: [120.33, 36.07],
    淄博市: [118.05, 36.78],
    枣庄市: [117.57, 34.86],
    东营市: [118.49, 37.46],
    烟台市: [121.39, 37.52],
    潍坊市: [119.1, 36.62],
    济宁市: [116.59, 35.38],
    泰安市: [117.13, 36.18],
    威海市: [122.1, 37.5],
    日照市: [119.46, 35.42],
    临沂市: [118.35, 35.05],
    德州市: [116.29, 37.45],
    聊城市: [115.97, 36.45],
    滨州市: [118.03, 37.36],
    菏泽市: [115.47, 35.25],
  };

  // 处理数据结构
  const convertData = (item: string | any[]) => {
    const res = [];
    for (let i = 0; i < item.length; i++) {
      const geoCoord = geoCoordMap[item[i].name];
      if (geoCoord) {
        res.push({
          name: item[i].name,
          value: geoCoord.concat(item[i].value),
        });
      }
    }
    return res;
  };

  useEffect(() => {
    // 初始化统计图对象
    const myChart = echarts.init(chartRef.current);
    const options = {
      geo: {
        show: true,
        map: 'map',
        roam: false,
        zoom: 1.2,
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: '#091632',
          borderColor: '#1773c3',
          shadowColor: '#1773c3',
          shadowBlur: 20,
        },
      },
      series: [
        {
          name: 'light',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(areaList),
          symbolSize: function (val: number[]) {
            return val[2];
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: true,
          },
          itemStyle: {
            color: '#ddb926',
          },
        },
        {
          type: 'map',
          map: 'map',
          zoom: 1.2,
          label: {
            show: false,
            color: '#fff',
          },
          roam: false,
          itemStyle: {
            areaColor: '#031525',
            borderColor: '#3B5077',
            borderWidth: 1,
          },
          data: [],
        },
      ],
    };
    queryMapJson()
      .then((res) => {
        if (res && res.code === 0) {
          const data = JSON.parse(res.data.map_json);
          if (data) {
            echarts.registerMap('map', data);
          }
          myChart.setOption(options);
        } else {
          message.error(res?.message);
        }
      })
      .catch((e) => {
        message.error(e?.message);
      });
    // 组件卸载
    return () => {
      myChart.clear();
    };
  }, []);

  return (
    <div className={styles.container}>
      <div ref={chartRef} className={styles.mapContent} />
      <div className={styles.content_num}>
        <div className={styles.content}>
          <div style={{ display: 'flex' }}>
            <div className={styles.content_title}>用户数</div>
            <div className={styles.content_value}>{userData * 2}</div>
          </div>
          <div style={{ display: 'flex' }}>
            <div className={styles.content_title}>设备数</div>
            <div className={styles.content_value}>{deviceData * 6}</div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default MapComponent;
