import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Button, Form, Radio, message, Spin } from 'antd';

import { connect, history } from 'umi';

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

import { RA, getCookie, DataSaveDetailClear } 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';
let DataSave: any = null;
const RenovationDetail = (props: any) => {
  const { dispatch, DataSaveDetail, location, DataSave } = props;
  const formRef = useRef(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!DataSave) {
      history.go(-1);
    }
    console.log(DataSave);
  }, []);

  const onFinish = (values: any) => {
    if (
      values.decorationStatus === '2' &&
      (values.replyView == undefined || values.replyView.trim() === '')
    ) {
      message.warning('Replies must be entered!');
      return;
    }

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

    RA(33, tmp, module, dispatch);
    setLoading(true);
  };

  return (
    <Spin size="large" spinning={loading}>
      <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
        {DataSave != null ? (
          <>
            <TitleBack
              sublist={[
                'Status : ' + decoration_status[DataSave.decorationStatus][1],
                'Time : ' + timestampToTime(DataSave.createTime.time),
              ]}
              title={DataSave.decorationStatus === 0 ? 'Renovation Reply' : 'Renovation Detail'}
            ></TitleBack>

            <Row gutter={8}>
              <Col>Community:</Col>
              <Col span={3}>{DataSave.communityName}</Col>
              <Col>Unit:</Col>
              <Col>
                {DataSave.communityBuildDecorate}#{DataSave.communityFloorDecorate}-
                {DataSave.communityRoomDecoate}
              </Col>
            </Row>

            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>Address:</Col>
              <Col>{DataSave.tosCommunityModel.residentialAddress}</Col>
            </Row>

            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>Owner Name:</Col>
              <Col span={3}>{DataSave.applyforName}</Col>
              <Col>Phone:</Col>
              <Col>{DataSave.contactPhone}</Col>
            </Row>

            <Line></Line>
            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col span={3}>Contract Name:</Col>
              <Col span={3}>{DataSave.contactName}</Col>
              <Col span={3}>Phone:</Col>
              <Col>{DataSave.contactPhone}</Col>
            </Row>
            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col span={3}>Time:</Col>
              <Col span={3}>{timestampToTime(DataSave.decorationBeginTime)}</Col>
              <Col>{timestampToTime(DataSave.decorationEndTime)}</Col>
            </Row>
            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col span={3}>Reason:</Col>
              <Col>
                <TextArea
                  autoSize
                  disabled
                  value={DataSave.decorationContent}
                  style={{ width: 300, minHeight: 100, padding: 8, resize: 'none' }}
                ></TextArea>
              </Col>
            </Row>
            <Line></Line>

            {DataSave.decorationStatus === '0' ? (
              <>
                <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"
                        rules={[{ required: true, message: 'You have to choose an outcome!' }]}
                      >
                        <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>
              </>
            ) : (
              <>
                <Row>
                  <Col span={3}>replier:</Col>
                  <Col span={3}>{DataSave.replyName}</Col>
                  <Col span={3}>Phone: </Col>
                  <Col>{DataSave.replyPhone}</Col>
                </Row>

                <Row gutter={8} style={{ marginTop: 16 }}>
                  <Col span={3}>Approval For Application:</Col>
                  <Col>
                    <Radio.Group value={DataSave.decorationStatus}>
                      <Radio.Button value={'1'}>Agree</Radio.Button>{' '}
                      <Radio.Button style={{ marginLeft: 10 }} value={'2'}>
                        Reject
                      </Radio.Button>
                    </Radio.Group>
                  </Col>
                </Row>

                <Row gutter={8} style={{ marginTop: 16 }}>
                  <Col span={3}>Reply:</Col>
                  <Col>
                    <TextArea
                      style={{ width: 300, minHeight: 100, padding: 8, resize: 'none' }}
                      disabled
                      value={DataSave.replyView}
                    ></TextArea>
                  </Col>
                </Row>
              </>
            )}
          </>
        ) : null}
      </div>
    </Spin>
  );
};

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