import { useState, useEffect } from "react";
import { Grid, Divider, Layout, Spin, Input, Col, Row, Space, List, Table, Button } from "antd";
import { PhoneOutlined, CustomerServiceOutlined, AudioOutlined, AuditOutlined } from "@ant-design/icons";
import { useParams, useHref, useNavigate, NavLink } from "react-router-dom";
import { isEmpty, formatColonTime } from "@/utils/commons";
import dayjs from "dayjs";
import SearchForm from "@/components/SearchForm";
import { DATE_FORMAT } from "@/config";
import { TableExportBtn } from "@/components/Data";
import airTicketStore from "@/stores/Airticket";
import { usingStorage } from "@/hooks/usingStorage";

const planListColumns = [
	{
		title: "团名",
		key: "GRI_No",
		dataIndex: "GRI_No",
		// sorter: (a, b) => b.GRI_No - a.GRI_No,
	},
	{
		title: "组团人",
		key: "WL",
		dataIndex: "WL",
	},
	{
		title: "人数",
		dataIndex: "PersonNum",
		key: "PersonNum",
	},
	{
		title: "出发日期",
		key: "StartDate",
		dataIndex: "StartDate",
		sorter: (a, b) => {
			const dateA = new Date(a.StartDate);
			const dateB = new Date(b.StartDate);
			return dateB.getTime() - dateA.getTime();
		},
	},
	{
		title: "出发城市",
		key: "FromCity",
		dataIndex: "FromCity",
	},
	{
		title: "抵达城市",
		key: "ToCity",
		dataIndex: "ToCity",
	},
	{
		title: "航班",
		key: "FlightNo",
		dataIndex: "FlightNo",
	},
	{
		title: "起飞时间",
		key: "FlightStart",
		dataIndex: "FlightStart",
		render: text => formatColonTime(text),
	},
	{
		title: "落地时间",
		key: "FlightEnd",
		dataIndex: "FlightEnd",
		render: text => formatColonTime(text),
	},
	{
		title: "是否处理",
		key: "TicketIssued",
		dataIndex: "TicketIssued",
		render: (text, record) => record.TicketIssuedName,
	},
	{
		title: "状态",
		key: "FlightStatus",
		dataIndex: "FlightStatus",
		render: (text, record) => record.FlightStatusName,
	},
	{
		title: "操作",
		key: "FlightInfo",
		dataIndex: "FlightInfo",
		render: (text, record) => <NavLink to={`/airticket/plan/${record.COLI_SN}/${record.GRI_SN}`}>{"编辑"}</NavLink>,
	},
];

const Airticket = props => {
	const navigate = useNavigate();
	const { travelAgencyId } = usingStorage();
	const [getPlanList, planList, loading] = airTicketStore(state => [state.getPlanList, state.planList, state.loading]);
	const showTotal = total => `合计 ${total} `;

	useEffect(() => {
		getPlanList(travelAgencyId, "", dayjs().startOf("M").format(DATE_FORMAT), dayjs().add(3,"M").endOf("M").format(DATE_FORMAT));
	}, []);

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Row>
				<Col md={20} lg={20} xxl={20}>
					<SearchForm
						initialValue={{
							dates: [dayjs().startOf("M"), dayjs().add(3,"M").endOf("M")],
						}}
						fieldsConfig={{
							shows: ["referenceNo", "dates"],
							fieldProps: {
								referenceNo: { label: "搜索计划" },
								dates: { label: "出发日期", col: 8 },
							},
						}}
						onSubmit={(err, formVal, filedsVal) => {
							getPlanList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.endtime);
						}}
					/>
				</Col>
				<Col md={4} lg={4} xxl={4}>
					<Button icon={<AuditOutlined />} onClick={() => navigate(`/airticket/invoice`)}>
						报账
					</Button>
				</Col>
			</Row>

			<Row gutter={16}>
				<Col md={24} lg={24} xxl={24}>
					<Table bordered={true} rowKey="id" columns={planListColumns} dataSource={planList} loading={loading} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
					<TableExportBtn btnTxt="导出计划" label={`机票计划`} {...{ columns: planListColumns, dataSource: planList }} />
				</Col>
				<Col md={24} lg={24} xxl={24}></Col>
			</Row>
		</Space>
	);
};
export default Airticket;