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, Card } 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 NewUsers = props => {
  const {
    startDate = moment().subtract(7, 'day').format('YYYY-MM-DDT00:00:00.000') + 'Z',
    endDate = moment().format('YYYY-MM-DDT23:59:59.999') + 'Z',
    simple = false,
  } = props;
  const [data, setData] = useState({ records: [] });

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

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

  const dataZoom = props.dataZoom
    ? [
        {
          type: 'inside',
          start: 0,
          end: 100,
        },
        {
          type: 'slider',
          start: 0,
          end: 100,
        },
      ]
    : undefined;
  const dataset = data || [];
  const options = {
    color: ['#FF814C', '#F02B3E'],
    tooltip: {
      trigger: 'axis',
    },
    icon: 'rect',
    legend: {
      data: ['新用户数', '授权注册'],
    },
    toolbox: {},
    xAxis: {
      type: 'category',
    },
    yAxis: {},
    dataZoom,
    series: [
      {
        name: '新用户数',
        type: 'line',
        smooth: true,
      },
      {
        name: '授权注册',
        type: 'line',
        smooth: true,
      },
    ],
    dataset: {
      dimensions: ['createTime', 'fromNum', 'registeredNum'],
      source: dataset,
    },
  };

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

  const Layout = prop =>
    simple ? (
      prop.children
    ) : (
      <Card title="新增用户" headStyle={{ textAlign: 'left' }}>
        {prop.children}
      </Card>
    );

  return (
    <Layout>
      <EChart options={options} style={piestyles} />
    </Layout>
  );
};

export default NewUsers;
