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 UserSourceDetail = (props) => {
  const [xData, setxData] = useState([])
  const [fromData, setFromData] = useState([])
  const [registerData, setRegisterData] = useState([])
  //柱图
  useEffect(() => {
    userResource(formatDate(props.startDate, props.endDate))
  }, [props.startDate, props.endDate])

  function userResource(params) {
    request({
      ...apis.indexEcharts.selectPersonFromGroupByDay,
      params,
    }).then((data) => {
      setxData(data.map(x =>  x.createTime))
      setFromData(data.map(x => x.fromNum))
      setRegisterData(data.map(x => x.registeredNum))
      props.onSuccess(data)
    })
  }

  const subtitle = '最近7天';
  const baroptions = {
    title: {
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['新用户数', '授权注册']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name: '新用户数',
            type: 'line',
            data: fromData,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '授权注册',
            type: 'line',
            data: registerData,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            position: 'start',
                            formatter: '最大值'
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
}

  const barstyle = {
    width: '100%',
    height: '480px',
    minWidth: '400px'
  }

  return (
    <>
      <div>
      <p onClick={()=>router.push('/statistical/userSource')}><span style={{borderBottom:'1px solid #f02d40',cursor: 'pointer',color:'#333',fontSize:'0.12rem',fontWeight:'600'}}>用户来源</span> {!props.BuildSelectHide && <span style={{ fontSize: '0.09rem', color: '#888', marginLeft: '0.06rem' }}>最近七天</span>}</p>

        <EChart options={baroptions} style={barstyle} />

      </div>

    </>
  )
}

export default UserSourceDetail;