import React, { useEffect, useState, useRef } from 'react';
import { DatePicker, Button, Tabs, Table, Col, Row } from 'antd';
import api from "./service";
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';

//计次就天消费
export default () => {
  const actionRef = useRef();
  const [data, setData] = useState([])
  const [dataTime, setDataTime] = useState([])
  const { RangePicker } = DatePicker;

  useEffect(() => {
    GetData();
  }, []);
  const GetData = async () => {
    var res = await api.GetData({
      "startTime": dataTime[0],
      "endTime": dataTime[1]
    });
    setData(res?.data?.data);
  }

  //列表
  const columns = [
    {
      title: '时间',
      dataIndex: 'date',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '早上消费次数',
      dataIndex: 'amCount',
      ellipsis: true,
      hideInSearch: true,
    }
    ,
    {
      title: '早上消费金额',
      dataIndex: 'amCount1',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '中午消费次数',
      dataIndex: 'pmCount',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '中午消费金额',
      dataIndex: 'pmCount1',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '晚上消费次数',
      dataIndex: 'atCount',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '晚上消费金额',
      dataIndex: 'atCount1',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '总计消费次数',
      dataIndex: 'totalCount',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '金额总计',
      dataIndex: 'totalCount1',
      ellipsis: true,
      hideInSearch: true,
    }
  ];
  const onChange = (value, dateString) => {
    setDataTime(dateString);
  };

  return (
    <PageContainer header={{
      title: '',
      breadcrumb: {},
    }}>
      <div style={{ height: "50px" }}>
        <div style={{ float: "left" }}>
          <span>时间：</span> 
          <RangePicker onChange={onChange}   />
        </div>
        <Button type="primary" style={{ float: "right" }} onClick={async ()=>{ await GetData()}} >查询</Button>
      </div>
      <Table columns={columns} dataSource={data} />
    </PageContainer>
  );
};
