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

import {connect,history} from 'umi';


import { RA } from '@/utils/method';
import TitleBack from '@/components/TitleBack/TitleBack';
const module="CellList"
const Detail = (props:any) => {

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

  useEffect(()=>{
    if (DataSave != null) {
      console.log("初始化页面参数")      
      console.log(DataSave);
/*       
      balouscheduleUrl: "Shelf_life_service.pdf"
      cdkCode: 154952
      cdkStatus: "0"
      communityName: ""
      count: 0
      createTime: {date: 10, day: 4, hours: 22, minutes: 36, month: 8, …}
      deleted: 0
      description: ""
      enable: 0
      extend: ""
      id: "a71a67d8ba0a43c0a46e73bf166d3484"
      lifeServiceUrl: "小课堂课程表2020.08.07.pdf"
      residentialAddress: "Tianhe"
      residentialEmail: "sales@huahui.com"
      residentialEndWorking: null
      residentialFeeMethod: 0
      residentialHotline: "2222-8888"
      residentialHotlineName: "2222-8888"
      residentialHotlineServieEndTime: null
      residentialHotlineServieStartTime: null
      residentialManagerUserName: "张主任"
      residentialName: "ZERO Community"
      residentialPhone: "2222-8888"
      residentialStartWorking: null
      residentialZipCode: "589647"
      serviceGuideUrl: "propertyServiceGuide.pdf"
      serviceProviderId: ""
      serviceProviderName: ""
      updateTime: */
    }
  }, [])
  

  // 小区名称，
  // 详细地址，
  // 工作时间 休息时间
  // 小区联系电话 小区邮箱
  // 小区管理员
  // 物业费
  // 楼巴时刻表 物业办事指南 保质期服务
  // 帮助中心
  // 临时到访码下载

  return (
    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>       
      {
        DataSave != null ?
          <>
            <TitleBack title="Community Detail"></TitleBack>
            <Row gutter={8}>
              <Col span={3}>小区名称:</Col>
              <Col>{DataSave.residentialName}</Col>
            </Row>

            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>详细地址:</Col>
              <Col>{DataSave.residentialAddress}</Col>
            </Row>

            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>小区联系电话:</Col>
              <Col span={3}>{DataSave.residentialPhone}</Col>
              <Col>小区邮箱:</Col>
              <Col>{DataSave.residentialEmail}</Col>
            </Row>

            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>小区管理员:</Col>
              <Col>{DataSave.residentialManagerUserName}</Col>
            </Row>
            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>物业费:</Col>
              <Col>{DataSave.residentialAddress}</Col>
            </Row>
            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>楼巴时刻表:</Col>
              <Col span={3}><a>{DataSave.balouscheduleUrl}</a></Col>
              <Col>物业办事指南:</Col>
              <Col span={3}><a>{DataSave.serviceGuideUrl}</a></Col>
              <Col>保质期服务:</Col>
              <Col span={3}><a>{DataSave.lifeServiceUrl}</a></Col>
            </Row>     
            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>帮助中心:</Col>
              <Col>{DataSave.residentialHotline}</Col>
              <Col>{DataSave.residentialHotlineName}</Col>
            </Row> 
            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>临时到访码:</Col>
              <Col>{DataSave.residentialZipCode}</Col>
            </Row> 

            
          </> : null
      }
    </div>
  );
};

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