import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Space, Radio } from "antd";
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Line } from "@ant-design/charts";
import { observer } from "mobx-react";
import DatePickerCharts from "../charts/DatePickerCharts";
import { NavLink, useParams } from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import GroupSelect from "../charts/GroupSelect";

const Sale = () => {
	const { sale_store, date_picker_store } = useContext(stores_Context);

	return (
		<div>
			<Row>
				<Col span={13}></Col>
				<Col span={8}>
					<Row>
						<Col span={12}>
							<GroupSelect store={sale_store} />
							<Radio.Group value={sale_store.date_type} onChange={e => sale_store.onChange_datetype(e)}>
								<Radio value="applyDate">下单日期</Radio>
								<Radio value="startDate">走团日期</Radio>
							</Radio.Group>
						</Col>
						<Col span={12}>
							<DatePickerCharts />
						</Col>
					</Row>
				</Col>
				<Col span={1}></Col>
				<Col span={2}>
					<Button type="primary" icon={<SearchOutlined />} loading={sale_store.loading} onClick={() => {}}>
						统计
					</Button>
				</Col>
			</Row>
			<Row>
				<Col className="gutter-row" span={24}>
					{/* <Line {...line} /> */}
				</Col>

				<Col className="gutter-row" span={24}>
					<Tabs activeKey={sale_store.active_tab_key} onChange={active_key => sale_store.onChange_Tabs(active_key)}>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									概览
								</span>
							}
							key="overview">
							<Row>
								<Col span={24}>
									{sale_store.date_title}
									{/* <Table
										dataSource={table_data.dataSource}
										columns={table_data.columns}
										size="small"
										rowKey={record => record.key}
										expandable={{
											expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>,
										}}
									/> */}
								</Col>
							</Row>
						</Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									国籍
								</span>
							}
							key="page">
							<Row>
								<Col span={24}>
									{sale_store.date_title}
									{/* <Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" /> */}
								</Col>
							</Row>
						</Tabs.TabPane>
					</Tabs>
				</Col>
			</Row>
		</div>
	);
};
export default observer(Sale);