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

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

const module = 'CommunityService';

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

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

const CardDetail = (props: any) => {
  const { dispatch, Data, DataSave, DataSaveDetail } = props;
  const formRef = useRef(null);

  // useEffect(() => {
  //   if (DataSaveDetail != null) {
  //     console.log(DataSaveDetail);
  //   }
  // }, [DataSaveDetail]);

  useEffect(() => {
    if (DataSave != null) {
      RA(36, { id: DataSave.id }, module, dispatch);
    } else {
      history.go(-1);
    }
  }, []);

  const onFinish = (values: any) => {
    let tmp = {
      communityId: DataSave.communityId,
      id: DataSave.id,
      ownerId: DataSave.ownerId,
      applyStatus: values.applyStatus,
      replyContent:
        DataSave.apply_status !== 0 && values.applyStatus === '3'
          ? DataSave.reply_content
          : values.replyContent,
      type: '7',
    };
    RA(34, tmp, module, dispatch);
    message.success('Success Operation!');
    history.push('/CommercialService/AccessCardApplication');
  };

  return (
    <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
      {DataSave != null ? (
        <>
          <TitleBack
            sublist={[
              'Status : ' + apply_status[DataSave.apply_status][1],
              'Time : ' + moment(DataSave.create_time.time).format('DD-MM-YYYY'),
            ]}
            title="Apply Card"
          ></TitleBack>
          <Row gutter={8}>
            <Col>Community:</Col>
            <Col span={3}>{DataSave.community_name}</Col>
            <Col>unit:</Col>
            <Col>
              {DataSave.build_number}#{DataSave.floor_number}-{DataSave.room_number}
            </Col>
          </Row>

          <Row gutter={8} style={{ marginTop: 16 }}>
            <Col>Address:</Col>
            <Col>
              {DataSave.zip_address} {DataSave.build_number}#{DataSave.floor_number}-
              {DataSave.room_number} {DataSave.zip_code}
            </Col>
          </Row>

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

          {DataSave.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'}>Agree</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}>Examine:</Col>
                <Col span={4}>
                  <Radio.Group value={DataSave.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={DataSave.reply_content}
                    style={{ width: 300, height: 100, padding: 8 }}
                  ></TextArea>
                </Col>
              </Row>

              {DataSave.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'}>Agree</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={DataSave.apply_status === 3 ? '3' : ''}>
                      <Radio value={'3'}>Agree</Radio>
                    </Radio.Group>
                  </Col>
                </Row>
              )}
            </>
          )}
        </>
      ) : null}
    </div>
  );
};

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