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 XForm, { FieldTypes } from '../../components/XForm';
import moment from 'moment';
import router from 'umi/router';
// 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 };
  };

let columns = [
  {
    title: '日期',
    dataIndex: 'createTime',
    key: 'createTime',
  },
];

let daterange = [];

const header = props => {
  const {
    startDate = moment().subtract(7, 'day').format('YYYY-MM-DDT00:00:00.000') + 'Z',
    endDate = moment().format('YYYY-MM-DDT23:59:59.999') + 'Z',
  } = props;
  const [data, setData] = useState({ records: [] });

  const [tableData, setTableData] = useState([]);
//   const [endDate, setEndDate] = useState({});
  const [userType, setUserType] = useState('all');
//   const [startDate, setStartDate] = useState({});

  useEffect(() => {
    userResource({startDate, endDate,userType});
  }, [startDate, endDate,userType]);

  function userResource(params) {
    request({
      ...apis.indexEcharts.selectPersonFrom,
      params,
    }).then(data => {
    //   setDate(data);
      onTabledatas(data, 'all');
    });
  }

  const onTabledatas = (e, changeType) => {
    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 = changeType === '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;
      }, []);

    setTableData(tableData);
  };

  function handleSelectChange(e) {
    setUserType(e);
  }

  function exportUserStats() {
    console.log(startDate, endDate, userType);
    request({
      ...apis.indexEcharts.exportUserStats,
      params: { startDate, endDate, userType },
    }).then(data => {
      if (!data) {
        return;
      }
      const url = window.URL.createObjectURL(new Blob([data]));
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '新增用户.xlsx');
      document.body.append(link);
      link.click();
    });
  }

  return (
    <>
      <div>
        <Row>
          <Col span={22}>
            <Select
              style={{ width: '180px' }}
              placeholder="所有用户"
              onChange={e => handleSelectChange(e)}
            >
              <Option value="all">所有用户</Option>
              <Option value="registered">注册用户</Option>
            </Select>
          </Col>
          <Col span={2}>
            {/* <Button type="primary" onClick={exportUserStats}>
              导出
            </Button> */}
          </Col>
        </Row>

        <Table
          style={{ marginTop: '20px' }}
          dataSource={tableData}
          columns={columns}
          pagination={false}
          scroll={{ y: 500 }}
        ></Table>
      </div>
    </>
  );
};

export default header;
