import React,{useState,useEffect} from 'react'
import { Row, Col, Form, Input, DatePicker, Button,Upload,message,Modal } from "antd"
import {PaperClipOutlined,DeleteOutlined} from '@ant-design/icons';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { formItemLayout } from '../../../../../components/crud/FormLayoutProps'
import apiurl from '../../../../../service/apiurl';
import { httppost2 } from '../../../../../utils/request';
import moment from 'moment'
import "./index.less"
export default function ProjectBasciInfo() {
    const [form] = Form.useForm();
    const [data, setData] = useState()
    const [skdisabled, setSkDisabled] = useState(true)
    const getData = async () => {
        try {
            const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.detail)
            form.setFieldsValue(res.data[0])
            setData(res.data[0])
        } catch (error) {
            console.log(error);
        }
    }

   

    const onFinish = async (values) => {
        try {
            // const values = form.getFieldsValue();
            const params = {
                ...data,
                ...values,
            }
            const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.update,params)
            if (res.code == 200) {
                message.success("修改成功")
                setSkDisabled(true)
                getData()
            }
        } catch (error) {
            console.log(error);
            
        }
        
    }
    useEffect(() => {
        getData()
    }, [])
    
  return (
    <div className='basic-info-content'>
          <Form
              form={form}
            //   {...formItemLayout}
              onFinish={onFinish}
              labelCol={{ span: 8 }}
              wrapperCol={{span:14}}
          >
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="坝址以上流域面积(km²)"
                          name="watShedArea"
                          rules={[{ required: false}]}
                      >
                          <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="坝顶高程(m)"
                          name="crestElev"
                          labelCol={{ span: 5 }}
                          wrapperCol={{span:14}}
                          rules={[{ required: false}]}
                      >
                          <Input allowClear style={{width:'280px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="最大坝高(m)"
                          name="maxDamHeig"
                          labelCol={{ span: 6 }}
                          wrapperCol={{span:14}}
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="校核洪水位(m)"
                          name="calFloodLev"
                          rules={[{ required: false}]}
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8} >
                      <Form.Item
                          label="总库容(万m³)"
                          name="totCap"
                          labelCol={{ span: 5 }}
                          wrapperCol={{span:14}}
                          rules={[{ required: false}]}
                      >
                          <Input allowClear style={{width:'280px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8} style={{marginLeft:"-105px"}}>
                      <Form.Item
                          label="校核洪水位时最大下泄流量(m³/s)"
                          name="maxCalFloodFlow"
                          labelCol={{ span: 11 }}
                          wrapperCol={{span:13}}
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="设计洪水位(m)"
                          name="desFloodLev"
                          rules={[{ required: false}]}
                      >
                        <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="调洪库容(万m³)"
                          name="storFlCap"
                          labelCol={{ span: 5 }}
                          wrapperCol={{span:14}}
                          rules={[{ required: false}]}
                      >
                          <Input allowClear style={{width:'280px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8} style={{marginLeft:"-125px"}}>
                      <Form.Item
                          label="设计洪水位时最大下泄流量(m³/s)"
                          name="maxDesFloodFlow"
                          labelCol={{ span: 12 }}
                          wrapperCol={{span:12}}
                          rules={[{ required: false}]}
                          
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="防洪高水位(m)"
                          name="uppLevFlco"
                          rules={[{ required: false}]}
                      >
                        <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>    
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="防洪库容(万m³)"
                          name="flcoCap"
                          labelCol={{ span: 5 }}
                          wrapperCol={{span:14}}
                      >
                          <Input allowClear style={{width:'280px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8} style={{marginLeft:"-43px"}}>
                      <Form.Item
                          label="下游河道安全泄量(m³/s)"
                          name="dsSaftFlow"
                          labelCol={{ span: 8 }}
                          wrapperCol={{span:14}}
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="正常蓄水位(m)"
                          name="normWatLev"
                          rules={[{ required: false}]}
                      >
                        <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>    
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                  <Form.Item
                    label="兴利库容(万m³)"
                    name="benResCap"
                    labelCol={{ span: 5 }}
                    wrapperCol={{span:14}}
                   >
                       <Input allowClear style={{width:'280px'}} disabled={skdisabled}/> 
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                  <Form.Item
                    label="汛限水位(m)"
                    name="flLowLimLev"
                    rules={[{ required: false}]}
                    labelCol={{ span: 6 }}
                    wrapperCol={{span:14}}
                   >
                         <Input allowClear style={{width:'300px'}} disabled={skdisabled}/> 
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="死水位(m)"
                          name="deadLev"
                          rules={[{ required: false}]}
                      >
                           <Input allowClear style={{width:'300px'}} disabled={skdisabled}/> 
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="死库容(万m³)"
                          name="deadCap"
                          labelCol={{ span: 5 }}
                          wrapperCol={{span:14}}
                          rules={[{ required: false}]}
                      >
                          <Input allowClear style={{width:'280px'}} disabled={skdisabled}/> 
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="堰顶高程(m)"
                          name="wcrstel"
                          rules={[{ required: false}]}
                          labelCol={{ span: 6 }}
                          wrapperCol={{span:14}}
                      >
                             <Input allowClear style={{width:'300px'}} disabled={skdisabled}/> 
                      </Form.Item>
                  </Col>
              </Row>
              <Row style={{marginTop:80}}>
                  <Col span={24}>
                      <Form.Item
                        wrapperCol={{span:14,offset:10}}
                      >
                          {
                              skdisabled ? <Button type="primary" onClick={() => setSkDisabled(false)}>编辑</Button> :
                                  <div style={{ display: 'flex', columnGap: 20 }}>
                                      <Button onClick={() => setSkDisabled(true)}>取消</Button>
                                      <Button type="primary" htmlType="submit">保存</Button>
                               </div>   
                          }
                          
                      </Form.Item>
                  </Col>
            </Row>
          </Form>
    </div>
  )
}