import { NavLink } from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";

const { Title } = Typography;
const feedbackListColumns = [
	{
		title: "团名",
		dataIndex: "EOI_Group_Name",
		render: (text, record) => <NavLink to={`/feedback/${record.EOI_GRI_SN}`}>{text}</NavLink>,
	},
	{
		title: "离团日期",
		dataIndex: "EOI_Date",
		render: (text, record) => text,
		sorter: (a, b) => b.EOI_Date - a.EOI_Date,
	},
	{
		title: "城市",
		key: "City",
		dataIndex: "City",
	},
	{
		title: "评分",
		dataIndex: "Average",
		sorter: (a, b) => b.Average - a.Average,
	},
	{
		title: "图片数",
		dataIndex: "PicNum",
		sorter: (a, b) => b.PicNum - a.PicNum,
	},
	{
		title: "导游",
		dataIndex: "GriName",
	},
	{
		title: "表状态",
		dataIndex: "FState",
		sorter: (a, b) => b.FState - a.FState,
	},
];

function Index() {
	const { feedbackStore, authStore } = useStore();
	const { feedbackList, search_date_start, search_date_end } = feedbackStore;
	const [referenceNo, onNumberChange] = useState("");
	const showTotal = total => `Total ${feedbackList.length} items`;

	useEffect(() => {
		feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59");
	}, []);

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Title level={3}>反馈表</Title>

			<Row gutter={16}>
				<Col md={24} lg={6} xxl={4}>
					<Input
						placeholder="团号"
						onChange={e => {
							onNumberChange(e.target.value);
						}}
					/>
				</Col>
				<Col md={24} lg={6} xxl={4}>
					<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={config.DATE_PRESETS} onChange={feedbackStore.onDateRangeChange} />
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<Button
						type="primary"
						loading={feedbackStore.loading}
						onClick={() => feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59")}>
						搜索
					</Button>
				</Col>
			</Row>
			<Row>
				<Col md={24} lg={24} xxl={12}>
					<Table bordered={true} columns={feedbackListColumns} dataSource={toJS(feedbackList)} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
				</Col>
				<Col md={24} lg={24} xxl={12}></Col>
			</Row>
		</Space>
	);
}

export default observer(Index);