import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker, InputNumber, message } from 'antd';
import NormalSelect from '../../components/Form/NormalSelect';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, setType, save, form1,setPredictRainfalling }) => {
  const navigate = useNavigate();
  const types = [
    // {
    //   label: "黄家湾水库",
    //   value: "hjw"
    // },
    {
      label: "车桥水库",
      value: "cq"
    },
    {
      label: "三星寺水库",
      value: "sxs"
    },
    {
      label: "石子岭水库",
      value: "szl"
    },
    {
      label: "乌盆冲",
      value: "wpc"
    },
  ]

  const timeType = [
    {
      label: "1h",
      value: 1
    },
    {
      label: "3h",
      value: 3
    },
    {
      label: "6h",
      value: 6
    },
    {
      label: "12h",
      value: 12
    },
    {
      label: "24h",
      value: 24
    }
  ]

  const [form] = Form.useForm();

  const onFinish = (values) => {
    let dateTimeRangeSo;
    if (values.tm) {
      dateTimeRangeSo = {
        // start: moment(values.tm[0]).format('YYYY-MM-DD HH:00:00'),
        end: moment(values.tm).format('YYYY-MM-DD HH:00:00')
      }
    } else {
      message.error('请选择时间范围')
    }
    delete values.tm
    setSearchVal({...values,etm: dateTimeRangeSo.end});
  }
  const disabledFutureDate = (current) => {
    const maxDate = moment('2025-02-28');
    return current && (current > maxDate);
  };

  const onValuesChange = (val, r) => {
    if ('time' in val) {
      setSearchVal({ ...r, time: val.time, etm: moment(r.tm).format("YYYY-MM-DD HH:mm:ss") })
      setPredictRainfalling({})
    }
  }

  const jump = () => {
    navigate('/');
  }
  useEffect(() => {
    const stm = moment('2024-01-01').format('YYYY-MM-DD 00:00:00')
    const etm = moment('2024-07-28 11:00:00').format('YYYY-MM-DD HH:00:00')
    const params = {
      code: "cq",
      time: 6,
      predictRain:11,
      // stm,
      etm
    }
    form.setFieldValue('code', params.code);
    form.setFieldValue('tm',moment('2024-07-28 11:00:00'));
    form.setFieldValue('time', params.time);
    form.setFieldValue('predictRain', params.predictRain);
    setSearchVal(params)
   
  }, [])


  return (
    <>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
          <Form.Item label="水库" name="code">
            <NormalSelect allowClear={false} style={{ width: '150px' }} options={types} />
          </Form.Item>
          <Form.Item label="预测时段" name="time">
            <NormalSelect allowClear={false} style={{ width: '150px' }} options={timeType} /> 
          </Form.Item>
          {/* <Form.Item label="预测降雨量" name="predictRain">
            <InputNumber  min={0} style={{ width: '150px' }}/>
          </Form.Item> */}
          <Form.Item label="时间" name="tm"
          >
            <DatePicker
              showTime
              disabledDate={disabledFutureDate}
              style={{ width: "250px" }}
              format="YYYY-MM-DD HH:00:00"
              allowClear={false}
            />
          </Form.Item>
          
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={jump}>时段预测</Button>
          </Form.Item>
        </Form>
      </div>
    </>
  );
}

export default ToolBar;