import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import NormalSelect from '../../../components/Form/NormalSelect';
import dayjs from 'dayjs';
const { RangePicker } = DatePicker;

const ToolBar = ({ setToolVal }) => {
 
  const [form] = Form.useForm();

  const onFinish = (values) => {
    if (values.operTime) {
      values.stm = values.operTime[0] ? dayjs(values.operTime[0]).format('YYYY-MM-DD') : "";
      values.etm = values.operTime[1] ? dayjs(values.operTime[1]).format('YYYY-MM-DD') : "";
      delete values.operTime
    }
    setToolVal(values);
  }

  useEffect(() => {
    const defaultValue = [
      dayjs().subtract(10, 'days'),
      dayjs().subtract(1,'days')
    ]
    form.setFieldsValue({ operTime: defaultValue })
    setToolVal({stm:defaultValue[0].format('YYYY-MM-DD'), etm:defaultValue[1].format('YYYY-MM-DD')})
  }, []);

  return (
    <div className='pageToolBar'>
    <Form form={form} onFinish={onFinish} size='Default' layout="inline">
      <Form.Item label="监测时间" name="operTime">
      <RangePicker
          placeholder={['开始日期', '结束日期']}
          format='YYYY-MM-DD'
           style={{ width: 300 }}
        />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" size='Default'>查询</Button>
      </Form.Item>
      <Form.Item>
        <Button size='Default' onClick={()=>form.resetFields()}>重置</Button>
      </Form.Item>
    </Form>

    </div>
  );
}

export default ToolBar;