import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Space, Radio, Select } 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 "../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);

	const ml_data = sale_store.ml_data; //毛利数据
	const type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; //毛利数据

	const column_config = {
		data: ml_data,
		xField: "COLI_Date",
		yField: "COLI_YJLY",
		seriesField: "groups",
		label: {
			position: "top",
		},
		legend: {
			itemValue: {
				formatter: (text, item) => {
					const items = ml_data.filter((d) => d.groups === item.value); //按分组筛选
					return items.length ? items.reduce((a, b) => a + b.COLI_YJLY, 0) : ""; //计算总数
				},
			},
		},
		tooltip: {
			// customContent: (title, items) => {
			//     const data = items[0]?.data || {};
			//     return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
			// }
			title: (title, datum) => {
				return title + " " + comm.getWeek(datum.COLI_Date); //显示周几
			},
		},
	};

	//格式化数据，饼图只支持数字模式
	const format_data_for_pie = (data) => {
		let result_arr = [];
		if (!comm.empty(data)) {
			data.map((item) => {
				item.COLI_ML_number = comm.price_to_number(item.COLI_ML);
				result_arr.push(item);
			});
		}
		return result_arr;
	};

	const pie_config = {
		appendPadding: 10,
		data: format_data_for_pie(type_data.dataSource),
		angleField: "COLI_ML_number",
		colorField: "OPI_Name",
		radius: 0.8,
		label: {
			type: "outer",
			content: "{name} {value} \n {percentage}",
		},
		legend: false, //不显示图例
		interactions: [
			{
				type: "element-selected",
			},
			{
				type: "element-active",
			},
		],
	};

	return (
		<div>
			<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
				<Col md={24} lg={10} xxl={12}></Col>
				<Col md={24} lg={14} xxl={12}>
					<Row>
						<Col md={24} lg={7} xxl={6}>
							<GroupSelect store={sale_store} />
							<Select value={sale_store.date_type} style={{ width: "95%" }} onChange={(value) => sale_store.onChange_datetype(value)}>
								<Select.Option key="1" value="ConfirmDate">
									确认日期
								</Select.Option>
								<Select.Option key="2" value="applyDate">
									下单日期
								</Select.Option>
								<Select.Option key="3" value="startDate">
									走团日期
								</Select.Option>
							</Select>
						</Col>
						<Col md={24} lg={12} xxl={10}>
							<DatePickerCharts />
						</Col>
						<Col md={24} lg={5} xxl={8}>
							<Button
								type="primary"
								icon={<SearchOutlined />}
								loading={sale_store.loading}
								onClick={() => {
									sale_store.get_department_order_ml(date_picker_store);
									sale_store.get_department_order_ml_by_type(date_picker_store);
								}}>
								统计
							</Button>
						</Col>
					</Row>
				</Col>
			</Row>

			<Row>
				<Col className="gutter-row" md={24}>
					<Column {...column_config} />
				</Col>

				<Col className="gutter-row" md={24}>
					<Tabs
						activeKey={sale_store.active_tab_key}
						onChange={(active_key) => {
							sale_store.onChange_Tabs(active_key);
							sale_store.get_department_order_ml_by_type(date_picker_store);
						}}>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined /> 总览
								</span>
							}
							key="All"></Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined /> 国籍
								</span>
							}
							key="Country"></Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									产品类型
								</span>
							}
							key="Product"></Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									出行目的
								</span>
							}
							key="TravelMotivation"></Tabs.TabPane>
						<Tabs.TabPane
							tab={
								<span>
									<ContainerOutlined />
									成员关系
								</span>
							}
							key="GuestGroupType"></Tabs.TabPane>
					</Tabs>
					<Row>
						<Col span={24}>
							<Table dataSource={type_data.dataSource} columns={type_data.columns} size="small" rowKey={(record) => record.key} loading={sale_store.loading_table} pagination={false} scroll={{ x: "100%" }} />
						</Col>
						<Col sm={24} lg={12}>
							{sale_store.active_tab_key == "All" ? <Pie {...pie_config} /> : ""}
						</Col>
					</Row>
				</Col>
			</Row>
		</div>
	);
};
export default observer(Sale);