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 types = [
    // { label: '其它', value: 0 },
    { label: '新增', value: 1 },
    { label: '修改', value: 2 },
    { label: '删除', value: 3 },
    { label: '授权', value: 4 },
    { label: '导出', value: 5 },
    { label: '导入', value: 6 },
    { label: '强退', value: 7 },
    { label: '生成代码', value: 8 },
    { label: '清空数据', value: 9 },
  ];

  const Stypes = [
    { label: '正常', value: 0 },
    { label: '异常', value: 1 },
  ];
  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;