import { useCallback, useEffect, useRef, useState } from "react"
import { useLocation, useNavigate } from "react-router-dom"
import { toast } from "sonner"
import type { CreateOrderData } from "@/api/order"
import { checkPayStatus, createOrder, createTestAccount } from "@/api/order"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import Wrap from "@/components/wrap"
import type { Product } from "@/lib/models/product"
import { cn } from "@/lib/utils"

// ============ 工具函数 ============
function randomChars(length: number): string {
  const chars = "abcdefghijklmnopqrstuvwxyz"
  let result = ""
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return result
}

function randomDigits(length: number): string {
  let result = ""
  for (let i = 0; i < length; i++) {
    result += Math.floor(Math.random() * 10).toString()
  }
  return result
}

// ============ 类型定义 ============
type PaymentState = {
  orderData: CreateOrderData
  polling: boolean
}

// ============ 子组件 ============

// 价格卡片组件
function PriceCard({ product, isTest }: { product: Product; isTest: boolean }) {
  return (
    <div className="bg-linear-to-r from-orange-50 to-amber-50 rounded-2xl p-5 mb-6 flex text-center border border-orange-100/60">
      <div className="flex items-center gap-4">
        <span className="text-sm text-gray-500">套餐价格</span>
        {isTest ? (
          <span className="text-3xl font-bold text-green-500">免费</span>
        ) : (
          <div className="flex items-end gap-2">
            <span className="text-3xl font-bold text-orange-500">
              ¥{product.price.toFixed(2)}
            </span>
            {product.originalPrice !== undefined &&
              product.originalPrice > product.price && (
                <span className="text-sm text-gray-400 line-through mb-0.5">
                  ¥{product.originalPrice.toFixed(2)}
                </span>
              )}
          </div>
        )}
      </div>
      {product.duration && (
        <span className="text-sm text-gray-500 bg-white/60 px-4 py-1.5 rounded-full">
          {product.duration}
        </span>
      )}
    </div>
  )
}

// 模式切换 Tab 组件
function ModeTabs({
  mode,
  onModeChange,
}: {
  mode: "single" | "batch"
  onModeChange: (mode: "single" | "batch") => void
}) {
  return (
    <div className="flex bg-gray-50 rounded-xl p-1 mb-6">
      <button
        className={cn(
          "flex-1 py-2.5 text-sm font-medium rounded-lg transition-all cursor-pointer",
          mode === "single"
            ? "bg-white text-blue-600 shadow-sm"
            : "text-gray-500 hover:text-gray-700",
        )}
        onClick={() => onModeChange("single")}
      >
        单个注册
      </button>
      <button
        className={cn(
          "flex-1 py-2.5 text-sm font-medium rounded-lg transition-all cursor-pointer",
          mode === "batch"
            ? "bg-white text-blue-600 shadow-sm"
            : "text-gray-500 hover:text-gray-700",
        )}
        onClick={() => onModeChange("batch")}
      >
        批量注册
      </button>
    </div>
  )
}

// 连接数选择器组件
function ConnectCountSelector({
  value,
  onChange,
  label,
  hint,
}: {
  value: number
  onChange: (value: number) => void
  label: string
  hint?: string
}) {
  return (
    <div>
      <Label className="text-sm font-medium text-gray-700 mb-2 block">
        {label}
      </Label>
      <div className="flex items-center gap-4">
        <Button
          variant="outline"
          size="icon"
          className="h-10 w-10 rounded-full"
          disabled={value <= 1}
          onClick={() => onChange(Math.max(1, value - 1))}
        >
          <svg
            className="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M20 12H4"
            />
          </svg>
        </Button>
        <span className="w-12 text-center text-xl font-semibold text-gray-700">
          {value}
        </span>
        <Button
          variant="outline"
          size="icon"
          className="h-10 w-10 rounded-full"
          onClick={() => onChange(value + 1)}
        >
          <svg
            className="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 4v16m8-8H4"
            />
          </svg>
        </Button>
        {hint && <span className="text-xs text-gray-400 ml-1">{hint}</span>}
      </div>
    </div>
  )
}

