import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { Card, Form, Button, Image } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getApplicationDetail } from '@/services/application'

const FormItem = Form.Item;
const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
const goBack = () => {
  history.goBack();
};
export default (props) => {
  const { location } = props;
  const { id } = location.query;
  const [application, setApplication] = useState({});
  useEffect(() => {
    getApplicationDetail(id).then((res) => {
      setApplication(res)
    }).catch((err) => {
      console.log(err.message)
    });
  }, [id])
  return (
    <PageHeaderWrapper>
      <Card>
        <Form {...formItemLayout}>
          <FormItem label="犬主">
            {application?.personName}
          </FormItem>
          {
            application?.isOrg &&
            <>
              <FormItem label="企业">
                {application?.orgName}
              </FormItem>
              <FormItem label="营业执照">
                <Image src={application?.orgLicense} width={100} />
              </FormItem>
            </>
          }
          <FormItem label="电话">
            {application?.phone}
          </FormItem>
          <FormItem label="犬名">
            {application?.petName}
          </FormItem>
          <FormItem label="性别">
            {
              application?.petSex == 1 ? '雄' :
                application?.petSex == 2 ? '雌' : '未说明性别'
            }
          </FormItem>
          <FormItem label="犬种">
            {application?.petType}
          </FormItem>
          <FormItem label="毛色">
            {application?.petColor}
          </FormItem>
          <FormItem label="照片">
            <Image src={application?.img1} width={100} />
          </FormItem>
          <FormItem label="养狗地址">
            {application?.address}
          </FormItem>
          <FormItem label="免疫证号">
            {application?.immunizationCode}
          </FormItem>
          <FormItem label="免疫证明">
            <Image src={application?.immunizationImg} width={100} />
          </FormItem>
          <FormItem label="最近免疫日期">
            {application?.immunizationDate}
          </FormItem>
          <FormItem label="申请类型">
            {
              application?.applyType == 'first' ? '办证' :
                application?.applyType == 'reissue' ? '补办' :
                  application?.applyType == 'renewal' ? '续期' : ''
            }
          </FormItem>
          {
            application?.applyType !== 'renewal' &&
            <FormItem label="申领方式">
              {
                application?.applyMethod == '1' ? '上门自取' :
                  application?.applyMethod == '2' ? '快递到家' : ''
              }
            </FormItem>
          }
          {
            application?.criminalInfo &&
            <FormItem label="伤人信息">
              <Image src={application.criminalInfo} width={100} />
            </FormItem>
          }
          {
            application?.penaltyInfo &&
            <FormItem label="处罚信息">
              <Image src={application.penaltyInfo} width={100} />
            </FormItem>
          }
          <FormItem label="证件号">
            {application.originCardNo}
          </FormItem>
          {
            application.applyMethod == 2 &&
            <>
              <FormItem label="快递公司" >
                {application.trackingType}
              </FormItem>
              <FormItem label="快递单号">
                {application.trackingNo}
              </FormItem>
            </>
          }
          <FormItem label=" " colon={false}>
            <Button type="default" onClick={() => goBack()}>
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};