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 { RangePicker } = DatePicker;
const { Option } = Select


// 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 }
// }

let daterange = []
let tableTitle = ['日期']

const columns = [
  {
    title: '日期',
    dataIndex: 'label',
    key: 'label',
    width:'20%'
  },
  {
    title: '名片分享',
    dataIndex: '名片分享',
    key: '名片分享',
  },
  {
    title: '生成海报',
    dataIndex: '生成海报',
    key: '生成海报',
  },
  {
    title: '小程序搜索',
    dataIndex: '小程序搜索',
    key: '小程序搜索',
  },
  {
    title: '好友分享',
    dataIndex: '好友分享',
    key: '好友分享',

  },


]

class Header extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      dataSoures: [],
      tableData: [],
      userType: 'all',
      endDate: {},
      startDate: {}
    }
  }

  componentDidMount() {
    this.setState({ endDate: new Date(), startDate: moment().subtract(7, 'day').toDate() })
  }



  formatDate = (start, end) => {
    const tempStartDate = `${moment(start).format('YYYY-MM-DDT00:00:00.000')}Z`
    const tempEndDate = `${moment(end).format('YYYY-MM-DDT23:59:59.999')}Z`
    return { startDate: tempStartDate, endDate: tempEndDate }
  }

  onChangetime = (_dates, dateStrings) => {
    daterange[1] = dateStrings[1]
    daterange[0] = dateStrings[0]
  }

  handleSubmit = (e, props) => {

    e.preventDefault();

  }

  getDataOf = (days) => {
    this.setState({ endDate: new Date(), startDate: moment().subtract(days, 'day').toDate() })
  }

  datalist = () => {
    this.setState({ endDate: daterange[1], startDate: daterange[0] })
  }

  onSuccess = e => {
    this.setState({ dataSoures: e }, () => {
      this.onTabledatas(e)
    })
  }

  onTabledatas = (e) => {
    console.log('this.state.userType: ', this.state.userType)
    const data = (e.data || []).reduce((acc, item) => {
      const { date, fromName, count, registered } = item
      const num = this.state.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
    }, {})

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

  }

  handleSelectChange = (e) => {
    this.setState({ userType: e }, () => {
      this.onTabledatas(this.state.dataSoures)
    })
  }


  render() {
    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={() => this.getDataOf(7)}>最近7天</Radio.Button>
          <Radio.Button value="b" onClick={() => this.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={(_dates, dateStrings) => this.onChangetime(_dates, dateStrings)}
        />
        <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }} onClick={() => this.datalist()}>
          查询
        </Button>
        <div>
  
          <div style={{ display: 'flex' }}>
            <div style={{
              width: '1060px',
              height: '560px',
              paddingTop: '40px',
              marginRight: ' 40px',
            }}>
              <UserSource BuildSelectHide={true} endDate={this.state.endDate} startDate={this.state.startDate} onSuccess={(e) => this.onSuccess(e)}></UserSource>
            </div>
            <div style={{
              width: '509px',
              height: '600px',
              paddingTop: '40px',
  
            }}>
              <UserSourcepie endDate={this.state.endDate} startDate={this.state.startDate}></UserSourcepie>
            </div>
          </div>
          <Select style={{ width: '180px' }} placeholder="所有用户" onChange={(e) => this.handleSelectChange(e)}>
            <Option value='all'>所有用户</Option>
            <Option value='registered'>注册用户</Option>
          </Select>
  
          <Table style={{marginTop:'20px'}} dataSource={this.state.tableData} columns={columns} pagination={false} scroll={{ y: 500 }}></Table>
        </div>
      </div>
    </>
    )
  }
}

export default Header
