import React, {Component} from 'react';
import {Layout, Menu, Image, Row, Col, DatePicker, Space, Button, Tabs, Select, Table} from 'antd';
import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
import {
    ContainerOutlined, CarryOutOutlined,
    SmileOutlined, TagsOutlined, GlobalOutlined,
    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';
import DatePickerCharts from '../charts/DatePickerCharts'

class Orders extends Component {

    static contextType = stores_Context;

    constructor(props) {
        super(props);

    }


    render() {
        const {orders_store} = this.context;
        const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
        const config = {
            data: data_source,
            padding: 'auto',
            xField: 'xField',
            yField: 'yField',
            seriesField: 'seriesField',
            xAxis: {
                type: 'timeCat',
            },
            // tooltip: {
            //     customContent: (title, items) => {
            //         const data = items[0]?.data || {};
            //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
            //     }
            // },
            smooth: true,
        };

        return (
            <div>
                <Row>
                    <Col span={14}>
                    </Col>
                    <Col span={2}>
                        <SiteSelect/>
                    </Col>
                    <Col span={6}>
                        <DatePickerCharts/>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
                            orders_store.getOrderCount();
                            orders_store.onChange_Tabs(orders_store.active_tab_key);
                        }}>统计</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}>
                        <Tabs defaultActiveKey="tab_form" onChange={() => orders_store.onChange_Tabs}>
                            <Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">
                                <Table dataSource={orders_store.orderCountData_Form.dataSource} columns={orders_store.orderCountData_Form.columns} size="small"/>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
                                产品类型
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
                                国籍
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
                                线路
                            </Tabs.TabPane>
                            <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="tab_destination">
                                目的地
                            </Tabs.TabPane>
                        </Tabs>
                    </Col>

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

export default observer(Orders);