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 UserSource from './mmm';

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(() => {
    UserActive({ dateType: 'day' })
  }, [])



  function UserActive (params) {
    request({
      ...apis.indexEcharts.userActive,
      params: { pageSize: 9999, ...params },
    }).then((data) => {
  
      setData(data)
    })
  }

  const dataset = (data.selectActiveUserCount) || []
  const options = {

    tooltip: {},
    xAxis: { type: 'category' },
    yAxis: {},
    series: {
      type: 'bar',
      name: '活跃用户',
      barWidth: 50,
      data: dataset.map(x => ([x.date, !x.activityCount ? 0 : x.activityCount])),
      itemStyle: {
        normal: {
          barBorderRadius: [50, 50, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#FD8A95'
          }, {
            offset: 1,
            color: '#F13043'
          }]),
          shadowColor: 'rgba(0, 0, 0, 0.4)',

        }
      }
    }

  }


  function onChange (value) {
    UserActive({ dateType: value })
  }


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

  }


  return (
    <>
      <div>


        <div >
        <p><span style={{fontSize:'0.12rem',fontWeight:'600'}}>用户活跃数</span></p>

          <Select
            showSearch
            style={{ width: 100 }}
            placeholder="日活跃"
            optionFilterProp="children"
            onChange={onChange}
          >
            <Option value="day">日活跃</Option>
            <Option value="month">月活跃</Option>

          </Select>
        
       </div>


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

    </>
  )
}

export default UserSource;