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

'use client'
import {useContext, useMemo} from 'react'
import {PurchaseFormContext} from '@/components/composites/purchase/short/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {FormField} from '@/components/ui/form'
import FormOption from '@/components/composites/purchase/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 {useProfileStore} from '@/app/stores'
import RechargeModal from '@/components/composites/recharge'
import Pay from '@/components/composites/purchase/pay'
import {buttonVariants} from '@/components/ui/button'
import Link from 'next/link'
import {merge} from '@/lib/utils'
import {useFormContext} from 'react-hook-form'
import {Schema} from '@/components/composites/purchase/long/form'
import {Card} from '@/components/ui/card'

export default function Right() {
  const profile = useProfileStore(store => store.profile)
  const form = useFormContext<Schema>()

  const method = form.watch('pay_type')
  const mode = form.watch('type')
  const live = form.watch('live')
  const quota = form.watch('quota')
  const expire = form.watch('expire')
  const dailyLimit = form.watch('daily_limit')

  const price = useMemo(() => {
    const base = {
      1: 30,
      4: 80,
      8: 120,
      12: 180,
      24: 350,
    }[live]
    const factor = {
      1: Number(expire) * dailyLimit,
      2: quota,
    }[mode]
    return (base * factor / 100).toFixed(2)
  }, [dailyLimit, expire, live, quota, mode])

  return (
    <Card className={merge(
      `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
    )}>
      <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">
            {mode === '2' ? `包量套餐` : `包时套餐`}
          </span>
        </li>
        <li className="flex justify-between items-center">
          <span className="text-sm text-gray-500">IP 时效</span>
          <span className="text-sm">
            {live}
            {' '}
            小时
          </span>
        </li>
        {mode === '2' ? (
          <li className="flex justify-between items-center">
            <span className="text-sm text-gray-500">购买 IP 量</span>
            <span className="text-sm">
              {quota}
              个
            </span>
          </li>
        ) : (
          <>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">套餐时长</span>
              <span className="text-sm">
                {expire}
                天
              </span>
            </li>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">每日限额</span>
              <span className="text-sm">
                {dailyLimit}
                个
              </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>
      {profile ? (
        <>
          <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={method}
            amount={price}
            resource={{
              type: 2,
              long: {
                mode: Number(mode),
                live: Number(live),
                daily_limit: dailyLimit,
                expire: Number(expire),
                quota: quota,
              },
            }}/>
        </>
      ) : (
        <Link href="/login" className={buttonVariants()}>
          登录后支付
        </Link>
      )}
    </Card>
  )
}