import React from 'react';
import { Button, Col, Form, Input, Row, Select, Space, DatePicker } from 'antd';
import { ClearOutlined, SearchOutlined } from '@ant-design/icons';
import styles from "../SalaryData.less";

const { Option } = Select; 
const SalaryDataRenderSimpleForm = (props) => {
    const [form] = Form.useForm();
    const { handleSearch, handleFormReset, params } = props;
    
    React.useEffect(() => {
        form.setFieldsValue({
            name: params?.name,
            phone: params?.phone,
            month: params?.month,
        });
    }, [params]);

    const onFinish = values => {
        const searchParams = {
            ...values,
            month: values.month ? values.month.format('YYYY-MM') : undefined,
        };
        handleSearch && handleSearch(searchParams);
    };

    const myhandleFormReset = () => {
        form.resetFields();
        handleFormReset && handleFormReset();
    };

    return (
        <div className={styles.searchFormContainer}>
            <Form
                form={form}
                onFinish={onFinish}
                layout="vertical"
                className={styles.searchForm}
            >
                <Row gutter={16}>
                    <Col span={6}>
                        <Form.Item
                            name="name"
                            label="姓名"
                        >
                            <Input
                                placeholder="请输入姓名"
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="phone"
                            label="电话"
                        >
                            <Input
                                placeholder="请输入电话"
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="month"
                            label="月份"
                        >
                            <DatePicker
                                placeholder="请选择月份"
                                picker="month"
                                style={{ width: '100%' }}
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label=" " colon={false}>
                            <Space size="middle">
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    icon={<SearchOutlined />}
                                    className={styles.searchButton}
                                >
                                    查询
                                </Button>
                                <Button
                                    onClick={myhandleFormReset}
                                    icon={<ClearOutlined />}
                                    className={styles.resetButton}
                                >
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    );

};

export default SalaryDataRenderSimpleForm;
