web/src/components/composites/payment/payment-modal.tsx

'use client'
import {MobilePayment} from './mobile-payment'
import {DesktopPayment} from './desktop-payment'
import {TradePlatform} from '@/lib/models/trade'
import {Dialog} from '@/components/ui/dialog'
import {PaymentProps} from './type'
import {payClose} from '@/actions/resource'
import {useEffect} from 'react'
import {useRouter} from 'next/navigation'

export type PaymentModalProps = {
  onConfirm: (showFail: boolean) => Promise<void>
  onClose: () => void
} & PaymentProps

export function PaymentModal(props: PaymentModalProps) {
  // 手动关闭时的处理
  const handleClose = async () => {
    try {
      const req = {
        trade_no: props.inner_no,
        method: props.method,
      }
      const res = await payClose(req)
    }
    catch (error) {
      console.error('关闭订单失败:', error)
    }
    finally {
      props.onClose?.()
    }
  }

  // 轮询检查支付状态
  useEffect(() => {
    const pollInterval = 2000
    const maxRetries = 30
    let retries = 0

    const interval = setInterval(async () => {
      try {
        await props.onConfirm(false)
        return
      }
      catch (error) {
        console.error('支付状态检查失败:', error)
      }
      finally {
        retries++
        if (retries >= maxRetries) {
          clearInterval(interval)
        }
      }
    }, pollInterval)

    return () => {
      clearInterval(interval)
    }
  }, [props])

  return (
    <Dialog
      defaultOpen={true}
      onOpenChange={(open) => {
        if (!open) handleClose()
      }}>
      {props.platform === TradePlatform.Mobile ? (
        <MobilePayment
          {...props}
          onClose={handleClose}
        />
      ) : (
        <DesktopPayment
          {...props}
          onClose={handleClose}
        />
      )}
    </Dialog>
  )
}