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

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 * as moment from 'moment';

const module = 'CommunityService';

// const apply_status = [[0, "审核中"], [1, "批准"], [2, "拒绝"], [3, "领取"]]
const apply_status = [
  [0, 'Pending'],
  [1, 'Approval'],
  [2, 'Reject'],
  [3, 'Received'],
];

const apply_relation_owner = ['Oneself', 'Family Members', 'Tenant '];

const CardDetail = (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) {
      setLoading(true);
      // 拿取数据
      RA(36, location.query, module, dispatch);
    } else {
      history.go(-1);
    }

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

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

  const onFinish = (values: any) => {
    if (values.applyStatus === '2' && !values.replyContent) {
      message.error('Replies must be filled in!', 3);
      return;
    }

    const userInfo = localStorage.getItem('userInfo') || '';
    const id = JSON.parse(userInfo).userModel.id;

    let tmp = {
      communityId: listData.communityId,
      id: listData.id,
      ownerId: listData.ownerId,
      replyId: id,
      applyStatus: values.applyStatus,
      replyContent:
        listData.apply_status !== 0 && values.applyStatus === '3'
          ? listData.reply_content
          : values.replyContent,
      type: '7',
    };
    console.log(tmp);
    RA(34, 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 : ' + apply_status[listData.apply_status][1],
                'Time : ' + moment(listData.create_time.time).format('DD-MM-YYYY'),
              ]}
              title="Apply Card Detail"
            ></TitleBack>

            <Row gutter={8}>
              <Col>Community:</Col>
              <Col span={3}>{listData.community_name}</Col>
              <Col>Unit:</Col>
              <Col>
                {listData.build_number + ' #' + listData.floor_number + '-' + listData.room_number}
              </Col>
            </Row>

            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>Address:</Col>
              <Col>{listData.zip_address + ' ' + listData.zip_code}</Col>
            </Row>

            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col>Owner Name:</Col>
              <Col span={3}>{listData.community_owner}</Col>
              <Col>Phone:</Col>
              <Col>{listData.community_owner_phone}</Col>
            </Row>
            <Line></Line>
            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col span={3}>Apply Name:</Col>
              <Col span={3}>{listData.apply_name}</Col>
              <Col>Phone:</Col>
              <Col>{listData.apply_name_phone}</Col>
            </Row>
            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col span={3}>Relationship:</Col>
              <Col>{apply_relation_owner[parseInt(listData.apply_relation_owner)]}</Col>
            </Row>
            <Row gutter={8} style={{ marginTop: 16 }}>
              <Col span={3}>Reason:</Col>
              <Col>
                <TextArea
                  disabled
                  value={listData.apply_reason_content}
                  style={{ width: 300, height: 100, padding: 8 }}
                ></TextArea>
              </Col>
            </Row>
            <Line></Line>

            {listData.apply_status === 0 ? (
              <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"
                      rules={[{ required: true, message: 'Please select the reply result!' }]}
                    >
                      <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'}>Receive</Radio>
                      </Radio.Group>
                    </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.replyContact}</Col>
                </Row>
                <Row gutter={8} style={{ marginTop: 16 }}>
                  <Col span={3}>Examine:</Col>
                  <Col span={4}>
                    <Radio.Group value={listData.apply_status === 2 ? '2' : '1'}>
                      <Radio.Button value={'1'}>Agree</Radio.Button>
                      <Radio.Button style={{ marginLeft: 10 }} value={'2'}>
                        Refuse
                      </Radio.Button>
                    </Radio.Group>
                  </Col>
                </Row>

                <Row gutter={8} style={{ marginTop: 16 }}>
                  <Col span={3}>Reply:</Col>
                  <Col>
                    <TextArea
                      disabled
                      value={listData.reply_content}
                      style={{ width: 300, height: 100, padding: 8 }}
                    ></TextArea>
                  </Col>
                </Row>

                {listData.apply_status === 1 ? (
                  <Form ref={formRef} name="basic" onFinish={onFinish}>
                    <Row gutter={8} style={{ marginTop: 16 }}>
                      <Col span={3}>Received:</Col>
                      <Col span={4}>
                        <Form.Item name="applyStatus">
                          <Radio.Group>
                            <Radio value={'3'}>Receive</Radio>
                          </Radio.Group>
                        </Form.Item>
                      </Col>
                    </Row>
                    <Form.Item>
                      <Button type="primary" htmlType="submit">
                        Submit
                      </Button>
                    </Form.Item>
                  </Form>
                ) : (
                  <Row gutter={8} style={{ marginTop: 16 }}>
                    <Col span={3}>Received:</Col>
                    <Col span={4}>
                      <Radio.Group value={listData.apply_status === 3 ? '3' : ''}>
                        <Radio value={'3'}>Receive</Radio>
                      </Radio.Group>
                    </Col>
                  </Row>
                )}
              </>
            )}
          </>
        ) : null}
      </div>
    </Spin>
  );
};

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