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';

const decoration_status = [[0, "Pending"], [1, "Approved"], [2, "Rejected"]]

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';
import { timestampToTime } from '@/utils/time';
import { values } from 'lodash';

const module="CommunityService"
const RenovationDetail = (props:any) => {

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

  useEffect(()=>{
    if (DataSaveDetail != null) {
      console.log("给予的请求页面");

        console.log(DataSaveDetail)
      }
  },[DataSaveDetail])
  useEffect(()=>{
    if (DataSave != null) {
        console.log("初始化页面参数")
        console.log(DataSave);
        RA(37,{id:DataSave.id},module,dispatch)
        // applyfor_name: "jack-小白白"
        // communityId: "7e5c6fd2f4ba497a90e64535df6e9088"
        // community_build_decorate: "01"
        // community_floor_decorate: "00"
        // community_name: "A4"
        // community_room_decoate: "767"
        // contact_name: "15626274096"
        // contact_phone: "jack-小白白"
        // create_time: {date: 10, day: 4, hours: 19, minutes: 39, month: 8, …}
        // decorationBegin_time: {date: 10, day: 4, hours: 0, minutes: 0, month: 8, …}
        // decorationEnd_time: {date: 10, day: 4, hours: 0, minutes: 0, month: 8, …}
        // decoration_content: "滚滚滚"
        // decoration_status: 0
        // deleted: 0
        // id: "977591272158003200"
        // ownerId: "c4da40676d044487b37e7a1bdc6dd045"
        // update_time:
    }
  }, [DataSave])

  const onFinish = (values:any) => {

    var tmp={
      communityId :  DataSave.communityId,
      id:DataSave.id,
      ownerId:DataSave.ownerId,
      decorationStatus:values.decorationStatus,
      replyName:getCookie("name"),
      replyPhone:getCookie("phone"),
      replyView:values.replyView,
      type:"6"
    }
    console.log(tmp)

    RA(33,tmp,module,dispatch);
    message.success('Success Operation!');
    history.push('/CommercialService/RenovationApplication')
  }
  return (
    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>
      {
      DataSave!=null?<>
      <TitleBack sublist={['Status : ' + decoration_status[DataSave.decoration_status][1], 'Time : ' + timestampToTime(DataSave.create_time.time)]} title={"Renovation Detail"}></TitleBack>

      <Row gutter={8}>
            <Col>Community:</Col>
            <Col span={3}>{DataSave.community_name}</Col>
            <Col>unit:</Col>
            <Col>{DataSave.community_build_decorate}#{DataSave.community_floor_decorate}-{DataSave.community_room_decoate}</Col>
          </Row>

          <Row gutter={8} style={{marginTop:16}}>
            <Col>Address:</Col>
            <Col>{DataSaveDetail!=null?DataSaveDetail.data.rows.communityDetail.residentialAddress+" "+DataSaveDetail.data.rows.communityDetail.residentialZipCode:null}</Col>
          </Row>

          <Row gutter={8} style={{marginTop:16}}>
            <Col>Owner Name:</Col>
            <Col span={3}>{DataSave.applyfor_name}</Col>
            <Col>Phone:</Col>
            <Col>13169646231</Col>
          </Row>
          <Line></Line>
          <Row gutter={8} style={{marginTop:16}}>
            <Col span={3}>Contract Name:</Col>
            <Col span={3}>{DataSave.contact_name}</Col>
            <Col>Phone:</Col>
            <Col>{DataSave.contact_phone}</Col>
          </Row>
          <Row gutter={8} style={{marginTop:16}}>
             <Col span={3}>Time:</Col>
            <Col span={3}>{timestampToTime(DataSave.decorationBegin_time.time)}</Col>
            <Col>{timestampToTime(DataSave.decorationEnd_time.time)}</Col>
          </Row>
          <Row gutter={8} style={{marginTop:16}}>
            <Col span={3}>Reason:</Col>
            <Col><TextArea disabled value={DataSave.decoration_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}>Approval For Application:</Col>
              <Col ><Form.Item name="decorationStatus"><Radio.Group ><Radio.Button  value={"1"}>Agree</Radio.Button > <Radio.Button style={{marginLeft:10}} value={"2"}>Reject</Radio.Button ></Radio.Group></Form.Item></Col>
            </Row>

          <Row gutter={8} style={{marginTop:16}}>
            <Col span={3}>Reply:</Col>
            <Col><Form.Item name="replyView"><TextArea style={{width:300,height:100,padding:8}}></TextArea></Form.Item></Col>
          </Row>
            <Form.Item ><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
          </Form>


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

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