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: [] })
  const endDate = new Date()
  const startDate = moment().subtract(7, 'day').toDate()

  useEffect(() => {
    UserSex(formatDate(startDate, endDate))
  }, [])

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

  const dataset = (data.selectSexUser) || []

  const options = {
    title: {
      text: '性别比例'
    },
    legend: {},
    color: ['#FF7E48', '#dcdcdc'],
    tooltip: {
      trigger: 'item',
      formatter: "{b}: ({d}%)"
    },
    series: {
      type: 'pie',
      name: '性别比例',
      center: ['44%', '65%'],
      radius: ['34%', '52%'],
      label: {
        formatter: '{b} {@value}',
      },
      data:
        dataset,
    }
  }


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

  }


  return (
    <>
      <div>
        {/* <h3>性别比例</h3> */}


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




      </div>





    </>
  )
}

export default UserSource;