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 } = props;
  const formRef = useRef(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    console.log('初始化页面参数');
    if (location.query.id) {
      setLoading(true);
      RA(37, { id: location.query.id }, module, dispatch);
    } else {
      history.go(-1);
    }
  }, []);

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

  const onFinish = (values: any) => {
    console.log(values);
    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',
    };
    // console.log(tmp)

    RA(33, tmp, module, dispatch);
    message.success('Success Operation!');
    history.push('/CommercialService/RenovationApplication');
  };

  return (
    <Spin size="large" spinning={loading}>
      <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.data.rows.onwerDetail.addressAndpostalCode +
                  ' ' +
                  DataSaveDetail.data.rows.onwerDetail.buildingNumber +
                  '#' +
                  DataSaveDetail.data.rows.onwerDetail.floorNumber +
                  '-' +
                  DataSaveDetail.data.rows.onwerDetail.roomNumber}
              </Col>
            </Row>

            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>Owner Name:</Col>
              <Col span={3}>{DataSave.applyfor_name}</Col>
              <Col>Phone:</Col>
              <Col>{DataSave.applyfor_phone}</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
                  autoSize
                  disabled
                  value={DataSave.decoration_content}
                  style={{ width: 300, minHeight: 100, padding: 8, resize: 'none' }}
                ></TextArea>
              </Col>
            </Row>
            <Line></Line>

            {DataSave.decoration_status === 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.reply_name}</Col>
                  <Col>Phone: </Col>
                  <Col>{DataSave.reply_phone}</Col>
                </Row>

                <Row gutter={8} style={{ marginTop: 16 }}>
                  <Col span={3}>Approval For Application:</Col>
                  <Col>
                    <Radio.Group value={DataSave.decoration_status === 2 ? '1' : '2'}>
                      <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.reply_view}
                    ></TextArea>
                  </Col>
                </Row>
              </>
            )}
          </>
        ) : null}
      </div>
    </Spin>
  );
};

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