import React,{useEffect,useState,useRef} from 'react';
import { Form, Button, Input, Row, Col} from 'antd';
import { formItemLayout, btnItemLayout } from '../../../../../components/crud/FormLayoutProps';
import apiurl from '../../../../../service/apiurl';
const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
  const [form] = Form.useForm();
  const onFinish = async (values) => {
    values.resCode = "42120250085"
    values.id = record?.id
    if (mode === 'edit') {
      const params = {
        ...record,
        q: Number(values?.q),
        z: Number(values?.z),
      }
      onEdit(apiurl.dataResourcesCenter.projectAndWater.xl.update,params)
    }
    if (mode === 'save') {
      onSave(apiurl.dataResourcesCenter.projectAndWater.xl.save,values)
    }
  }
  
  return (
    <>
      <Form
        form={form}
        // {...formItemLayout}
        onFinish={onFinish}
        initialValues={record}
        // labelCol={{ span: 1 }}
        //  wrapperCol={{ span: 15 }}
      >
      <Row>
          <Col span={24}>
              <Form.Item
                label="水位(m)"
                name="q"
                labelCol={{ span: 4, offset: 0 }}
                wrapperCol={{span:20,offset:0}}
                rules={[{ required: true }]}
              >
              <Input
                style={{ width: '100%' }}
                allowClear
              />
              </Form.Item>
          </Col>
      </Row>

      <Row>
          <Col span={24}>
              <Form.Item
                label="流量(m³/s)"
                name="z"
                labelCol={{ span: 4, offset: 0 }}
                wrapperCol={{ span: 20, offset: 0 }}
                rules={[{ required: true }]}
              >
               <Input
                style={{ width: '100%' }}
                allowClear
              />
              </Form.Item>
          </Col> 
      </Row>
      {
        mode==='view'?null:(
          <>
          <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
      </Form>
    </>
  );
}

export default ModalForm;