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';
import router from 'umi/router';


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 = ['类型']

let columns = [
  {
    title: '日期',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  // {
  //   title: '名片分享',
  //   dataIndex: '名片分享',
  //   key: '名片分享',
  // },
  // {
  //   title: '生成海报',
  //   dataIndex: '生成海报',
  //   key: '生成海报',
  // },
  // {
  //   title: '小程序搜索',
  //   dataIndex: '小程序搜索',
  //   key: '小程序搜索',
  // },
  // {
  //   title: '好友分享',
  //   dataIndex: '好友分享',
  //   key: '好友分享',
  // },
]

// let columns = [
//   {
//     title: '类型',
//     dataIndex: 'value',
//     key: 'value',
//   }
// ]

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 = () => {
    console.log()
    this.setState({
      endDate: daterange[1] === '' ? new Date() : daterange[1],
      startDate: daterange[0] === '' ? moment().subtract(7, 'day').toDate() : daterange[0],
    })
  }

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

  onTabledatas = (e) => {
    console.log('this.state.userType: ', this.state.userType)
    e.tdWxDicts.map(x => {
      columns = columns.filter(y => y.key != x.sceneType).concat({
        title: x.sceneAlias,
        dataIndex: x.sceneType,
        key: x.sceneType,
      })
    })
    const data = (e.list || []).reduce((acc, item) => {
      const { sceneType, fromNum, registeredNum, createTime } = item
      const num = this.state.userType === 'registered' ? registeredNum : fromNum
      acc[createTime] = { ...acc[createTime], ...item, [`${sceneType}`]: !num ? 0 : num }
      return acc
    }, {})

    const dictData = e.tdWxDicts.reduce((acc, item, index) => {
      const { sceneType } = item
      acc[sceneType] = 0
      return acc
    }, {})

    const tableData = Object.keys(data).map(k => data[k]).reduce((acc, item, index) => {
      acc[index] = { ...dictData, ...item }
      return acc
    }, [])

    this.setState({ tableData })

  }

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


  render() {
    return (
      <>
        <div>
          <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>
          <Button onClick={() => router.go(-1)} style={{ float: 'right' }}>返回</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