// 余额展示组件
function BalanceDisplay({ balance }: { balance: number }) {
  return (
    <div className="flex items-center justify-between py-3 px-5 bg-gray-50/80 rounded-xl border border-gray-100">
      <span className="text-sm text-gray-600">余额</span>
      <div className="flex items-center gap-4">
        <span className="text-sm text-gray-600">
          当前账户余额
          <span className="font-bold text-orange-500 ml-1">
            ¥{balance.toFixed(2)}
          </span>
        </span>
        <Button
          variant="link"
          className="text-sm text-blue-500 p-0 h-auto font-medium"
        >
          去充值 →
        </Button>
      </div>
    </div>
  )
}

// 支付方式选择组件
function PaymentMethodSelector({
  value,
  onChange,
}: {
  value: string
  onChange: (value: string) => void
}) {
  return (
    <div>
      <Label className="text-sm font-medium text-gray-700 mb-2 block">
        支付方式
      </Label>
      <RadioGroup value={value} onValueChange={onChange} className="flex gap-6">
        <div className="flex items-center gap-2">
          <RadioGroupItem value="100" id="alipay" />
          <Label
            htmlFor="alipay"
            className="cursor-pointer text-sm text-gray-700"
          >
            支付宝
          </Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="70" id="wechat" />
          <Label
            htmlFor="wechat"
            className="cursor-pointer text-sm text-gray-700"
          >
            微信
          </Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="1" id="balance" />
          <Label
            htmlFor="balance"
            className="cursor-pointer text-sm text-gray-700"
          >
            余额
          </Label>
        </div>
      </RadioGroup>
    </div>
  )
}

// 金额汇总组件
function PriceSummary({ total }: { total: number }) {
  return (
    <div className="border-t border-gray-100 pt-4 mt-2 space-y-1.5">
      <div className="flex justify-between text-sm">
        <span className="text-gray-500">总金额</span>
        <span className="font-medium text-gray-800">¥{total.toFixed(2)}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-gray-500">应付款</span>
        <span className="text-2xl font-bold text-orange-500">
          ¥{total.toFixed(2)}
        </span>
      </div>
    </div>
  )
}

// 表单操作按钮组件
function FormActions({
  onBack,
  onSubmit,
  submitText,
  submitting,
}: {
  onBack: () => void
  onSubmit: () => void
  submitText: string
  submitting: boolean
}) {
  return (
    <div className="flex gap-3 pt-4">
      <Button
        variant="outline"
        className="flex-1 h-12 rounded-xl text-base border-gray-200 hover:bg-gray-50"
        onClick={onBack}
      >
        上一步
      </Button>
      <Button
        className="flex-1 h-12 rounded-xl text-base bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90 hover:shadow-lg hover:shadow-blue-200/50 transition-all"
        onClick={onSubmit}
        disabled={submitting}
      >
        {submitting ? "提交中..." : submitText}
      </Button>
    </div>
  )
}

