import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import FileUpload from '../../../components/fileUpload';
import NormalSelect from '../../../components/Form/NormalSelect';

import "./index.less"
import moment from 'moment';
const { RangePicker } = DatePicker
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"

const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
  const types = [
    {
      label: "技术难题",
      value: 0
    },
    {
      label: "安全事故",
      value: 1
    },{
      label: "质量问题",
      value: 2
    },
  ]
  const [form] = Form.useForm();
  const [fileIds, setFileIds] = useState()
  const onfinish = (values) => {
    values.eventsDate = values.eventsDate?moment(values.eventsDate).format("YYYY-MM-DD 00:00:00"):''
    if (mode === 'edit') {
      values.files = fileIds;
      values.id = record.id;
      onEdit(apiurl.rcgl.gcdsj.edit,values)
    }
    if (mode === 'save') {
      values.files = fileIds
      onSave(apiurl.rcgl.gcdsj.save,values)
    }
  }
 
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
      <Row>
          <Col span={12}>
              <Form.Item
                label="项目名称"
                name="name"
                rules={[{ required: true }]}
              >
                <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="方案名称"
                name="name"
                rules={[{ required: true }]}
              >
                <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
        
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label="过程名称"
              name="adress"
              rules={[{ required: true }]}
              >
                <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="完成情况（%）"
                name="name"
              >
                <InputNumber min={0} max={100} disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col> 
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label="问题类型"
              name="type"
              >
               <NormalSelect
                allowClear
                disabled={mode==='view'}
                style={{ width: "100%" }}
                options={types}
               />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="问题发生时间"
                name="eventsDate"
                getValueFromEvent={(e,dateString) => dateString}
                getValueProps={(value) => {
                  return {
                    value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined
                  };
                }}
              >
                <RangePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col> 
      </Row>

      <Row>
          <Col span={24}>
              <Form.Item
                label="问题描述"
                name="eventsDesc"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
              >
                <Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
              
     
      <Row>
          <Col span={24}>
              <Form.Item
                label="附件"
                name="fieldId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
              <FileUpload
                mode={mode}
                files={record?.files}
                setFileIds={setFileIds}
              />
              </Form.Item>
          </Col>
        </Row>
        {
        mode==='view'?null:(
          <>
          <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
      </Form>
   
    </>
  );
}

export default ModalForm;