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, Card, 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);
    });
  }
  undefined;
  const dataset = data.selectSexUser || [];

  const options = {
    color: ['#6B82E6', '#F02D40', '#FF834E'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    label: {
      show: false,
      position: 'center',
    },
    legend: {
      orient: 'horizontal',
      left: 10,
      // data: [`来源置业`, `来源客户`, `其他`],
    },
    series: {
      type: 'pie',
      name: '性别比例',

      radius: ['45%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: dataset,
    },
  };

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

  return (
    <Card title="性别比例" headStyle={{ textAlign: 'left' }}>
      <EChart options={options} styles={{ width: '100%' }} />
    </Card>
  );
};

export default UserSource;
