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 './style.less'

const NewUsers = (props) => {
  const [data, setData] = useState({ records: [] })
  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 }
  }

  useEffect(() => {
    NewsUserCount({
      ...formatDate(props.startDate, props.endDate),
      buildingId: props.buildingId, 
      targetType: props.targetType
    })
  }, [props.startDate, props.endDate, props.buildingId, props.targetType])


  function NewsUserCount (params) {
    request({
      ...apis.activityDataStatis.selectAllActivityUser,
      params: {...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.selectAllActivityUser) || []
  const options = {

   
      color: ["rgba(241,43,62,1)", "rgba(254,146,156,1)", "rgba(100,124,225,1)", "rgba(162,185,255,1)", "rgba(255,132,79,1)"],
      tooltip: {
        trigger: "axis"
      },
      icon: "rect",
      legend: {
        data: ["访问人数", "访问次数", "新增注册用户", "分享人数", "分享次数"]
      },
      toolbox: {},
      xAxis: {
        type: "category",
      },
      yAxis: {},
      dataZoom,
      series: [
        {
          name: "访问人数",
          type: "line",
          smooth:true, 
        },
        {
          name: "访问次数",
          type: "line",
          smooth:true, 
        },
        {
          name: "新增注册用户",
          type: "line",
          smooth:true, 
        },
        {
          name: "分享人数",
          type: "line",
          smooth:true, 
        },
        {
          name: "分享次数",
          type: "line",
          smooth:true, 
        },
      ],
      dataset: {
        dimensions: ['date', 'visitPersonCount', 'visitCount', 'addregistCount', 'sharePersonCount',  'shareCount'],
        source: dataset
      }
    
  }


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

  return (
    <>
      <div ><p><span style={{fontSize:'0.12rem',fontWeight:'600'}}>活动趋势图</span></p></div>
      <div style={{marginTop:'30px'}}>
        <EChart options={options} style={piestyles}  />
      </div>
    </>
  )
}

export default NewUsers;