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

const FormItem = Form.Item; 
const StaffInfoRenderSimpleForm = (props) => {
    const [form] = Form.useForm();
    const [startDateOpen, setStartDateOpen] = useState(false);
    const [endDateOpen, setEndDateOpen] = useState(false);
    const { submitButtons, handleSearch, handleFormReset, toggleForm, params } = props;
    React.useEffect(() => {
        form.setFieldsValue({
            opername: params?.opername,
            opertype: params?.opertype,
        });
    }, [params]);
    const onFinish = values => {
        const params = {
            ...values,
            startDate: values.startDate ? values.startDate.format('YYYY-MM-DD') : undefined,
            endDate: values.endDate ? values.endDate.format('YYYY-MM-DD') : undefined,
        };
        handleSearch(params);
    };

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

    const onEndDateChange = (value) => {
        const startDate = form.getFieldValue("startDate");
        if (startDate && value && value.isBefore(startDate, "day")) {
            message.error("结束日期不能小于开始日期！");
            // 清空
            form.setFieldsValue({ endDate: undefined });
        }
    }

    return (
        <div >
            <Form
                // ref={(ref) => this.formRef = ref}
                // onFinish={this.handleSearch}
                layout="vertical"
            >
                <Row gutter={12}>
                    <Col span={8}>
                        <Form.Item
                            name="name"
                            label="姓名"
                        >
                            <Input
                                placeholder="请输入姓名"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="phone"
                            label="电话"
                        >
                            <Input
                                placeholder="请输入电话"
                            // prefix={<PhoneOutlined />}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="idCard"
                            label="身份证号"
                        >
                            <Input
                                placeholder="请输入身份证号"
                            // prefix={<IdcardOutlined />}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={8}>
                        <Form.Item
                            name="department"
                            label="部门"
                        >
                            <Select placeholder="请选择部门">
                                <Option value="技术部">技术部</Option>
                                <Option value="产品部">产品部</Option>
                                <Option value="运营部">运营部</Option>
                                <Option value="财务部">财务部</Option>
                                <Option value="人事部">人事部</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="position"
                            label="岗位"
                        >
                            <Select placeholder="请选择岗位">
                                <Option value="高级工程师">高级工程师</Option>
                                <Option value="产品经理">产品经理</Option>
                                <Option value="运营专员">运营专员</Option>
                                <Option value="会计">会计</Option>
                                <Option value="HR专员">HR专员</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label=" " colon={false}>
                            <Space size="middle">
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    icon={<SearchOutlined />}
                                    size="large"
                                    className={styles.searchButton}
                                >
                                    查询
                                </Button>
                                <Button
                                    // onClick={this.handleReset}
                                    icon={<ClearOutlined />}
                                    size="large"
                                    className={styles.resetButton}
                                >
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    );

};

export default StaffInfoRenderSimpleForm;
