import React, { useState } from 'react';
import { Button, Form, Input, Modal, Select, DatePicker } from 'antd';
const { TextArea } = Input;
import { connect } from 'react-redux';
import Uploads from '$components/Uploads';
import { useEffect } from 'react';
import moment from 'moment';

const ProjectAddModel = ({ dispatch, actions, user, modelData, close, success, qrCodeId }) => {

   const { projectRegime } = actions
   const [form] = Form.useForm();

   useEffect(() => {
      // console.log(modelData);

   }, [])


   return (
      <Modal
         title={modelData.id ? '编辑点位' : '新增点位'}
         width={570}
         open={true}
         onOk={() => {
            form.validateFields().then(r => {
               dispatch(projectRegime.addPosition({
                  ...r,
                  id: modelData?.id,
                  projectId: qrCodeId
               })).then(res => {
                  if (res.success) {
                     success()
                  }
               })
            })
         }}
         onCancel={() => {
            close()
         }}
      >
         <Form
            style={{}}
            form={form}
            labelAlign='right'
            labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}
            onFinish={r => {

            }}
         >
            <Form.Item label='点位名称' name="name" style={{}}
               initialValue={modelData?.name}
               rules={[{ required: true, message: '请输入点位名称' },]}
            >
               <Input placeholder="请输入点位名称" allowClear />
            </Form.Item>
            <div style={{}}>
               {/* /^\d+$|^\d*\.\d+$/g */}
               <Form.Item label="所在地区:" labelCol={{ span: 11 }} labelAlign='right' name="longitude" initialValue={modelData?.longitude} style={{ display: 'inline-block', width: 'calc(60% - 30px)', }}
                  rules={[{ required: true, message: '', },{
                     validator: (rule, value, callback) => {
                        const sjh = /^\d+$|^\d*\.\d+$/g;
                        if (value) {                                                                                                                                                   
                           let valid = sjh.test(value);
                           if (!valid) {
                              return callback([new Error("横坐标填写错误")]);
                           }
                           callback();
                        }
                        return callback([new Error("请输入横坐标")]);
                     }
                  }]}
               >
                  <Input placeholder="经度支持数字" />
               </Form.Item>
               ~
               <Form.Item name="latitude" initialValue={modelData?.latitude} style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
                  rules={[{ required: true, message: '', },{
                     validator: (rule, value, callback) => {
                        const sjh = /^\d+$|^\d*\.\d+$/g;
                        if (value) {                                                                                                                                                   
                           let valid = sjh.test(value);
                           if (!valid) {
                              return callback([new Error("纵坐标填写错误")]);
                           }
                           callback();
                        }
                        return callback([new Error("请输入纵坐标")]);
                     }
                  }]}
               >
                  <Input placeholder="维度支持数字" />
               </Form.Item>
            </div>
            <Form.Item name='describe' label="描述"
               initialValue={modelData?.describe}
               rules={[{ required: true, message: '请输入描述内容', },]}>
               <TextArea />
            </Form.Item>
         </Form>
      </Modal>

   );
};


function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      actions: global.actions,
   };
}

export default connect(mapStateToProps)(ProjectAddModel);