import React, { Component } from 'react';
// import ReactEcharts from '../../../src/index';
import ReactEcharts from "echarts-for-react";

require('echarts/map/js/china.js');

export default class CountryMap extends 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 = '国抽任务' + r;
      option.series[0].name = '省抽任务' + r;
      option.legend.data[0] = '其他任务' + r;
      this.setState({ option: option });
    }, 1000);
  };
  componentWillUnmount() {
    if (this.timeTicket) {
      clearInterval(this.timeTicket);
    }
  };
  randomData() {
    return Math.round(Math.random()*1000);
  };
  getOption = () => {
    return {
      title: {
        text: '检测任务',
        subtext: '全国检测任务分布图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data:['国抽任务','省抽任务','其他任务']
      },
      visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],       // 文本，默认为数值文本
        calculable: true
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: {readOnly: false},
          restore: {},
          saveAsImage: {}
        }
      },
      series: [
        {
          name: '国抽任务',
          type: 'map',
          mapType: 'china',
          roam: false,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data:[
            {name: '青岛', value: this.randomData()},
            {name: '莱西', value: this.randomData()},
            {name: '日照', value: this.randomData()},
            {name: '烟台', value: this.randomData()},
            {name: '即墨', value: this.randomData()},
            {name: '莱州', value: this.randomData()},
            {name: '蓬莱', value: this.randomData()},
            {name: '寿光', value: this.randomData()},
            {name: '潍坊', value: this.randomData()},
            {name: '枣庄', value: this.randomData()},
            {name: '淄博', value: this.randomData()},
            {name: '济南', value: this.randomData()},
            {name: '临沂', value: this.randomData()},
            {name: '泰安', value: this.randomData()},
            {name: '聊城', value: this.randomData()},
            {name: '德州', value: this.randomData()},
            {name: '济宁', value: this.randomData()},
            {name: '莱芜', value: this.randomData()},
            {name: '菏泽', value: this.randomData()},
            {name: '北京',value: this.randomData() },
            {name: '天津',value: this.randomData() },
            {name: '上海',value: this.randomData() },
            {name: '重庆',value: this.randomData() },
            {name: '河北',value: this.randomData() },
            {name: '河南',value: this.randomData() },
            {name: '云南',value: this.randomData() },
            {name: '辽宁',value: this.randomData() },
            {name: '黑龙江',value: this.randomData() },
            {name: '湖南',value: this.randomData() },
            {name: '安徽',value: this.randomData() },
            {name: '山东',value: this.randomData() },
            {name: '新疆',value: this.randomData() },
            {name: '江苏',value: this.randomData() },
            {name: '浙江',value: this.randomData() },
            {name: '江西',value: this.randomData() },
            {name: '湖北',value: this.randomData() },
            {name: '广西',value: this.randomData() },
            {name: '甘肃',value: this.randomData() },
            {name: '山西',value: this.randomData() },
            {name: '内蒙古',value: this.randomData() },
            {name: '陕西',value: this.randomData() },
            {name: '吉林',value: this.randomData() },
            {name: '福建',value: this.randomData() },
            {name: '贵州',value: this.randomData() },
            {name: '广东',value: this.randomData() },
            {name: '青海',value: this.randomData() },
            {name: '西藏',value: this.randomData() },
            {name: '四川',value: this.randomData() },
            {name: '宁夏',value: this.randomData() },
            {name: '海南',value: this.randomData() },
            {name: '台湾',value: this.randomData() },
            {name: '香港',value: this.randomData() },
            {name: '澳门',value: this.randomData() }
          ]
        },
        {
          name: '省抽任务',
          type: 'map',
          mapType: 'china',
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data:[
            {name: '北京',value: this.randomData() },
            {name: '天津',value: this.randomData() },
            {name: '上海',value: this.randomData() },
            {name: '重庆',value: this.randomData() },
            {name: '河北',value: this.randomData() },
            {name: '安徽',value: this.randomData() },
            {name: '新疆',value: this.randomData() },
            {name: '浙江',value: this.randomData() },
            {name: '江西',value: this.randomData() },
            {name: '山西',value: this.randomData() },
            {name: '内蒙古',value: this.randomData() },
            {name: '吉林',value: this.randomData() },
            {name: '福建',value: this.randomData() },
            {name: '广东',value: this.randomData() },
            {name: '西藏',value: this.randomData() },
            {name: '四川',value: this.randomData() },
            {name: '宁夏',value: this.randomData() },
            {name: '香港',value: this.randomData() },
            {name: '澳门',value: this.randomData() }
          ]
        },
        {
          name: '其他任务',
          type: 'map',
          mapType: 'china',
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data:[
            {name: '北京',value: this.randomData() },
            {name: '天津',value: this.randomData() },
            {name: '上海',value: this.randomData() },
            {name: '广东',value: this.randomData() },
            {name: '台湾',value: this.randomData() },
            {name: '香港',value: this.randomData() },
            {name: '澳门',value: this.randomData() }
          ]
        }
      ]
    };
  };
  render() {
    return (
      <div className='examples'>
        <div className='parent'>
          <label> 全国检测任务分布信息 <strong>区域分布</strong>: </label>
          <ReactEcharts
            option={this.state.option}
            style={{height: '500px', width: '100%'}}
            className='react_for_echarts' />
        </div>
      </div>
    );
  };
}