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 UserSource = (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.selectPersonFrom,
      params,
    }).then((data) => {
      console.log(data,"222222")
      setxData(data.tdWxDicts.map(x =>  x.sceneAlias))
      setFromData(data.tdWxDicts.map(x => x.fromData))
      setRegisterData(data.tdWxDicts.map(x => x.registerSum))
      props.onSuccess(data)
    })
  }

  const subtitle = '最近7天';
  const baroptions = {
    title: { },
    xAxis: { 
              type: 'category',
              data: xData,
              axisLabel: {rotate: 45}
            },
    legend: {
      left: '20%',
      data: ['所有用户', '注册用户']
    },

    tooltip: {},

    yAxis: {},
    series: [
      {
        type: 'bar', name: '所有用户', datasetIndex: 0,
        barWidth: 20,
        data: fromData,
        itemStyle: {
          normal: {
            barBorderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FFC4A8'
            }, {
              offset: 1,
              color: '#FF7E49'
            }]),
            shadowColor: 'rgba(0, 0, 0, 0.4)',

          }
        }
      },
      {
        type: 'bar',
        name: '注册用户',
        barWidth: 20,
        data: registerData,
        itemStyle: {
          normal: {
            barBorderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FE939D'
            }, {
              offset: 1,
              color: '#F0293C'
            }]),
            shadowColor: 'rgba(0, 0, 0, 0.4)',

          }
        }

      },
    ],
    // dataset: {
    //   id: 'bar',
    //   dimensions: ['fromName', 'userCount', 'registered'],
    //   source: source,
    // },
  }


  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 UserSource;