import { useEffect } from 'react'
import {Button, Col, Form, Input, Row, DatePicker} from 'antd'
import {DownOutlined, RedoOutlined, SearchOutlined} from '@ant-design/icons'
import style from '@/global.less'

const { Item: FormItem } = Form

const TimeSheetRenderSimpleForm = (props) => {
    const [form] = Form.useForm()
    const { handleSearch, handleFormReset, toggleForm, params } = props

    useEffect(() => {
        form.setFieldsValue({
            user_name: params?.user_name,
            user_name_cn: params?.user_name_cn,
        })
    }, [params])

    const onFinish = values => {
        handleSearch(values)
    }

    const myHandleFormReset = () => {
        form.resetFields()
        handleFormReset()
    }

    return (
        <Form form={form} onFinish={onFinish} layout='inline'>
            <Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
                <Col md={5} sm={24}>
                    <FormItem label='单位' name='dw' rules={[{ required: true, message: '请输入单位!' }]}>
                        <Input placeholder='请输入' />
                    </FormItem>
                </Col>

                <Col md={5} sm={24}>
                    <FormItem label='部门' name='bm'>
                        <Input placeholder='请输入' />
                    </FormItem>
                </Col>
				
				<Col md={5} sm={24}>
				    <FormItem label='日期' name='rq' rules={[{ required: true, message: '请选择日期!' }]}>
				        <DatePicker format='YYYY/MM/DD' />
				    </FormItem>
				</Col>
				
				<Col md={5} sm={24}>
				    <FormItem label='员工号' name='ygh'>
				        <Input placeholder='请输入' />
				    </FormItem>
				</Col>

                <Col md={4} sm={24}>
                    <div className={style.searchBtn}>
                        <Button type='primary' htmlType='submit'>
                            查询
                        </Button>

                        <Button onClick={myHandleFormReset}>
                            重置
                        </Button>
                    </div>
                </Col>
            </Row>
        </Form>
    )
}

export default TimeSheetRenderSimpleForm
