import React from 'react';

import ReactEcharts from "echarts-for-react";
// const echarts = require('echarts/lib/echarts');
require('echarts/map/js/china.js');

export default class ProvinceMap extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = this.getInitialState();
  }
  timeTicket: any = null;
  state: any;
  getInitialState = () => ({option: this.getOption()});
  componentDidMount() {
    if (this.timeTicket) {
      clearInterval(this.timeTicket);
    }
    this.timeTicket = setInterval(() => {
      const option = this.state.option;
      const r = new Date().getSeconds();
      option.title.text = 'iphone销量' + r;
      option.series[0].name = 'iphone销量' + r;
      // option.legend.data[0] = 'iphone销量' + r;
      this.setState({ option: option });
    }, 1000);
  };
  componentWillUnmount() {
    if (this.timeTicket) {
      clearInterval(this.timeTicket);
    }
  };
  randomData() {
    return Math.round(Math.random()*1000);
  };
  data: any[] = [
    {name: '青岛', value: 18},
    {name: '莱西', value: 21},
    {name: '日照', value: 21},
    {name: '烟台', value: 28},
    {name: '即墨', value: 30},
    {name: '莱州', value: 32},
    {name: '蓬莱', value: 37},
    {name: '寿光', value: 40},
    {name: '潍坊', value: 65},
    {name: '枣庄', value: 84},
    {name: '淄博', value: 85},
    {name: '济南', value: 92},
    {name: '临沂', value: 103},
    {name: '泰安', value: 112},
    {name: '聊城', value: 116},
    {name: '德州', value: 120},
    {name: '济宁', value: 120},
    {name: '莱芜', value: 148},
    {name: '菏泽', value: 194}
  ];
  
  geoCoordMap: any = {
    '青岛':[120.33,36.07],
    '莱西':[120.53,36.86],
    '日照':[119.46,35.42],
    '威海':[122.1,37.5],
    '烟台':[121.39,37.52],
    '即墨':[120.45,36.38],
    '莱州':[119.942327,37.177017],
    '蓬莱':[120.75,37.8],
    '寿光':[118.73,36.86],
    '潍坊':[119.1,36.62],
    '枣庄':[117.57,34.86],
    '淄博':[118.05,36.78],
    '济南':[117,36.65],
    '临沂':[118.35,35.05],
    '泰安':[117.13,36.18],
    '聊城':[115.97,36.45],
    '德州':[116.29,37.45],
    '济宁':[116.59,35.38],
    '莱芜':[117.67,36.19],
    '菏泽':[115.480656,35.23375]
  };
  
  convertData = (data: any) => {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = this.geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        });
      }
    }
    return res;
  };
  // renderItem = (params: any, api: any) => {
  //   var coords = [
  //     [116.7,39.53],
  //     [103.73,36.03],
  //     [112.91,27.87],
  //     [120.65,28.01],
  //     [119.57,39.95]
  //   ];
  //   var points = [];
  //   for (var i = 0; i < coords.length; i++) {
  //     points.push(api.coord(coords[i]));
  //   }
  //   var color = api.visual('color');
  
  //   return {
  //     type: 'polygon',
  //     shape: {
  //       points: echarts.graphic.clipPointsByRect(points, {
  //         x: params.coordSys.x,
  //         y: params.coordSys.y,
  //         width: params.coordSys.width,
  //         height: params.coordSys.height
  //       })
  //     },
  //     style: api.style({
  //       fill: color,
  //       stroke: echarts.color.lift(color)
  //     })
  //   };
  // }
  getOption = () => {
    return {
      backgroundColor: 'transparent',
      title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      tooltip : {
        trigger: 'item'
      },
      bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
          styleJson: [
            {
              "featureType": "water",
              "elementType": "all",
              "stylers": {
                "color": "#044161"
              }
            },
            {
              "featureType": "land",
              "elementType": "all",
              "stylers": {
                "color": "#004981"
              }
            },
            {
              "featureType": "boundary",
              "elementType": "geometry",
              "stylers": {
                "color": "#064f85"
              }
            },
            {
              "featureType": "railway",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "highway",
              "elementType": "geometry",
              "stylers": {
                "color": "#004981"
              }
            },
            {
              "featureType": "highway",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#005b96",
                "lightness": 1
              }
            },
            {
              "featureType": "highway",
              "elementType": "labels",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "arterial",
              "elementType": "geometry",
              "stylers": {
                "color": "#004981"
              }
            },
            {
              "featureType": "arterial",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#00508b"
              }
            },
            {
              "featureType": "poi",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "green",
              "elementType": "all",
              "stylers": {
                "color": "#056197",
                "visibility": "off"
              }
            },
            {
              "featureType": "subway",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "local",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "arterial",
              "elementType": "labels",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "boundary",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#029fd4"
              }
            },
            {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                "color": "#1a5787"
              }
            },
            {
              "featureType": "label",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            }
          ]
        }
      },
      series : [
        {
          name: 'pm2.5',
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: this.convertData(this.data),
          symbolSize: function (val: any) {
            return val[2] / 10;
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#ddb926'
            }
          }
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: this.convertData(this.data.sort(function (a, b) {
            return b.value - a.value;
          }).slice(0, 6)),
          symbolSize: function (val: any) {
            return val[2] / 10;
          },
          showEffectOn: 'emphasis',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          zlevel: 1
        }
      ]
    };
  }

  onChartReadyCallback = (e: any) => {
    console.log(e);
  }
  onEvent1 = (e: any) => {
    console.log(e);
  }
  onEvent2 = (e: any) => {
    console.log(e);
  }

  render() {

    return (
        <ReactEcharts
            style={{height: '500px', width: '100%'}}
            className='react_for_echarts'
            option={this.state.option}
            notMerge={true}
            lazyUpdate={true}
            theme={"dark"}
            onChartReady={this.onChartReadyCallback}
            onEvents={{click: this.onEvent1, focus: this.onEvent2}}
            opts={{}} />
    );
  }
}