import React, { Component, useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Icon, Table } 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 Count from './components/Count';
// import SourceRole from './components/SourceRole';
// import UserSex from './components/UserSex';
// import UserConversion from './components/UserConversion';
// import BuildingStatistic from './BuildingStatistic';

const DataReport = props => {
  const [data, setData] = useState({});
  const [time, setTime] = useState();
  const [buildingValue, setBuildingValue] = useState('');

  useEffect(() => {
    if (time) {
      getTableList({
        buildingValue,
        startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
        endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      });
    }
  }, [time,buildingValue]);

  const columns = [
    {
      title: '活动名称',
      dataIndex: 'title',
      key: 'title',
      sorter: true,
    },
    {
      title: '访问人数',
      dataIndex: 'visitPersonNum',
      key: 'visitPersonNum',
      width:'25%',
      sorter: true,
    },
    {
      title: '访问次数',
      dataIndex: 'visitNum',
      key: 'visitNum',
      width:'25%',
      sorter: true,
    },
    {
      title: '报名人数',
      dataIndex: 'signNum',
      key: 'signNum',
      width:'25%',
      sorter: true,
        // render: (text, record) => (
        //   <Navigate onClick={toAddVisitNum(record)}>{record.signNum}</Navigate>
        //   // <a style={{ color: '#66B3FF' }} onClick={toAddVisitNum(record)}><span>{record.visitNum}</span></a>
        // ),
    },
  ];

  //排序
  const handleTableChange = (pagination, filters, sorter) => {
    console.log(pagination, filters, sorter);
    getTableList({
      buildingValue,
      startDate: moment(time[0]).format('YYYY-MM-DDT00:00:00.000') + 'Z',
      endDate: moment(time[1]).format('YYYY-MM-DDT23:59:59.999') + 'Z',
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    //   sort: sorter.order,
    //   colKey: sorter.columnKey,
    });
    // const { formData } = this.state
    // this.setState({
    //   formData: {
    //     ...formData,
    //     startDate: formData.startDate,
    //     endDate: formData.endDate,
    //     buildingId: formData.buildingId,
    //     targetType: formData.targetType,
    //     pageNum: pagination.current,
    //     pageSize: pagination.pageSize,
    //     sort: sorter.order,
    //     colKey: sorter.columnKey
    //   }
    // }, this.getTableList)
  };

  function getTableList(params) {
    request({
      ...apis.activityDataStatis.activityDetailTableData,
      params: {
        ...params,
      },
    })
      .then(data => {
        console.log(data);
        setData(data);
        // this.setState({ tableData: data.records, total: data.total });
      })
      .catch();
  }

  const onTimeChange = e => {
    setTime(e);
  };

  return (
    <Card
      title={<BuildingSelect value={buildingValue} onChange={e => setBuildingValue(e)} all />}
      headStyle={{ textAlign: 'left' }}
      extra={<TimeSelect onChange={onTimeChange}></TimeSelect>}
    >
      <Table
        columns={columns}
        dataSource={data?.records}
        key="dynamicId"
        pagination={{current:data?.current, pageSize: 10, total: data?.total }}
        onChange={handleTableChange}
      ></Table>
    </Card>
  );
};
export default DataReport;
