web/src/components/composites/purchase/_client/recharge.tsx

'use client'
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {Button} from '@/components/ui/button'
import {Form, FormField} from '@/components/ui/form'
import {useForm} from 'react-hook-form'
import zod from 'zod'
import FormOption from '@/components/composites/purchase/_client/option'
import {RadioGroup} from '@/components/ui/radio-group'
import Image from 'next/image'
import wechat from '@/components/composites/purchase/_assets/wechat.svg'
import alipay from '@/components/composites/purchase/_assets/alipay.svg'
import {zodResolver} from '@hookform/resolvers/zod'
import {tradeRecharge} from '@/actions/trade'
import {toast} from 'sonner'
import {useRouter} from 'next/navigation'

const schema = zod.object({
  method: zod.enum(['alipay', 'wechat']),
  amount: zod.number().min(1, '充值金额必须大于 0'),
})

type Schema = zod.infer<typeof schema>

export type RechargeModelProps = {}

export default function RechargeModal(props: RechargeModelProps) {

  const form = useForm<Schema>({
    resolver: zodResolver(schema),
    defaultValues: {
      method: 'alipay',
      amount: 50,
    },
  })

  const router = useRouter()

  const onSubmit = async (data: Schema) => {
    try {
      const resp = await tradeRecharge(data)
      if (!resp.success) {
        throw new Error(resp.message)
      }

      // todo 跳转支付页
      router.push('/pay')
    }
    catch (e) {
      toast.error(`充值失败`, {
        description: (e as Error).message,
      })
    }
  }

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button theme={`accent`} type={`button`} className={`px-4 h-8`}>去充值</Button>
      </DialogTrigger>

      <DialogContent>
        <DialogTitle className={`flex flex-col gap-2`}>
          充值中心
        </DialogTitle>

        <Form form={form} onSubmit={onSubmit} className={`flex flex-col gap-8`}>

          {/* 充值额度 */}
          <FormField<Schema> name={`amount`} label={`充值额度`} className={`flex flex-col gap-4`}>
            {({id, field}) => (
              <RadioGroup
                id={id}
                defaultValue={String(field.value)}
                onValueChange={v => field.onChange(Number(v))}
                className={`flex flex-col gap-2`}>

                <div className={`flex items-center gap-2`}>
                  <FormOption
                    id={`${id}-20`} value={`20`} label={`20元`}
                    compare={String(field.value)}
                    className={`flex-1`}
                  />
                  <FormOption
                    id={`${id}-50`} value={`50`} label={`50元`}
                    compare={String(field.value)}
                    className={`flex-1`}
                  />
                  <FormOption
                    id={`${id}-100`} value={`100`} label={`100元`}
                    compare={String(field.value)}
                    className={`flex-1`}
                  />
                </div>

                <div className={`flex items-center gap-2`}>
                  <FormOption
                    id={`${id}-200`} value={`200`} label={`200元`}
                    compare={String(field.value)}
                    className={`flex-1`}
                  />
                  <FormOption
                    id={`${id}-500`} value={`500`} label={`500元`}
                    compare={String(field.value)}
                    className={`flex-1`}
                  />
                  <FormOption
                    id={`${id}-1000`} value={`1000`} label={`1000元`}
                    compare={String(field.value)}
                    className={`flex-1`}
                  />
                </div>
              </RadioGroup>
            )}
          </FormField>

          {/* 支付方式 */}
          <FormField name={`method`} label={`支付方式`} className={`flex flex-col gap-4`}>
            {({id, field}) => (
              <RadioGroup
                id={id}
                defaultValue={field.value}
                onValueChange={field.onChange}
                className={`flex gap-2`}>
                <FormOption
                  id={`${id}-alipay`} value={`alipay`}
                  compare={field.value}
                  className={`flex-1 flex-row justify-center items-center`}>
                  <Image src={alipay} alt={`支付宝 logo`} className={`w-6 h-6`}/>
                  <span>支付宝</span>
                </FormOption>
                <FormOption
                  id={`${id}-wechat`} value={`wechat`}
                  compare={field.value}
                  className={`flex-1 flex-row justify-center items-center`}>
                  <Image src={wechat} alt={`微信 logo`} className={`w-6 h-6`}/>
                  <span>微信</span>
                </FormOption>
              </RadioGroup>
            )}
          </FormField>

          <DialogFooter className={`!flex !flex-row !justify-center`}>
            <Button className={`px-8 h-12 text-lg`}>立即支付</Button>
          </DialogFooter>
        </Form>
      </DialogContent>
    </Dialog>
  )
}