import React, { Component, useState, useEffect } from 'react';
import echarts from 'echarts/lib/echarts';
import EChart from '../../../components/EchartsTest/EChart';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import moment from 'moment';
import router from 'umi/router';
import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';

import styles from '../styles.less'
const formatDate = (start, end) => {
  const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z'
  const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z'
  return { startDate, endDate }
}
const UserSource = (props) => {
  const [data, setData] = useState({ records: [] })


  useEffect(() => {
    userResource(formatDate(props.startDate, props.endDate))
  }, [props.startDate, props.endDate])

  function userResource(params) {
    request({
      ...apis.indexEcharts.userResource,
      params,
    }).then((data) => {
      setData(data)
    })
  }

  function toEdit() {
    router.push({
      pathname: '/statistical/userSource',
    });
  }

  const dataset = data || {};


  const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = dataset.pie || {};
  const pieoptions = {
    color: ['#6B82E6', '#F02D40', '#FF834E'],
    legend: {
      orient: 'vertical',
      x: 'left',
      data: ['来源置业', '来源客户', '其他'],
    },
    tooltip: {
      // trigger: 'item',
      // formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [
      {
        name: '用户来源',
        type: 'pie',
        center: ['50%', '65%'],
        radius: ['25%', '40%'],
        label: {
          formatter: '{b} {@value}',
          emphasis: {
            show: true,
            formatter: '{d}%',
            textStyle: {
              fontSize: '22',
              fontWeight: 'bold'
            }
          },
        },
      },

    ],

    dataset: {
      id: 'pie',
      source: [
        { '用户来源': '来源置业', value: person_realty_consultant, },
        { '用户来源': '来源客户', value: person_estate_agent },
        { '用户来源': '其他', value: person_null },
      ]
    },
  }


  const piestyles = {
    width: '100%',
    height: '400px',
    minWidth: '350px',
  }

  return (
    <>
      <div>

        <EChart options={pieoptions} style={piestyles} />

      </div>

    </>
  )
}

export default UserSource;