import React, {Component} from 'react';
import {Table, Button, Space, Radio} from 'antd';
import {SearchOutlined} from '@ant-design/icons';
import GroupSelect from './GroupSelect';
import DatePickerCharts from "./DatePickerCharts";
import {stores_Context} from "../config";
import {observer} from "mobx-react";

class MobileDeal extends Component {
    static contextType = stores_Context;

    constructor(props) {
        super(props);
    }

    render() {
        const {dashboard_store} = this.context;
        const mobile_data = dashboard_store.mobile_data;
        return (
            <div>
                <h2>移动成交</h2>
                <GroupSelect store={mobile_data}/>
                <Space size="large">
                    <DatePickerCharts hide_vs={true}/>

                    <Radio.Group value={mobile_data.date_type} onChange={mobile_data.onChange_datetype}>
                        <Radio value="applyDate">预定日期</Radio>
                        <Radio value="startDate">出发日期</Radio>
                    </Radio.Group>

                    <Button type="primary" icon={<SearchOutlined/>} loading={mobile_data.loading} onClick={() => {
                        mobile_data.asyncFetch();
                    }}>统计</Button>
                </Space>
                <Table dataSource={mobile_data.data} columns={mobile_data.columns} pagination={false} size="small"/>
            </div>
        );
    }
}

export default observer(MobileDeal);