import React, {Component} from 'react';
import {Layout, Menu, Image, Row, Col, DatePicker, Space, Button} from 'antd';
import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
import {
    HomeOutlined,
    TeamOutlined,
    DashboardOutlined,
    SearchOutlined,
} from '@ant-design/icons';
import {stores_Context} from '../config'
import {Line} from "@ant-design/charts";
import SiteSelect from "../charts/SiteSelect";
import {observer} from 'mobx-react';

class Orders extends Component {

    static contextType = stores_Context;

    constructor(props) {
        super(props);

    }


    render() {
        const {orders_store} = this.context;
        const data_source = orders_store.orderCountData.ordercount1 ? orders_store.orderCountData.ordercount1 : [];
        const config = {
            data: data_source,
            padding: 'auto',
            xField: 'ApplyDate',
            yField: 'orderCount',
            seriesField: 'WebCode',
            xAxis: {
                type: 'timeCat',
            },
            smooth: true,
        };

        return (
            <div>
                <Row>
                    <Col span={12}></Col>
                    <Col span={2}><SiteSelect/></Col>
                    <Col span={6}>
                        <DatePicker.RangePicker format={config.DATE_FORMAT}
                                                defaultValue={[orders_store.startdate, orders_store.enddate]}
                                                onChange={orders_store.onChange_dataPicker}/>
                    </Col>
                    <Col span={4}>
                        <Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
                            orders_store.getOrderCount();
                        }}>统计</Button>
                    </Col>
                </Row>
                <Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>

                    <Col className="gutter-row" span={24}>
                        <Line {...config} />
                    </Col>

                    <Col className="gutter-row" span={24}>
                        表格
                    </Col>

                </Row>
            </div>
        );
    }
}

export default observer(Orders);