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

const { TextArea } = Input;
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({});
  const [rejectReason, setRejectReason] = useState();
  const [examineType, SetExamineType] = useState(1);
  const [loading, setLoading] = useState(false)

  const getAudit = (val) => {
    setLoading(true)
    updateAudit(id, { rejectReason: rejectReason, verifyStatus: val }).then(() => {
      message.success('操作成功');
      goBack()
      setLoading(false)
    }).catch(err => {
      console.log(err.message)
      setLoading(false)
    })
  }
  const handleAudit = () => {
    if ((examineType == 2 && rejectReason) || examineType == 1) {
      if (examineType == 1 && application.applyType == 'first') {
        getPetCardNo(application.petId).then((res) => {
          if (!res) {
            getAudit(examineType);
          } else {
            message.info('该宠物已有犬证，请拒绝犬主办证申请');
          }
        })
      } else {
        getAudit(examineType);
      }
    }
    else {
      message.success('请输入处理结果');
    }
  }
  //列表切换通知状态方法
  const handleOK = (record, data) => {
    const title = examineType == 1
      ? '您确定要通过该申请吗'
      : '您确定要拒绝该申请吗';
    Modal.confirm({
      title: title,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        handleAudit()
      },
    });
  };

  useEffect(() => {
    getApplicationDetail(id).then((res) => {
      setApplication(res)
      setRejectReason(res.rejectReason)
      if (res.verifyStatus == 2) { SetExamineType(2) }
    }).catch((err) => {
      console.log(err.message)
    });
  }, [id])
  return (
    <PageHeaderWrapper    >
      <Card>
        <Form {...formItemLayout}>
          <FormItem label="犬主">
            {application?.personName}
          </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>
          }
          <FormItem label="付款状态">
            {
              application.payStatus === 0
                ? '待支付'
                : application.payStatus === 1
                  ? '支付中'
                  : application.payStatus === 2
                    ? '已支付' : ''
            }
          </FormItem>
          <FormItem label="审核意见">
            <Radio.Group onChange={e =>{if(application.verifyStatus==0)SetExamineType(e.target.value)}} value={examineType}>
              <Radio value={1}>同意</Radio>
              <Radio value={2}>拒绝</Radio>
            </Radio.Group>
          </FormItem>
          {
            application.verifyStatus != 1 && examineType == 2 &&
            <FormItem label="驳回原因">
              <TextArea placeholder='请输入驳回原因' rows='3'
                style={{ width: '350px' }}
                value={rejectReason}
                readOnly={application.verifyStatus == 2}
                onChange={(e) => setRejectReason(e.target.value)}
              />
            </FormItem>
          }
          <FormItem label=" " colon={false}>
            {
              application.verifyStatus == 0 &&
              <Button type="primary" loading={loading} style={{ marginRight: '16px' }} onClick={handleOK}>
                确定
              </Button>
            }
            <Button type="default" onClick={goBack}>
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};