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

import {connect,history} from 'umi';


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

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

  useEffect(()=>{
    if (DataSaveDetail != null) {
        console.log(DataSaveDetail)
      }
  }, [DataSaveDetail])
  
  useEffect(()=>{
    if (DataSave != null) {
      console.log("初始化页面参数")
      console.log(DataSave);
      RA(36, { id:DataSave.id }, module, dispatch);

/*       apply_name: "jack-小白白"
      apply_reason_content: "H4sIAAAAAAAAAHuyo/fJnlkAljbS9QYAAAA="
      apply_relation_owner: 0
      apply_status: 0
      build_number: "01"
      communityId: "7e5c6fd2f4ba497a90e64535df6e9088"
      community_name: "A4"
      community_owner: "jack-小白白"
      community_owner_email: "3290098379@qq.com"
      create_time: {date: 10, day: 4, hours: 19, minutes: 51, month: 8, …}
      deleted: 0
      floor_number: "00"
      id: "977597589971009536"
      ownerId: "c4da40676d044487b37e7a1bdc6dd045"
      room_number: "767"
      update_time:  */
      
    } else {
      history.go(-1)
    }    
  }, [])
  
  const onFinish = (values:any) => {

    var tmp={
      communityId : DataSave.communityId,
      id:DataSave.id,
      ownerId:DataSave.ownerId,
      applyStatus:values.applyStatus,
      replyContent:values.replyContent,
      type:"7"
    }
    console.log(tmp)
    RA(34,tmp,module,dispatch)
    message.success('Success Operation!');
    history.push('/CommercialService/AccessCardApplication')
  }

  return (
    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>  
      {
        DataSave != null ? <>
        <TitleBack sublist={['Status : ' + "1", 'Time : ' + '12']} title="Apply Card" ></TitleBack>        
          <Row gutter={8}>
            <Col>Community:</Col> 
            <Col span={1}>{DataSave.community_name}</Col>         
            <Col>unit:</Col> 
            <Col>{DataSave.build_number}#{DataSave.floor_number}-{DataSave.room_number}</Col>   
          </Row>

          <Row gutter={8} style={{marginTop:16}}>      
            <Col>Address:</Col> 
            <Col>{DataSave.build_number}#{DataSave.floor_number}-{DataSave.room_number}</Col>   
          </Row>      
          
          <Row gutter={8} style={{marginTop:16}}>
            <Col>Owner Name:</Col> 
            <Col span={3}>{DataSave.community_owner}</Col>         
            <Col>Phone:</Col> 
            <Col>13169646231</Col>   
          </Row>
          <Line></Line>
          <Row gutter={8} style={{marginTop:16}}>
            <Col span={3}>Apply Name:</Col> 
            <Col span={3}>{DataSave.apply_name}</Col>         
            <Col>Phone:</Col> 
            <Col>13169646231</Col>   
          </Row>
          <Row gutter={8} style={{marginTop:16}}>
            <Col span={3}>Relationship:</Col> 
            <Col >{DataSave.apply_relation_owner}</Col>         
          </Row>
          <Row gutter={8} style={{marginTop:16}}>
            <Col span={3}>Reason:</Col> 
            <Col><TextArea disabled value={DataSave.apply_reason_content} style={{width:300,height:100,padding:8}}></TextArea></Col>         
          </Row>          
          <Line></Line>

          <Form ref={formRef} name="basic" onFinish={onFinish}>
            
            <Row gutter={8} style={{marginTop:16}}>
                <Col span={3}>Examine:</Col>              
                <Col span={4}><Form.Item name="applyStatus"><Radio.Group ><Radio.Button  value={"1"}>Agree</Radio.Button ><Radio.Button style={{marginLeft:10}} value={"2"}>Refuse</Radio.Button ></Radio.Group></Form.Item></Col>               
              </Row>
              
            <Row gutter={8} style={{marginTop:16}}>
              <Col span={3}>Reply:</Col> 
              <Col> <Form.Item name="replyContent"><TextArea style={{width:300,height:100,padding:8}}></TextArea></Form.Item></Col>         
            </Row>    
            
            <Row gutter={8} style={{marginTop:16}}>
                <Col span={3}>Received:</Col>              
                <Col span={4}><Form.Item name="applyStatus"><Radio.Group ><Radio  value={"3"}>Agree</Radio></Radio.Group></Form.Item></Col>               
            </Row>            
            <Form.Item ><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
          </Form>
          
        </>:null
      }


    </div>
  );
};

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