mfyx_web/src/Material/components/ApplyResult.tsx

import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request'

import { Button, Form, Input, message, Row, Modal, Upload } from 'antd'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import type { UploadChangeParam } from 'antd/es/upload'
import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
import SuccessSvg from 'assets/success.svg'
import FailSvg from 'assets/fail.svg'

import NButton from 'components/NButton/NButton'
import { MaterialService } from '../Material.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import { ITryType } from './NoPermission'
import styles from '../css/NoPermission.module.scss'

const { Item } = Form
interface IApplyPermissionProps {
  visible: boolean
  detailID?: number
  tryType?: ITryType
  handleClose: () => void
}

/**
 * 支付结果
 */
const ApplyResult: React.FC<IApplyPermissionProps> = props => {
  const { visible, detailID, tryType, handleClose } = props
  const login2p = useLogin2p()
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [imageUrl, setImageUrl] = useState<string>()

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传名片</div>
    </div>
  )

  const { run } = useRequest(MaterialService.postApplyTry, {
    manual: true,
    onSuccess: res => {
      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
      handleToClose()
      setImageUrl(undefined)
    }
  })
  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
    manual: true,
    onSuccess: res => {
      message.info(res.data.Msg)
      setImageUrl(res.data?.Data?.ResourceUrl)
      setLoading(false)
    }
  })
  useEffect(() => {
    return () => {
      form.resetFields()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [form])

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleFinish = (value: any) => {
    if (!imageUrl) {
      message.error('请上传名片')
      return
    }
    // 上传名片时，ApplyMethod为2，否则为1
    run({
      ApplyMethod: 2,
      BusinessCardUrl: imageUrl,
      CompanyName: value.CompanyName,
      DetailId: detailID,
      RealName: value.RealName,
      TryType: tryType
    })
  }
  const uploadProps: UploadProps = {
    name: 'file',
    multiple: false,
    listType: 'picture-card',
    showUploadList: false,
    withCredentials: true,
    customRequest: option => {
      uploadImg(option.file)
    },
    onChange: (info: UploadChangeParam<UploadFile>) => {
      if (info.file.status === 'uploading') {
        setLoading(true)
        return
      }
    }
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e
    }
    return e && e.fileList
  }
  const handleToClose = () => {
    // 关闭前把名片给清除了
    setImageUrl(undefined)
    handleClose()
  }
  const handleBackClose = () => {
    //
    handleClose()
  }
  return (
    <Modal
      open={visible}
      centered={true}
      onCancel={handleToClose}
      destroyOnClose={true}
      maskClosable={false}
      title="支付结果"
      footer={null}
    >
      <div className={styles['paymodel-content-wrapper']}>
        <div className="paymodel-title">
          <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
          <img src={FailSvg} alt="图标" className="paymodel-success-icon" />
          <span>畅读卡购买成功</span>
          <span>支付成功</span>
          <span>支付失败</span>
        </div>
        <div className="paymodel-text">有效期至：2023.09.22 12:12:12</div>
        <div className="paymodel-text">请到活动页面选择参会方式</div>
      </div>
      <div className={styles['paymodel-footer-wrapper']}>
        <NButton type="primary" onClick={handleBackClose} size="large" className="pay-btn">
          关闭
        </NButton>
        <NButton type="primary" onClick={handleBackClose} size="large" className="pay-btn">
          返回活动页
        </NButton>
      </div>
    </Modal>
  )
}

export default ApplyResult