import React, { Component, useState, useEffect, useRef } from 'react';
import { Card, Row, Col, Statistic, Icon, Tabs, Form, Select, Button, Modal } from 'antd';
// import IndexEcharts from './components/indexEcharts';
// import Swiper from './swiper/index';
import moment from 'moment';
import router from 'umi/router';
import request from '@/utils/request';
import apis from '@/services/apis';
import TimeSelect from '../compents/TimeSelect';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import Navigate from '@/components/Navigate';
import StatsChartLine from './BuildingStatistic/component/StatsChartLine';
// import ActivityCount from '../compents/activityCount';
// import NewUsers from '../compents/NewUsers';
// import OverviewDeatil from '../compents/OverviewDeatil';

// import Count from './components/Count';
// import SourceRole from './components/SourceRole';
// import UserSex from './components/UserSex';
// import UserConversion from './components/UserConversion';
// import BuildingStatistic from './BuildingStatistic';
const { TabPane } = Tabs;
const { Option } = Select;

const activityOverView = props => {
  const { buildingId, buildingName } = props.location.query;

  const timeRef = useRef();

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

  const [time, setTime] = useState();

  //重置搜索
  const handleReset = e => {
    props.form.resetFields();
    timeRef.current.reset();
    setSearchData({
      startDate:
        moment()
          .subtract(7, 'day')
          .format('YYYY-MM-DDT00:00:00.000') + 'Z',
      endDate: moment().format('YYYY-MM-DDT23:59:59.999') + 'Z',
    });
  };

  const onTimeChange = e => {
    setTime(e);
  };
  const handleSubmit = e => {
    props.form.validateFieldsAndScroll((err, values) => {
      setTimeValue();
      setSearchData({
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      });
    });
  };

  const { getFieldDecorator } = props.form;

  return (
    <div>
      <Form layout="inline" onSubmit={handleSubmit}>
        <Form.Item>
          <TimeSelect onChange={onTimeChange} ref={timeRef}></TimeSelect>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }}>
            搜索
          </Button>
          <Button onClick={e => handleReset()} style={{ marginLeft: '30px' }}>
            重置
          </Button>
        </Form.Item>
      </Form>
      <div style={{ marginTop: '20px' }}>
        <StatsChartLine
          params={serachData}
          buildingId={buildingId}
          buildingName={buildingName}
        ></StatsChartLine>
      </div>
      <div style={{ marginTop: '20px' }}>
        {/* <NewUsers params={serachData} dataZoom={false}></NewUsers> */}
      </div>
    </div>
  );
};

const WrappedTypeForm = Form.create()(activityOverView);
export default WrappedTypeForm;
