import React, { useState, useEffect,useRef} from 'react';
import { Input ,Tabs,Table,Space, Button,Form,Row,Col, Layout, message} from 'antd';
const { TabPane } = Tabs;

import {connect,history} from 'umi';


import { RA, ResultClear } from '@/utils/method';
import TitleBack from '@/components/TitleBack/TitleBack';
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import Line from '@/components/Line/Line';
import TextArea from 'antd/lib/input/TextArea';
import Relationship from '@/components/Relationship/Relationship';
const module="CommunityService"
const CardAdd = (props:any) => {

  const { dispatch, Result } = props;
  const formRef = useRef(null)

  useEffect(() => {
    if (Result != null) {
      console.log("初始化页面参数")
      console.log(Result)
 
      if (Result.error_code = "0000") {
        message.success("Operation Success!")
        ResultClear(module, dispatch)
      } else {
        message.error("Operation Fail!")
        ResultClear(module, dispatch)  
        history.go(-1)
      }     
    }
  }, [Result])
  
  useEffect(()=>{
    var param=
    {
    "communityName":"A4",
    "buildNumber":"01",
    "floorNumber":"02",
    "roomNumber":"369",
    "zipCode":"510000",
    "communityOwner":"jack-小雄",
    "communityOwnerPhone":"18813757878",
    "communityOwnerEmail":"sale2huahuico.com",
    "applyName":"小李子",
    "applyNamePhone":"13436989568",
    "applyNameEmail":"xiaoli@huahuico.com",
    "applyRelationOwner":"2",
    "applyReasonContent":"租房",
    "description":"test"
    }
    formRef.current.setFieldsValue(param)
  }, [])
  
  const onFinish = (values:any)=>{
    console.log(values)
    RA(35, values, module, dispatch);
  }
  return (
    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>  
      
      <TitleBack title={"Apply Card"}></TitleBack>

      <Form ref={formRef} name="basic" onFinish={onFinish}>

        
        <Form.Item labelCol={{span:3}} label="Community" style={{marginBottom:0}}>
          <Input.Group compact>
            <Form.Item name="communityName" style={{marginRight:20}} ><SearchOptionsCommnity /></Form.Item>
            <Form.Item name="buildNumber" style={{marginRight:16}} ><Input style={{ width: 80 }} placeholder={"Building"} /></Form.Item>
            <div style={{ lineHeight: 2,marginRight:16}}>#</div>
            <Form.Item name="floorNumber" style={{marginRight:16}} ><Input style={{ width: 80 }} placeholder={"Floor"} /></Form.Item>
            <div style={{lineHeight:2,marginRight:16}}>-</div>
              <Form.Item name="roomNumber" ><Input style={{width:120}} placeholder={"Room"} /></Form.Item>
            </Input.Group>
        </Form.Item>

        
        <Form.Item name="zipCode" wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}><Input style={{ width: 400 }}></Input></Form.Item>
        
        <Form.Item labelCol={{span:3}}  label="Owner Name" style={{marginBottom:-40}}>
          <Input.Group compact>
            <Form.Item name="communityOwner" style={{marginRight:20}} ><Input placeholder={"Name"} /></Form.Item>
            <Form.Item style={{marginRight:20}} label={"Contact Information"} ><Input hidden={true} /></Form.Item>
            <Form.Item name="communityOwnerPhone" style={{marginRight:20}}><Input placeholder={"Phone number"} /></Form.Item>
            <Form.Item name="communityOwnerEmail" ><Input placeholder={"Email"} /></Form.Item>
            </Input.Group>
        </Form.Item>

        <Line></Line>

        <Form.Item labelCol={{span:3}} label="Applicant"  style={{marginBottom:-40}}>
          <Input.Group compact>
            <Form.Item name="applyName" style={{marginRight:20}} ><Input placeholder={"Name"} /></Form.Item>
            <Form.Item style={{marginRight:20}} label={"Contact Information"} ><Input placeholder={"Phone number"} hidden={true} /></Form.Item>
            <Form.Item name="applyNamePhone" style={{marginRight:20}}><Input placeholder={"Phone number"} /></Form.Item>
            <Form.Item name="applyNameEmail" ><Input placeholder={"Email"} /></Form.Item>
            </Input.Group>
        </Form.Item>

    
        {/* label={"Contact Information"} */}
      <Form.Item labelCol={{span:3}} name="applyRelationOwner"  label={"Relationship"} ><Relationship /></Form.Item>
       <Form.Item labelCol={{span:3}}  name="applyReasonContent"  label={"Reason"}><TextArea style={{width:400}}></TextArea></Form.Item>
      <Line></Line>
        <Form.Item wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
      </Form>


    </div>
  );
};

function map(state:any) {
  const { Result} = state[module]
  return { Result}
}
export default connect(map)(CardAdd);