import React from 'react';
import {
	Form,
	Input,
	Button,
	Grid,
	Space, Divider, Select
} from '@arco-design/web-react';
import {IconRefresh, IconSearch} from '@arco-design/web-react/icon';
import {statusDict} from "@/enum/dict";

const {Row, Col} = Grid;
const {useForm} = Form;

function SearchForm(props: {
	onSearch: (values: Record<string, any>) => void;
}) {
	const [form] = useForm();

	const handleSubmit = () => {
		const values = form.getFieldsValue();
		props.onSearch(values);
	};

	const handleReset = () => {
		form.resetFields();
		props.onSearch({});
	};

	const colSpan = 6

	return (
		<>
			<Form
				form={form}
				labelCol={{span: 5}}
				wrapperCol={{span: 19}}
				labelAlign="left"
			>
				<Row gutter={24}>
					<Col span={colSpan}>
						<Form.Item label="账号" field="account">
							<Input placeholder="请输入账号" allowClear/>
						</Form.Item>
					</Col>
					<Col span={colSpan}>
						<Form.Item label="昵称" field="name">
							<Input placeholder="请输入昵称" allowClear/>
						</Form.Item>
					</Col>
					<Col span={colSpan}>
						<Form.Item label="状态" field="status">
							<Select placeholder="请选择" options={statusDict} allowClear/>
						</Form.Item>
					</Col>
					<Col span={colSpan}>
						<Form.Item>
							<Space>
								<Button type="primary" icon={<IconSearch/>} onClick={handleSubmit}>
									搜索
								</Button>
								<Button icon={<IconRefresh/>} onClick={handleReset}>
									重置
								</Button>
							</Space>
						</Form.Item>
					</Col>
				</Row>
			</Form>
			<Divider style={{margin: '0 0 20px 0'}}/>
		</>
	);
}

export default SearchForm;