import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Divider, Table, Space, Tag, Spin } from "antd";
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Column, Pie } from "@ant-design/charts";
import { observer } from "mobx-react";
import DatePickerCharts from "../components/search/DatePickerCharts";
import { NavLink, useParams } from "react-router-dom";
import * as comm from '@haina/utils-commons';
import * as config from "../config";
import GroupSelect from "../components/search/GroupSelect";

const Sale_sub = () => {
	const { type_sub } = useParams();
	const { sale_store, date_picker_store } = useContext(stores_Context);

	useEffect(() => {
		sale_store.get_department_order_ml_by_type_sub(date_picker_store, type_sub);
	}, []);

	const type_data = comm.emptyValue(sale_store.type_data_sub) ? { dataSource: [], columns: [] } : sale_store.type_data_sub;

	return (
		<div>
			<Row>
				<Col span={24}>
					<NavLink to={`/sale`}>返回</NavLink>
				</Col>
			</Row>
			<Spin size="large" spinning={sale_store.spinning}>
				<Row gutter={{ sm: 16, lg: 32 }}>
					{!comm.emptyValue(type_data.dataSource) &&
						type_data.dataSource.map(item => {
							return (
								<Col key={"col-" + item.subType_name} md={24} xxl={12}>
									<Divider>
										<Tag color="#87d068">{item.subType_name}</Tag>
									</Divider>
									<Table key={item.subType} dataSource={item.data} columns={type_data.columns} size="small" rowKey={record => record.key} loading={sale_store.loading_table} pagination={false} scroll={{ x: "100%" }} />
								</Col>
							);
						})}
				</Row>
			</Spin>
		</div>
	);
};
export default observer(Sale_sub);