import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Radio ,Popconfirm } from 'antd';
import { DeleteOutlined,VideoCameraOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
  const [form] = Form.useForm();
  const onfinish = (values) => {
    const userId =  localStorage.getItem('userId')
    values.userId = userId
    if (mode === 'edit') {
      onEdit(apiurl.rcgl.wxyh.edit,{...record,...values})
    }
    if (mode === 'save') {
      onSave(apiurl.rcgl.wxyh.save,values)
    }
  }

 
 
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
      <Row>
      <Col span={12}>
            <Form.Item
              label="规则名称"
              name="ruleName"
              rules={[{ required: true }]}
            >
              <Input style={{ width: '100%' }} allowClear disabled={mode === 'view'} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="预警等级"
              name="warningLevel"
              rules={[{ required: true }]}
            >
              <NormalSelect
                options={[
                  { label: '蓝色', value: 0 },
                  { label: '黄色', value: 1 },
                  { label: '橙色', value: 2 },
                  { label: '红色', value: 3 }
                ]}
                allowClear={true}
                style={{ width: '100%' }}
                disabled={mode === 'view'}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="启用状态"
              name="status"
              rules={[{ required: true }]}
            >
              <Radio.Group disabled={mode === 'view'}>
                <Radio value={0}>未启用</Radio>
                <Radio value={1}>启用</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="规则配置"
              required
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Row gutter={16}>
                <Col span={8}>
                  <Form.Item name="durationHours" rules={[{ required: true }]} noStyle>
                    <NormalSelect
                      allowClear
                      style={{ width: '100%' }}
                      disabled={mode === 'view'}
                      placeholder="请选择对象"
                      options={[
                        { label: '未来1h水库预报水位', value: 1 },
                        { label: '未来3h水库预报水位', value: 3 },
                        { label: '未来6h水库预报水位', value: 6 },
                        { label: '未来12h水库预报水位', value: 12 },
                        { label: '未来24h水库预报水位', value: 24 },
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name="operator" rules={[{ required: true }]} noStyle>
                    <NormalSelect
                      allowClear
                      style={{ width: '100%' }}
                      disabled={mode === 'view'}
                      placeholder="请选择关系"
                      options={[
                        { label: '>', value: '>' },
                        { label: '≥', value: '>=' },
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item name="type" rules={[{ required: true }]} noStyle>
                    <NormalSelect
                      allowClear
                      style={{ width: '100%' }}
                      disabled={mode === 'view'}
                      placeholder="请选择阈值"
                      options={[
                        { label: '汛限水位(109.00m)', value: 0 },
                        { label: '设计洪水位(111.89m)', value: 1 },
                        { label: '校核洪水位(113.06m)', value: 2 },
                      ]}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form.Item>
          </Col>
        </Row>
       
        {
        mode==='view'?null:(
          <>
          <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
      </Form>
    </>
  );
}

export default ModalForm;