import React, { Component, useState, useEffect } from 'react';
import { Radio, DatePicker, Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb } from 'antd';
import { Row, Col, Menu, Dropdown } from 'antd';
import NewUsers from './components/NewUsers'
// 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({ records: [] })

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

  useEffect(() => {

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

  }, [])

  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) {


  }

  function datalist () {

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

  }

 
  function handleSelectChange (e) {

    console.log(e)

  }

  const { Column, ColumnGroup } = Table;

  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 onChange={onChange} buttonStyle="solid" defaultValue="a"  style={{marginBottom:'20px'}}>
        <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>
        <NewUsers BuildSelectHide={true} endDate={endDate} startDate={startDate}  dataZoom={true} ></NewUsers>
        {/* */}
      </div>
    </div>
  </>
  )
}

export default header