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

const geoOptions = {
  backgroundColor: '#fff',
  title: {
    text: '城市分布',
    subtext: '数据会存在一定时间延迟',
    left: 40,
    top: 40
  },
  tooltip : {
      trigger: 'item',
      formatter: (params) => {
        return `${params.data.name}: ${params.data.value[2]}`
      }
  },
  geo: {
      map: 'china',
      roam: true,
      zoom: 1.2,
      label: {
        normal: {
          show: true,
          color: '#aaa',
        },
        emphasis: {
          show: true
        }
      },
      itemStyle: {
          normal: {
              areaColor: '#f3f3f3',
              borderColor: '#ddd'
          },
          emphasis: {
              areaColor: '#eee'
          }
      }
  },
}

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([])

  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)
    })
  }, [])

  const options = {
    ...geoOptions,
    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
      }
    ],
  }

  return (
    <div style={{ marginBottom:'40px', width: '100%', borderRadius: '12px', boxShadow: '0px 0px 9px 1px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
      <Echart options={options} style={{ width: '100%', height: '600px' }} ></Echart>
    </div>
  )
}

export default CityNums;
