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

'use client'
import {useContext, useMemo} from 'react'
import {PurchaseFormContext} from '@/components/composites/purchase/_client/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {FormField} from '@/components/ui/form'
import FormOption from '@/components/composites/purchase/_client/option'
import Image from 'next/image'
import alipay from '@/components/composites/purchase/_assets/alipay.svg'
import wechat from '@/components/composites/purchase/_assets/wechat.svg'
import balance from '@/components/composites/purchase/_assets/balance.svg'
import {AuthContext} from '@/components/providers/AuthProvider'
import RechargeModal from '@/components/composites/purchase/_client/recharge'
import Pay from '@/components/composites/purchase/_client/pay'

export type RightProps = {}

export default function Right(props: RightProps) {
  console.log('Right render')

  const authCtx = useContext(AuthContext)
  const profile = authCtx.profile

  const form = useContext(PurchaseFormContext)?.form
  if (!form) {
    throw new Error(`Center component must be used within PurchaseFormContext`)
  }

  const watchType = form.watch('type')
  const watchLive = form.watch('live')
  const watchQuota = form.watch('quota')
  const watchExpire = form.watch('expire')
  const watchDailyLimit = form.watch('daily_limit')
  const payType = form.watch('pay_type')

  const price = useMemo(() => {
    const count = watchType === '1' ? watchDailyLimit : watchQuota

    let seconds = parseInt(watchLive, 10) * 60
    if (seconds == 180) {
      seconds = 150
    }

    let times = parseInt(watchExpire, 10)
    if (watchType === '2') {
      times = 1
    }

    return count * seconds * times / 30000
  }, [watchDailyLimit, watchExpire, watchLive, watchQuota, watchType])

  return (
    <div className={`flex-none basis-80 p-6 flex flex-col gap-6`}>
      <h3>订单详情</h3>
      <ul className={`flex flex-col gap-3`}>
        <li className={`flex justify-between items-center`}>
          <span className={`text-sm text-gray-500`}>套餐名称</span>
          <span className={`text-sm`}>
            {watchType === '2' ? `包量套餐` : `包时套餐`}
          </span>
        </li>
        <li className={`flex justify-between items-center`}>
          <span className={`text-sm text-gray-500`}>IP 时效</span>
          <span className={`text-sm`}>
            {watchLive}分钟
          </span>
        </li>
        {watchType === '2' ? (
          <li className={`flex justify-between items-center`}>
            <span className={`text-sm text-gray-500`}>购买 IP 量</span>
            <span className={`text-sm`}>
              {watchQuota}个
            </span>
          </li>
        ) : <>
          <li className={`flex justify-between items-center`}>
            <span className={`text-sm text-gray-500`}>套餐时长</span>
            <span className={`text-sm`}>
              {watchExpire}天
            </span>
          </li>
          <li className={`flex justify-between items-center`}>
            <span className={`text-sm text-gray-500`}>每日限额</span>
            <span className={`text-sm`}>
              {watchDailyLimit}个
            </span>
          </li>
        </>}
      </ul>
      <div className={`border-b border-gray-200`}></div>
      <p className={`flex justify-between items-center`}>
        <span>价格</span>
        <span className={`text-xl text-orange-500`}>￥{price}</span>
      </p>
      <FormField name={`pay_type`} label={`支付方式`} className={`flex flex-col gap-6`}>
        {({id, field}) => (
          <RadioGroup
            id={id}
            defaultValue={field.value}
            onValueChange={field.onChange}
            className={`flex flex-col gap-3`}>
            <div className={`w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md`}>
              <p className={`flex items-center gap-3`}>
                <Image src={balance} alt={`余额icon`}/>
                <span className={`text-sm text-gray-500`}>账户余额</span>
              </p>
              <p className={`flex justify-between items-center`}>
                <span className={`text-xl`}>{profile?.balance}</span>
                <RechargeModal/>
              </p>

            </div>
            <FormOption
              id={`${id}-balance`}
              value={`balance`}
              compare={field.value}
              className={`p-3 w-full flex-row gap-2 justify-center`}>
              <Image src={balance} alt={`余额 icon`}/>
              <span>余额</span>
            </FormOption>
            <FormOption
              id={`${id}-wechat`}
              value={`wechat`}
              compare={field.value}
              className={`p-3 w-full flex-row gap-2 justify-center`}>
              <Image src={wechat} alt={`微信 logo`}/>
              <span>微信</span>
            </FormOption>
            <FormOption
              id={`${id}-alipay`}
              value={`alipay`}
              compare={field.value}
              className={`p-3 w-full flex-row gap-2 justify-center`}>
              <Image src={alipay} alt={`支付宝 logo`}/>
              <span>支付宝</span>
            </FormOption>
          </RadioGroup>
        )}
      </FormField>
      <Pay method={payType} amount={price} resource={{
        type: Number(watchType),
        live: Number(watchLive) * 60,
        quota: watchQuota,
        expire: Number(watchExpire),
        daily_limit: watchDailyLimit,
      }}/>
    </div>
  )
}