import React from 'react'

import { Form, Modal } from 'antd'
import SuccessSvg from 'assets/success.svg'
import FailSvg from 'assets/fail.svg'

import NButton from 'components/NButton/NButton'
import { EOrderStatus, IOrderPayStatusRes } from '../Material.service'
import styles from '../css/NoPermission.module.scss'

const { Item } = Form
interface IApplyPermissionProps {
  visible: boolean
  info: IOrderPayStatusRes | null
  onCloseModel: () => void
}

/**
 * 支付结果
 */
const ApplyResult: React.FC<IApplyPermissionProps> = props => {
  const { visible, info, onCloseModel } = props

  const handleToClose = () => {
    onCloseModel()
  }

  if (!info) return null
  return (
    <Modal
      open={visible}
      centered={true}
      onCancel={handleToClose}
      destroyOnClose={true}
      maskClosable={false}
      title="支付结果"
      footer={null}
    >
      <div className={styles['paymodel-content-wrapper']}>
        {info.Source === 'article' && (
          <>
            <div className="paymodel-title">
              {info.OrderStatus === EOrderStatus.Payed ? (
                <>
                  <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
                  <span>畅读卡购买成功</span>
                </>
              ) : (
                <>
                  <img src={FailSvg} alt="图标" className="paymodel-success-icon" />
                  <span>畅读卡购买失败</span>
                </>
              )}
            </div>
            <div className="paymodel-text">有效期至：{info.EndDate}</div>
          </>
        )}
        {info.Source === 'activity' && (
          <>
            <div className="paymodel-title">
              {info.OrderStatus === EOrderStatus.Payed ? (
                <>
                  <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
                  <span>支付成功</span>
                </>
              ) : (
                <>
                  <img src={FailSvg} alt="图标" className="paymodel-success-icon" />
                  <span>支付失败</span>
                </>
              )}
            </div>
            <div className="paymodel-text">请到活动页面选择参会方式</div>
          </>
        )}
      </div>
      <div className={styles['paymodel-footer-wrapper']}>
        {}
        <NButton type="primary" onClick={handleToClose} size="large" className="pay-btn">
          {info.Source === 'article' ? '关闭' : '返回活动页'}
        </NButton>
      </div>
    </Modal>
  )
}

export default ApplyResult