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: '请输入横坐标', },]}
               >
                  <Input placeholder="经度支持数字" />
               </Form.Item>
               ~
               <Form.Item name="latitude" initialValue={modelData?.latitude} style={{ display: 'inline-block', width: 'calc(40% + 15px)', }}
                  rules={[{ required: true, message: '请输入纵坐标', },]}
               >
                  <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);