import React from 'react';
import { Form, Input, DatePicker, Select, Button, Space } from 'antd';
import { FormItemProps } from 'antd/lib/form';
const forms: FormItemProps[] = [
	{
		name: 'filter',
		label: '关键字',
		children: <Input placeholder='任务号或任务名'></Input>,
	},
	{
		name: 'overdue',
		label: '超期',
		children: (
			<Select style={{ width: 150 }} placeholder='请选择是否超期'>
				{[
					{ label: '全部', value: 0 },
					{ label: '是', value: 1 },
					{ label: '否', value: 2 },
				].map((type) => {
					return (
						<Select.Option key={type.value} value={type.value}>
							{type.label}
						</Select.Option>
					);
				})}
			</Select>
		),
	},
	// {
	// 	name: 'source',
	// 	label: '任务来源',
	// 	children: (
	// 		<Select style={{ width: 150 }} placeholder='请输入搜索条件'>
	// 			{[
	// 				{ label: '全部', value: 0 },
	// 				{ label: '人工创建', value: 1 },
	// 				{ label: '设备告警', value: 2 },
	// 			].map((type) => {
	// 				return (
	// 					<Select.Option key={type.value} value={type.value}>
	// 						{type.label}
	// 					</Select.Option>
	// 				);
	// 			})}
	// 		</Select>
	// 	),
	// },
	{
		name: 'start_time',
		label: '开始时间',
		children: (
			<DatePicker showToday={false} placeholder='请选择开始时间'></DatePicker>
		),
	},
	{
		name: 'end_time',
		label: '结束时间',
		children: (
			<DatePicker showToday={false} placeholder='请选择结束时间'></DatePicker>
		),
	},
];
interface Iprops {
	onSearch: (values: any) => void;
}
const search: React.FC<Iprops> = ({ onSearch }) => {
	const [form] = Form.useForm();
	return (
		<div style={{ marginBottom: 20 }}>
			<Form
				form={form}
				layout='inline'
				onFinish={(data) => {
					onSearch({
						...data,
						start_time: data.start_time?.hours(0).minute(0).second(0).unix(),
						end_time: data.end_time?.hours(23).minute(59).second(59).unix(),
					});
				}}>
				{forms.map((formItem) => {
					return (
						<Form.Item
							style={{ marginTop: 20 }}
							{...formItem}
							key={formItem.name as string}></Form.Item>
					);
				})}
				<Space style={{ marginTop: 20 }}>
					<Button type='primary' htmlType='submit'>
						搜索
					</Button>
					<Button
						htmlType='reset'
						onClick={() => {
							form.resetFields();
						}}>
						清空
					</Button>
				</Space>
			</Form>
		</div>
	);
};
export default search;
