import { useEffect, useState, useRef } from 'react';
import { DatePicker, Radio, Space, Tabs, Button, Table, Col, Row, Spin, Card } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import styles from './index.css';
import moment from 'moment';
import api from './service';
import { nanoid } from 'nanoid';
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

const App = () => {
  const [tabPosition, setTabPosition] = useState('left');
  const [tabIndex, setTabIndex] = useState(1);
  const [tableData, setTableData] = useState([]);
  const [timeRange, setTimeRange] = useState([
    moment(moment(new Date(Date.now())).format('YYYY-MM-DD 00:00:00')),
    moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
  ]);	//日期选择器

  const [loading, setLoading] = useState(false);

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      width:100,
      hideInSearch: true,
    },
    {
      title: '金额',
      dataIndex: 'saleMoney',
      hideInSearch: true,
    },
    // {
    //   title: '销售金额',
    //   dataIndex: 'saleMoney',
    //   hideInSearch: true,
    // },
    // {
    //   title: '实收金额',
    //   dataIndex: 'realityMoney',
    //   hideInSearch: true,
    // },
    // {
    //   title: '优惠金额',
    //   dataIndex: 'discountMoney',
    //   hideInSearch: true,
    // },
  ]


  useEffect(() => {
    initData();
  }, [tabIndex]);

  const initData = async () => {
    setLoading(true);
    const startTime = moment(timeRange[0]).format('YYYY-MM-DD HH:mm:ss');
    const endTime = moment(timeRange[1]).format('YYYY-MM-DD HH:mm:ss');
    var data = await api.GetSalesReport({ "type": tabIndex, "startTime": startTime, "endTime": endTime });
    data.forEach(item => {
      item.key = nanoid();
    })
    setTableData(data);
    setLoading(false);
  }
  return (
    <>
      <PageContainer>
        <Card style={{ marginBottom: '30px' }}>
          <Row>
            <Col xs={24} sm={12} md={12} lg={12} xl={6} style={{ margin: '10px 0' }}>
              <div className={styles['echarts-card-choose']}>
                <div className={styles['echarts-card-choose-text']}>
                  起止时间：
                </div>
                <RangePicker showTime style={{ width: '70%' }} className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
                  let tempDate = [
                    moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
                    moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
                  ]
                  setTimeRange(tempDate);
                }} />
              </div>
            </Col>
            <Col xs={24} sm={12} md={12} lg={12} xl={6} style={{ margin: '10px 0' }}>
              <Button className={styles['echarts-card-btn']} type="primary" style={{ width: '100px', marginRight: '10px' }} onClick={() => initData()}>查询</Button>
              <Button className={styles['echarts-card-btn']} style={{ width: '100px' }} onClick={() => {
                setTimeRange([
                  moment(moment(new Date(Date.now())).format('YYYY-MM-DD 00:00:00')),
                  moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
                ]);
              }}>重置</Button>
            </Col>
          </Row>
        </Card>
        <Card>
          <Spin spinning={loading} delay={500}>

            <Tabs tabPosition={tabPosition} value={tabIndex} onChange={value => { setTabIndex(value); }}

              items={new Array(2).fill(null).map((_, i) => {
                const id = String(i + 1);
                return {
                  label: id == 1 ? `营收总览` : `支付渠道`,
                  key: id,
                  children: <Table
                    columns={columns}
                    dataSource={tableData} />,
                };
              })}

            />
          </Spin>

          {/* <Tabs tabPosition={tabPosition} value={tabIndex} onChange={value => { setTabIndex(value); }}>
            <TabPane tab="分类统计" key={1}>
              {
                tabIndex == 1 && <>
                  <Space style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <div className={styles['tabs-title']}>
                      分类统计
                    </div>
                  </Space>
                  <Table
                    columns={columns}
                    dataSource={tableData} />
                </>
              }
            </TabPane>,
            <TabPane tab="单品统计" key={2}>
              {
                tabIndex == 1 && <>
                  <Space style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <div className={styles['tabs-title']}>
                      单品统计
                    </div>
                  </Space>
                  <Table
                    columns={columns}
                    dataSource={tableData} />
                </>
              }
            </TabPane>
          </Tabs> */}
        </Card>
      </PageContainer>
    </>
  );
};
export default App;