import React, { useState, useEffect, useRef } from 'react';
import styles from './UsersAdd.less';
import { Input, Menu, Table, Space, Pagination, Spin, Button, Form, Row, Col, message } from 'antd';

import { Link, useIntl, connect, Dispatch } from 'umi';

import Line from '../../../components/Line/Line';
import TitleBack from '../../../components/TitleBack/TitleBack';
import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptionsCommnity';
import { checkParam, RA } from '../../../utils/method'
import { validateMessages } from '@/utils/params';

import "./UsersAddInput.less"


const module = "User"
const UsersAdd = (props: any) => {

  const { dispatch, communityInfo } = props;

  const [postman, setPostman] = useState({ extend: null })
  const formRef = useRef(null as any);

  const [loading, setLoading] = useState(false)
  const onFinish = (values: any) => {

    if (postman.extend != null) {
      values.communityName = postman.extend
    } else {
      values.communityName = null
    }
    // var tmp = Object.keys(values);
    if (checkParam(values)) {
      values.owerPhone = null
      values.owerEmail = null
      RA(14, values, module, dispatch)
      setLoading(true)
    } else {
      setLoading(false)
      message.error("Error,Please finish it,not empty!", 3)
    }

  }
  const extendName = (values: any) => {
    var tmp = postman
    tmp.extend = values
    RA(32, { communityName: values }, module, dispatch);
    setPostman(tmp)
  }
  useEffect(() => {
    if (communityInfo != null) {
      console.log(communityInfo)
      if (postman.extend != null) {
        formRef.current.setFieldsValue({ addressAndpostalCode: communityInfo.data.rows[0].residentialAddress + " SINGAPORE" + communityInfo.data.rows[0].residentialZipCode })
      }
    }
  }, [communityInfo])

  const checkData = (rule: any, value: any, callback: any) => {
    if (value) {
      if (/^[a-zA-Z0-9]+$/g.test(value)) {
        callback();
      } else {
        callback(new Error('Only numbers and letters can be entered!'));
      }
    }
    callback();
  };
  return (
    <div className={styles.base}>

      {/* 头部组件 */}
      <TitleBack title={"Create New Owner"} />
      <Spin spinning={loading}>
        <Form ref={formRef} name="basic" onFinish={onFinish} validateMessages={validateMessages}>
          <div className={styles.box1}>
            <div className={styles.box1item1}>Owner's Name</div>
            <div className={styles.box1item2}><Form.Item name="owerName" rules={[{ required: true, min: 2, max: 30 }]} ><Input placeholder="Ower Name" /></Form.Item></div>
          </div>

          {/* <div className={styles.box4}>
        <div className={styles.box4item0}>Contact Details</div>
        <div className={styles.box4item1}><Form.Item name="owerPhone" ><Input placeholder="Phone Number" /></Form.Item></div>
        <div className={styles.box4item2}><Form.Item name="owerEmail" ><Input placeholder="Email" /></Form.Item></div>
      </div>  */}

          <div className={styles.box2}>
            <div className={styles.box2item1}>Contact Details</div>
            <div className={styles.box2item2}><SearchOptionsCommnity alone={true} onSubmit={extendName} /></div>
            <div className={styles.box2item3}><Form.Item name="buildingNumber" rules={[{ validator: checkData }]}><Input placeholder="Building" style={{ width: 94 }} /></Form.Item></div>
            <div className={styles.box2item4}>#</div>
            <div className={styles.box2item5}><Form.Item name="floorNumber" rules={[{ validator: checkData }]}><Input placeholder="Floor" style={{ width: 80 }} /></Form.Item></div>
            <div className={styles.box2item6}>——</div>
            <div className={styles.box2item7}><Form.Item name="roomNumber" rules={[{ validator: checkData }]}><Input placeholder="Room" style={{ width: 112 }} /></Form.Item></div>
          </div>

          <div className={styles.box3}>
            <div className={styles.box3item1}>
              <Form.Item name="addressAndpostalCode"><Input style={{ width: 680 }} disabled placeholder="Display the address and postcode automatically according to the" /></Form.Item>
            </div>
          </div>
          <Line />
          <Form.Item ><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
        </Form>
      </Spin>

    </div>
  );
};

function mapStateToProps(state: any) {
  const { DataSave, communityInfo } = state.User;

  return {
    DataSave,
    communityInfo,
  };
}
export default connect(mapStateToProps)(UsersAdd);
// "owerName":"孟浩",
// "owerPhone":"18813787878",
// "owerEmail":"sale@huahuico.com",
// "communityName":"A7",
// "buildingNumber":"A1",
// "floorNumber":"11",
// "roomNumber":"388",
// "addressAndpostalCode":"工业大道3689561"