import React, { Component, useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Icon, Button } from 'antd';
// import IndexEcharts from './components/indexEcharts';
import moment from 'moment';
import request from '@/utils/request';
import apis from '@/services/apis';
import CitySelect from '@/components/SelectButton/CitySelect2';
import TimeSelect from '../../compents/TimeSelect';
import StatsChart from './component/StatsChart';

const BuildingStatistic = props => {
  const [cityId, setCityId] = useState('');
  const [time, setTime] = useState();

  const [data, setData] = useState({});
  useEffect(() => {
    if (time) {
      getData({
        cityId:cityId||undefined,
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      });
    }
  }, [cityId, time]);
  const onTimeChange = e => {
    console.log(e, 'onTimeChange');
    setTime(e)
    // getData({ startDate: e[0], endDate: e[1] });
  };

  const getData = params => {
    request({
      ...apis.stats.barList,
      params: {
        ...params
      },
    }).then(data => {
      setData(data);
    });
  };
  console.log(data, '----------');
  return (
    <Card
      title={<CitySelect value={cityId} onChange={e => setCityId(e)} all />}
      headStyle={{ textAlign: 'left' }}
      extra={<TimeSelect onChange={onTimeChange}></TimeSelect>}
    >
      <Row>
        <Col span={12}>
          <StatsChart title="项目公客排行" data={data.gkList} />
        </Col>
        <Col span={12}>
          <StatsChart title="项目私客排行" data={data.skList} />
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <StatsChart title="项目访问人数排行" subtext="项目详情访问情况" data={data.visitList} />
        </Col>
        <Col span={12}>
          <StatsChart title="成交量排行" data={data.successList} />
        </Col>
      </Row>
    </Card>
  );
};
export default BuildingStatistic;