// 优惠券选择组件
function CouponSelector() {
  return (
    <div>
      <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
        选择优惠券
      </Label>
      <Select>
        <SelectTrigger className="h-12 rounded-xl">
          <SelectValue placeholder="请选择优惠券" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="none">暂无可用优惠券</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

// ============ 单个注册表单组件 ============
function SingleRegisterForm({
  account,
  setAccount,
  pwd,
  setPwd,
  connectCount,
  setConnectCount,
  payType,
  setPayType,
  isTest,
  isDayCard,
  isNormalPackage,
  total,
  submitting,
  onBack,
  onSubmit,
}: {
  product: Product
  account: string
  setAccount: (v: string) => void
  pwd: string
  setPwd: (v: string) => void
  connectCount: number
  setConnectCount: (v: number) => void
  payType: string
  setPayType: (v: string) => void
  isTest: boolean
  isDayCard: boolean
  isNormalPackage: boolean
  total: number
  submitting: boolean
  onBack: () => void
  onSubmit: () => void
}) {
  return (
    <div className="space-y-5">
      {/* 天卡提示 */}
      {isDayCard && (
        <div className="text-sm text-orange-500 text-center font-medium bg-orange-50 py-2.5 rounded-xl border border-orange-100">
          ⚠️ 天卡不支持退款，请谨慎购买
        </div>
      )}

      <div className="flex">
        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
          IP产品账号
        </Label>
        <Input
          value={account}
          onChange={e => setAccount(e.target.value)}
          placeholder="4-10位字母或数字"
          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
        />
        <p className="text-xs text-gray-400 mt-1.5">4至10位字母或数字或组合</p>
      </div>

      {/* IP密码 */}
      <div className="flex">
        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
          IP产品密码
        </Label>
        <Input
          value={pwd}
          onChange={e => setPwd(e.target.value)}
          placeholder="1-10位字母或数字"
          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
        />
        <p className="text-xs text-gray-400 mt-1.5">1至10位字母或数字或组合</p>
      </div>

      {isNormalPackage && (
        <>
          <ConnectCountSelector
            value={connectCount}
            onChange={setConnectCount}
            label="连接设备数"
            hint="一个账号可同时在线设备数"
          />

          <CouponSelector />

          <BalanceDisplay balance={10.0} />

          <PaymentMethodSelector value={payType} onChange={setPayType} />

          <PriceSummary total={total} />
        </>
      )}

      <FormActions
        onBack={onBack}
        onSubmit={onSubmit}
        submitText={isTest ? "领取试用" : "确认支付"}
        submitting={submitting}
      />
    </div>
  )
}

// ============ 批量注册表单组件 ============
function BatchRegisterForm({
  batchAccount,
  setBatchAccount,
  batchStart,
  setBatchStart,
  batchCount,
  setBatchCount,
  batchPwd,
  setBatchPwd,
  batchConnectCount,
  setBatchConnectCount,
  batchPayType,
  setBatchPayType,
  batchPreview,
  total,
  submitting,
  onBack,
  onSubmit,
}: {
  batchAccount: string
  setBatchAccount: (v: string) => void
  batchStart: number
  setBatchStart: (v: number) => void
  batchCount: number
  setBatchCount: (v: number) => void
  batchPwd: string
  setBatchPwd: (v: string) => void
  batchConnectCount: number
  setBatchConnectCount: (v: number) => void
  batchPayType: string
  setBatchPayType: (v: string) => void
  batchPreview: string
  total: number
  submitting: boolean
  onBack: () => void
  onSubmit: () => void
}) {
  return (
    <div className="space-y-5">
      {/* 批量说明 */}
      <div className="text-sm text-gray-600 leading-relaxed p-4 bg-blue-50/70 rounded-xl border border-blue-100">
        <p>
          批量注册的账号会使用【账号前缀】+【开始数】+【个数】顺序进行注册，
        </p>
        <p className="mt-1">
          如：注册账号前缀为【user】开始数为【2】个数为【10】，则注册的账号为：
          <span className="text-blue-600 font-medium">
            {" "}
            user2，user3，user4，....user11
          </span>
        </p>
      </div>

      {/* IP账号前缀 */}
      <div>
        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
          IP账号前缀
        </Label>
        <Input
          value={batchAccount}
          onChange={e => setBatchAccount(e.target.value)}
          placeholder="3-8位字母或数字"
          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
        />
        <p className="text-xs text-gray-400 mt-1.5">3至8位字母或数字或组合</p>
      </div>

      {/* 开始号 */}
      <div>
        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
          开始号
        </Label>
        <Input
          type="number"
          value={batchStart}
          onChange={e =>
            setBatchStart(Number.parseInt(e.target.value, 10) || 1)
          }
          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
        />
        <p className="text-xs text-gray-400 mt-1.5">本批次账号的起始账号</p>
      </div>

      {/* 注册个数 */}
      <div>
        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
          注册个数
        </Label>
        <Input
          type="number"
          value={batchCount}
          onChange={e =>
            setBatchCount(
              Math.min(500, Number.parseInt(e.target.value, 10) || 1),
            )
          }
          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
        />
        <p className="text-xs text-gray-400 mt-1.5">本批次的账号个数</p>
      </div>

      {/* 账号预览 */}
      {batchPreview && (
        <div className="text-sm text-gray-600 p-3.5 bg-gray-50/80 rounded-xl border border-gray-100">
          即将生成的账号：
          <span className="font-medium text-gray-800">{batchPreview}</span>
        </div>
      )}

      {/* IP密码 */}
      <div>
        <Label className="text-sm font-medium text-gray-700 mb-1.5 block">
          IP产品密码
        </Label>
        <Input
          value={batchPwd}
          onChange={e => setBatchPwd(e.target.value)}
          placeholder="1-10位字母或数字"
          className="h-12 rounded-xl border-gray-200 focus:border-blue-400 focus:ring-blue-400/20"
        />
        <p className="text-xs text-gray-400 mt-1.5">1至10位字母或数字或组合</p>
      </div>

      <ConnectCountSelector
        value={batchConnectCount}
        onChange={setBatchConnectCount}
        label="单账号连接设备数"
        hint="每个账号可同时在线设备的数量"
      />

      <CouponSelector />

      <BalanceDisplay balance={10.0} />

      <PaymentMethodSelector value={batchPayType} onChange={setBatchPayType} />

      <PriceSummary total={total} />

      <FormActions
        onBack={onBack}
        onSubmit={onSubmit}
        submitText="确认支付"
        submitting={submitting}
      />
    </div>
  )
}

// ============ 支付弹窗组件 ============
function PaymentDialog({
  payment,
  onClose,
}: {
  payment: PaymentState | null
  onClose: () => void
}) {
  if (!payment) return null

  const isWechat = payment.orderData.OrderInfo.PayType === 70

  return (
    <Dialog open onOpenChange={onClose}>
      <DialogContent className="max-w-md rounded-2xl">
        <DialogHeader>
          <DialogTitle className="text-center text-lg">
            {isWechat ? "微信支付" : "支付宝支付"} ｜ 收银台
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4 pt-2">
          <div className="flex justify-center">
            {isWechat ? (
              <img
                src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.orderData.PayData)}`}
                alt="微信支付二维码"
                className="w-50 h-50 rounded-xl"
              />
            ) : (
              <div
                // biome-ignore lint/security/noDangerouslySetInnerHtml: 支付宝表单由后端返回
                dangerouslySetInnerHTML={{
                  __html: payment.orderData.PayData,
                }}
              />
            )}
          </div>

          <div className="border-t border-gray-100 pt-3 space-y-1.5 text-sm">
            <div className="flex justify-between">
              <span className="text-gray-500">收款方</span>
              <span className="font-medium">聚IP</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-500">金额</span>
              <span className="font-bold text-orange-500">
                ¥{payment.orderData.OrderInfo.OtherPayAmount}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-500">下单时间</span>
              <span className="text-gray-600">
                {payment.orderData.OrderInfo.CreateTime}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-500">订单号</span>
              <span className="text-xs text-gray-500">
                {payment.orderData.OrderInfo.OrderNo}
              </span>
            </div>
          </div>

          <p className="text-xs text-center text-gray-400">
            支付完成后将自动关闭此窗口
          </p>
        </div>
      </DialogContent>
    </Dialog>
  )
}

export default function BuyPage() {
  const location = useLocation()
  const navigate = useNavigate()
  const product = location.state?.product as Product | undefined

  // 状态
  const [mode, setMode] = useState<"single" | "batch">("single")
  const [account, setAccount] = useState("")
  const [pwd, setPwd] = useState("")
  const [connectCount, setConnectCount] = useState(1)
  const [payType, setPayType] = useState("100")
  const [submitting, setSubmitting] = useState(false)
  const [payment, setPayment] = useState<PaymentState | null>(null)
  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)

  const [batchAccount, setBatchAccount] = useState("")
  const [batchStart, setBatchStart] = useState(1)
  const [batchCount, setBatchCount] = useState(1)
  const [batchPwd, setBatchPwd] = useState("")
  const [batchConnectCount, setBatchConnectCount] = useState(1)
  const [batchPayType, setBatchPayType] = useState("100")

  // 初始化
  useEffect(() => {
    if (!product) {
      navigate("/product", { replace: true })
      return
    }
    const acct = randomChars(2) + randomDigits(4)
    const pw = randomDigits(3)
    setAccount(acct)
    setPwd(pw)
    setConnectCount(1)
    setPayType("100")
    setMode("single")

    setBatchAccount(randomChars(3))
    setBatchStart(1)
    setBatchCount(1)
    setBatchPwd(pw)
    setBatchConnectCount(1)
    setBatchPayType("100")
  }, [product, navigate])

  // 清理轮询
  useEffect(() => {
    return () => {
      if (pollRef.current) clearInterval(pollRef.current)
    }
  }, [])

  const stopPolling = useCallback(() => {
    if (pollRef.current) {
      clearInterval(pollRef.current)
      pollRef.current = null
    }
  }, [])

  const startPolling = useCallback(
    (orderNo: string) => {
      stopPolling()
      pollRef.current = setInterval(async () => {
        const result = await checkPayStatus(orderNo)
        if (result.success && result.data === 1) {
          stopPolling()
          setPayment(null)
          toast.success("支付成功！")
        }
      }, 3000)
    },
    [stopPolling],
  )

  if (!product) return null

  // 计算属性
  const price = product.price
  const packageId = Number(product.id)
  const isTest = product.isTest ?? false
  const isDayCard = product.card === "天"
  const showTabs = !isTest && !isDayCard
  const isNormalPackage = !isTest && !isDayCard

  const singleTotal = price * connectCount
  const batchTotal = price * batchConnectCount * batchCount

  const batchPreview = (() => {
    if (!batchAccount) return ""
    const end = batchStart + batchCount - 1
    if (batchCount <= 3) {
      const items: string[] = []
      for (let i = batchStart; i <= end; i++) {
        items.push(`${batchAccount}${i}`)
      }
      return items.join(", ")
    }
    return `${batchAccount}${batchStart}, ${batchAccount}${batchStart + 1}, ${batchAccount}${batchStart + 2}...${batchAccount}${end}`
  })()

  // 支付处理函数
  const handleSinglePay = async () => {
    if (!account.trim() || !pwd.trim()) {
      toast.error("账号和密码不能为空")
      return
    }
    setSubmitting(true)
    try {
      const oPayType = isTest ? 0 : Number(payType)
      const useBalance = oPayType === 1 ? 1 : 0
      const payChannel = oPayType === 70 ? 30 : 50

      const result = await createOrder({
        PackageId: packageId,
        OrderType: 1,
        Account: account.trim(),
        Pwd: pwd.trim(),
        ConnectCount: connectCount,
        CouponId: 0,
        UseAccountAmount: useBalance,
        OPayType: oPayType,
        PayChannel: payChannel,
        Price: price,
      })

      if (result.success) {
        if (result.data === "00") {
          toast.success("购买成功！")
        } else {
          const orderData = result.data as CreateOrderData
          setPayment({ orderData, polling: true })
          startPolling(orderData.OrderInfo.OrderNo)
        }
      } else {
        toast.error(result.message)
      }
    } catch {
      toast.error("网络错误，请重试")
    } finally {
      setSubmitting(false)
    }
  }

  const handleBatchPay = async () => {
    if (!batchAccount.trim() || !batchPwd.trim()) {
      toast.error("账号前缀和密码不能为空")
      return
    }
    if (batchCount > 500) {
      toast.error("一次最多注册500个")
      return
    }
    setSubmitting(true)
    try {
      const oPayType = Number(batchPayType)
      const useBalance = oPayType === 1 ? 1 : 0
      const payChannel = oPayType === 70 ? 30 : 50

      const result = await createOrder({
        PackageId: packageId,
        OrderType: 2,
        Account: batchAccount.trim(),
        Pwd: batchPwd.trim(),
        ConnectCount: batchConnectCount,
        MinPostfix: batchStart,
        MaxPostfix: batchCount,
        CouponId: 0,
        UseAccountAmount: useBalance,
        OPayType: oPayType,
        PayChannel: payChannel,
        Price: price,
      })

      if (result.success) {
        if (result.data === "00") {
          toast.success("购买成功！")
        } else {
          const orderData = result.data as CreateOrderData
          setPayment({ orderData, polling: true })
          startPolling(orderData.OrderInfo.OrderNo)
        }
      } else {
        toast.error(result.message)
      }
    } catch {
      toast.error("网络错误，请重试")
    } finally {
      setSubmitting(false)
    }
  }

  const handleTestClaim = async () => {
    if (!account.trim() || !pwd.trim()) {
      toast.error("账号和密码不能为空")
      return
    }
    setSubmitting(true)
    try {
      const result = await createTestAccount({
        ProductId: product.productId,
        PackageId: packageId,
        Account: account.trim(),
        Pwd: pwd.trim(),
      })
      if (result.success) {
        toast.success("领取成功")
        navigate(-1)
      } else {
        toast.error(result.message)
      }
    } catch {
      toast.error("网络错误，请重试")
    } finally {
      setSubmitting(false)
    }
  }

  const handleClosePayment = () => {
    stopPolling()
    setPayment(null)
  }

  const handleBack = () => navigate(-1)

  // 判断单个表单的提交处理
  const handleSingleSubmit = isTest ? handleTestClaim : handleSinglePay

  return (
    <Wrap className="bg-white min-h-screen">
      <div className="text-center mt-20">
        <h4 className="text-2xl font-bold text-gray-800">{product.title}</h4>
        <p className="text-sm text-amber-600 mb-6">
          请务必选好所需物品，换货会产生费用
        </p>
      </div>

      {/* 价格卡片 */}
      <PriceCard product={product} isTest={isTest} />

      {/* Tab 切换 */}
      {showTabs && <ModeTabs mode={mode} onModeChange={setMode} />}

      {/* 表单内容 */}
      {!showTabs || mode === "single" ? (
        <SingleRegisterForm
          product={product}
          account={account}
          setAccount={setAccount}
          pwd={pwd}
          setPwd={setPwd}
          connectCount={connectCount}
          setConnectCount={setConnectCount}
          payType={payType}
          setPayType={setPayType}
          isTest={isTest}
          isDayCard={isDayCard}
          isNormalPackage={isNormalPackage}
          total={singleTotal}
          submitting={submitting}
          onBack={handleBack}
          onSubmit={handleSingleSubmit}
        />
      ) : (
        <BatchRegisterForm
          batchAccount={batchAccount}
          setBatchAccount={setBatchAccount}
          batchStart={batchStart}
          setBatchStart={setBatchStart}
          batchCount={batchCount}
          setBatchCount={setBatchCount}
          batchPwd={batchPwd}
          setBatchPwd={setBatchPwd}
          batchConnectCount={batchConnectCount}
          setBatchConnectCount={setBatchConnectCount}
          batchPayType={batchPayType}
          setBatchPayType={setBatchPayType}
          batchPreview={batchPreview}
          total={batchTotal}
          submitting={submitting}
          onBack={handleBack}
          onSubmit={handleBatchPay}
        />
      )}

      {/* 支付弹窗 */}
      <PaymentDialog payment={payment} onClose={handleClosePayment} />
    </Wrap>
  )
}
