import React, { Component, useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
import UserSource from './components/UserSource.jsx';
import UserSourcepie from './components/UserSourcepie.jsx';
// import XForm, { FieldTypes } from '../../components/XForm';
import moment from 'moment';

import EChart from '../../components/EchartsTest/EChart';
import request from '../../utils/request';
import apis from '../../services/apis';


// 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 header = props => {

  const [tableData, setTableData] = useState([])
  const [userType, setuserType] = useState([])

  const [endDate, setEndDate] = useState({})
  const [startDate, setStartDate] = useState({})
  let daterange = []

  useEffect(() => {

    setEndDate(new Date())
    setStartDate(moment().subtract(7, 'day').toDate())
    setuserType('all')
  }, [])

  const { RangePicker } = DatePicker;

  function onChangetime (dates, dateStrings) {

    daterange[1] = dateStrings[1]
    daterange[0] = dateStrings[0]

  }

  const handleSubmit = (e, props) => {

    e.preventDefault();

  }

  const getDataOf = (days) => () => {


    setEndDate(new Date())
    setStartDate(moment().subtract(days, 'day').toDate())

  }

  function onChange (e) {

    // console.log(`radio checked:${e.target.value}`);

  }

  function datalist () {

    setEndDate(daterange[1])
    setStartDate(daterange[0])

  }



  // const userType = 'all'
  let tableTitle = ['日期']
  // const dataset = data || {}

  // function tableData () {

  //   const data = (dataset.data || []).reduce((acc, item, index) => {
  //     const { date, fromName, count, registered } = item
  //     const num = userType === 'registered' ? registered : count

  //     tableTitle = tableTitle.indexOf(fromName) > -1 ? tableTitle : tableTitle.concat(fromName) // eslint-disable-line
  //     acc[date] = { ...acc[date], [`${fromName}`]: !num ? 0 : num }

  //     return acc
  //   }, {})

  //   return Object.keys(data).map(x => ({ label: x, ...data[x] }))

  // }

  function onTabledatas (e) {
    const data = (e.data || []).reduce((acc, item, index) => {
      const { date, fromName, count, registered } = item
      const num = userType === 'registered' ? registered : count

      tableTitle = tableTitle.indexOf(fromName) > -1 ? tableTitle : tableTitle.concat(fromName) // eslint-disable-line
      acc[date] = { ...acc[date], [`${fromName}`]: !num ? 0 : num }

      return acc
    }, {})

    setTableData(Object.keys(data).map(x => ({ label: x, ...data[x] })))

  }

  const columns = [
    {
      title: '日期',
      dataIndex: 'label',
      key: 'label',
      width: '20%',
    },

    // {
    //   title: '名片分享',
    //   dataIndex: '名片分享',
    //   key: '名片分享',
    //   width: '16%'

    // },
    // {
    //   title: '好友分享',
    //   dataIndex: '好友分享',
    //   key: '好友分享',
    //   width: '16%'
    // },
    // {
    //   title: '小程序搜索',
    //   dataIndex: '小程序搜索',
    //   key: '小程序搜索',
    //   width: '16%'
    // },
    // {
    //   title: '线下扫码',
    //   dataIndex: '线下扫码',
    //   key: '线下扫码',
    //   width: '16%'
    // },
    // {
    //   title: '群分享',
    //   dataIndex: '群分享',
    //   key: '群分享',
    //   width: '16%'
    // },




  ]

  function handleSelectChange (e) {

    console.log(e)
    setuserType(e)
  }




  return (<>
    <div style={{
      backgroundColor: '#fff',
      padding: '32PX 28px',
      boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
      borderRadius: '12px',
      minHeight: '60vh'
    }}>
      <Radio.Group buttonStyle="solid" defaultValue="a">
        <Radio.Button value="a" onClick={getDataOf(7)}>最近7天</Radio.Button>
        <Radio.Button value="b" onClick={getDataOf(30)}>最近1月</Radio.Button>
      </Radio.Group>
      <RangePicker
        style={{ paddingLeft: '30px' }}
        ranges={{
          Today: [moment(), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
        }}
        showTime
        // format="YYYY/MM/DD HH:mm:ss"
        onChange={onChangetime}
      />
      <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }} onClick={datalist}>
        查询
          </Button>
      <div>

        <div style={{ display: 'flex' }}>
          <div style={{
            width: '1060px',
            height: '560px',

            paddingTop: '40px',
            marginRight: ' 40px',
          }}>
            <UserSource endDate={endDate} startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
          </div>
          <div style={{
            width: '509px',
            height: '600px',

            paddingTop: '40px',

          }}>
            <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
          </div>
        </div>
        <Select style={{ width: '180px' }} placeholder="所有用户" onChange={handleSelectChange}>
          <Option value='all'>所有用户</Option>
          <Option value='registered'>注册用户</Option>
        </Select>

        <Table dataSource={tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table>
      </div>
    </div>
  </>
  )
}

export default header