import React, { useState, useEffect } from 'react';
import { Card, Slider } from 'antd';
import Echart from '@/components/EchartsTest/EChart';
import { fetch, apis } from '@/utils/request';
// import  ECharts from './echarts';

const geoOptions = {};

const getCityData = fetch(apis.indexEcharts.personCity);

const mapDataRange = x => {
  // 映射区间 [1, 100000] => [rangeStart, rangeEnd]
  const min = 1;
  const max = 100000;
  const rangeStart = 16;
  const rangeEnd = 24;

  return rangeStart + ((x - min) * (rangeEnd - rangeStart)) / (max - min);
};

const CityNums = props => {
  const [data, setData] = useState([]);
  const [zoom, setZoom] = useState(1.2);
  const [option, setOption] = useState({});

  useEffect(() => {
    getCityData().then(response => {
      const { selectCityUser = [] } = response || {};
      const data = selectCityUser.map(item => {
        return {
          name: item.name,
          value: [item.lng - 0, item.lat - 0, item.cityCount],
        };
      });
      setData(data);
    });
  }, []);

  useEffect(() => {
    setOption({
      tooltip: {
        trigger: 'item',
        formatter: params => {
          return `${params.data.name}: ${params.data.value[2]}`;
        },
      },
      geo: {
        map: 'china',
        roam: 'move',
        zoom: zoom,
        label: {
          normal: {
            show: true,
            color: '#aaa',
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            areaColor: '#f3f3f3',
            borderColor: '#ddd',
          },
          emphasis: {
            areaColor: '#eee',
          },
        },
      },
      series: [
        {
          name: '人数',
          type: 'scatter',
          coordinateSystem: 'geo',
          data,
          symbolSize: 10,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: '#DB3C4B',
            },
          },
        },
        {
          name: '前三',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: data
            .sort(function(a, b) {
              return b.value[2] - a.value[2];
            })
            .slice(0, 3),
          symbolSize: function(val) {
            return mapDataRange(val[2]);
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: '#DB3C4B',
              shadowBlur: 10,
              shadowColor: '#333',
            },
          },
          zlevel: 1,
        },
      ],
    });
  }, [data, zoom]);

  const marks = [0.5,2];

  return (
    <Card
      title={
        <div>
          城市分布
          <span style={{ fontSize: '8px', color: '#c4c4c4' }}>(数据会存在一定时间延迟)</span>
        </div>
      }
      headStyle={{ textAlign: 'left' }}
      // extra={<TimeSelect onChange={onTimeChange}></TimeSelect>}
    >
      <div style={{ display: 'flex' }}>
        <div style={{ width: '50px', display: 'inline-block', height: 300 }}>
          <Slider value={zoom} vertical min={0.5} step={0.1} max={5} defaultValue={1} onChange={(value)=>{setZoom(value)}}/>
        </div>
        <div style={{flex:'1'}}>
        <Echart options={option} style={{ width: '100%', height: '600px' }}></Echart>
        </div>
        
      </div>
    </Card>
  );
};

export default CityNums;
