import React, { useState, useEffect,useRef } from 'react';

import { Input ,Tabs,Form,InputNumber,Col,Button, Row, message} from 'antd';
const { TabPane } = Tabs;

import {connect} from 'umi';

const layout = {
  labelCol: { span: 2},
  // wrapperCol: { span: 8 },
};

import { RA, ResultClear } from '@/utils/method';

const module = "CellList"

import FileUpload from '@/components/FileUpload/FileUpload'
import TitleBack from '@/components/TitleBack/TitleBack'
import Line from '@/components/Line/Line';
import { validateMessages } from '@/utils/params';

const Add = (props:any) => {

  const { dispatch, Result } = props;

  const formRef =useRef(null)
  const onFinish = (values:any) => {
    console.log(values);
    RA(29,values, module, dispatch);
  }
  const [extend,setExtend]=useState("")
  useEffect(() => {
    var obj = {
      "zipcode":"510000",
      "residentialName":"T1",
      "residentialAddress":"广州市黄埔区开创大道",    
      "residentialPhone":"020-83645790",
      "residentialEmail":"T1community@163.com",
      "residentialManagerUserName":"刘庆华",
      "residentialHotlineName": "T1服务",
      "residentialHotline":"020-83645790",
      "balouscheduleFile":["导图1.pdf"],
      "serviceGuideFile":["导图1.pdf"],
      "lifeServiceFile":["导图1.pdf"]
    }
    // formRef.current.setFieldsValue(obj)
  }, [])
  
  useEffect(() => {
    if (Result != null) {
      console.log("页面结果")
      console.log(Result)
      if (Result.error_code == undefined) {
        console.log("服务器有问题")
        message.error("服务器有问题，请求失败",5)
      }
      if (Result.error_code == "0000") {
       
        history.go(-1)
      }
      ResultClear(module,dispatch)
    }
  }, [Result])

  const onBillChange = (values: any, allValues: any) => {
    if (values["residentialName"] != null) {  
      var tmp= values["residentialName"] 
      console.log(tmp.length)
      setExtend(tmp)
    }
  }

  return (
    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}> 
      
      <TitleBack title="Add Commnunity Infomation" ></TitleBack>

      <Form ref={formRef} {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}  onValuesChange={onBillChange}>

      <Form.Item name={"residentialName"}    label="Community" rules={[{required:true}]}><Input style={{width:200}}  /></Form.Item>       
      <Form.Item name={"zipcode"} label="Postcode" rules={[{required:true}]}><Input style={{width: 200 }} /></Form.Item>
      <Form.Item name={"residentialAddress"} label="Address" rules={[{required:true}]}><Input style={{width: 300}}  /></Form.Item>

      <Form.Item label="Contact Information" style={{marginBottom:0}}> 
          <Form.Item style={{ display: 'inline-block', width: '200' }} name={"residentialPhone"}  rules={[{required:true}]}><Input placeholder="Contact Number" /></Form.Item>
          <Form.Item style={{ display: 'inline-block', width: '200', marginLeft:20 }} name={"residentialEmail"}  rules={[{required:true}]}><Input placeholder="Contact Email"/></Form.Item>
      </Form.Item>   

      <Form.Item name={"residentialManagerUserName"} label="Community Manager" rules={[{required:true}]}><Input style={{width:200}}  /></Form.Item>

        <Line />
        <Form.Item label="Help center" style={{ marginBottom: 0 }}> 
            <Form.Item style={{ display: 'inline-block', width: '200' }} name={"residentialHotlineName"}  rules={[]}><Input placeholder="Name Of Hotline"/></Form.Item>
            <Form.Item style={{ display: 'inline-block', width: '200', marginLeft:20 }} name={"residentialHotline"}      rules={[]}><Input placeholder="Hotline"/></Form.Item>            
        </Form.Item>  
        <Line />
        {
          extend.length>0 ?
            <>
              <Form.Item  wrapperCol={{ ...layout.wrapperCol, offset: 2 }} style={{marginBottom:0}}> 
                <Form.Item style={{ display: 'inline-block', width: '200' }}                  name={"balouscheduleFile"} ><FileUpload title="Bus Timetable" url={"/tos/image/upload"} data={{ imageType: "tosCreateCommunity", extends: extend }} reg="name" /></Form.Item>
                <Form.Item style={{ display: 'inline-block', width: '200', marginLeft:100 }} name={"serviceGuideFile"}><FileUpload title="Service Guide" url={"/tos/image/upload"} data={{ imageType: "tosCreateCommunity", extends: extend }} reg="name" /></Form.Item>
                <Form.Item style={{ display: 'inline-block', width: '200', marginLeft:100 }} name={"lifeServiceFile"}><FileUpload title="Life Service" url={"/tos/image/upload"} data={{ imageType: "tosCreateCommunity", extends:extend }} reg="name" /></Form.Item>
              </Form.Item>     
            </> : null
        }
                
        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 2 }}><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)(Add);