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

const module = 'CommunityService';
const RenovationDetail = (props: any) => {
  const { dispatch, DataSaveDetail, location } = props;
  const formRef = useRef(null);
  const [loading, setLoading] = useState(false);
  const [listData, setListData] = useState(null) as any;
  const [onwerDetail, setOnwerDetail] = useState(null) as any;

  useEffect(() => {
    // 发起请求拿取数据
    if (location.query.id) {
      setLoading(true);
      RA(37, { ...location.query }, module, dispatch);
    } else {
      history.go(-1);
    }

    return () => {
      Clear(module + '/DataSaveDetailClear', dispatch);
    };
  }, []);

  useEffect(() => {
    if (DataSaveDetail) {
      setListData(DataSaveDetail.data.rows.list[0]);
      setOnwerDetail(DataSaveDetail.data.rows.onwerDetail);
      setLoading(false);
    }
  }, [DataSaveDetail]);

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

    var tmp = {
      communityId: listData.communityId,
      id: listData.id,
      ownerId: listData.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' }}>
        {listData !== null && onwerDetail !== null ? (
          <>
            <TitleBack
              sublist={[
                'Status : ' + decoration_status[listData.decorationStatus][1],
                'Time : ' + timestampToTime(listData.createTime.time),
              ]}
              title={listData.decorationStatus === 0 ? 'Renovation Reply' : 'Renovation Detail'}
            ></TitleBack>

            <Row gutter={8}>
              <Col>Community:</Col>
              <Col span={3}>{onwerDetail.communityName}</Col>
              <Col>Unit:</Col>
              <Col>
                {onwerDetail.buildingNumber} #{onwerDetail.floorNumber}-{onwerDetail.roomNumber}
              </Col>
            </Row>

            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>Address:</Col>
              <Col>{onwerDetail.addressAndpostalCode}</Col>
            </Row>

            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>Owner Name:</Col>
              <Col span={3}>{onwerDetail.owerName}</Col>
              <Col>Phone:</Col>
              <Col>{onwerDetail.owerPhone}</Col>
            </Row>

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

            {listData.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}>Replyer:</Col>
                  <Col span={3}>{listData.replyName}</Col>
                  <Col span={3}>Contact: </Col>
                  <Col>{listData.replyPhone}</Col>
                </Row>

                <Row gutter={8} style={{ marginTop: 16 }}>
                  <Col span={3}>Approval For Application:</Col>
                  <Col>
                    <Radio.Group value={listData.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={listData.replyView}
                    ></TextArea>
                  </Col>
                </Row>
              </>
            )}
          </>
        ) : null}
      </div>
    </Spin>
  );
};

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