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

'use client'
import {Suspense, use, useEffect, useState} from 'react'
import {useProfileStore} from '@/components/stores/profile'
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, useWatch} from 'react-hook-form'
import {Schema} from '@/components/composites/purchase/long/form'
import {Card} from '@/components/ui/card'
import {getPrice} from '@/actions/resource'
import {ExtraResp} from '@/lib/api'
import {FieldPayment} from '../shared/field-payment'

export default function Right() {
  const {control} = useFormContext<Schema>()
  const method = useWatch({control, name: 'pay_type'})
  const mode = useWatch({control, name: 'type'})
  const live = useWatch({control, name: 'live'})
  const quota = useWatch({control, name: 'quota'})
  const expire = useWatch({control, name: 'expire'})
  const dailyLimit = useWatch({control, name: 'daily_limit'})
  const [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>({
    price: '0.00',
    discounted_price: '0.00',
    discounted: 0,
  })

  useEffect(() => {
    const price = async () => {
      try {
        const resp = await getPrice({
          type: 2,
          long: {
            live: Number(live),
            mode: Number(mode),
            quota: mode === '1' ? Number(dailyLimit) : Number(quota),
            expire: mode === '1' ? Number(expire) : undefined,
          },
        })
        if (!resp.success) {
          throw new Error('获取价格失败')
        }

        setPriceData({
          price: resp.data.price,
          discounted_price: resp.data.discounted_price ?? resp.data.price ?? '',
          discounted: resp.data.discounted,
        })
      }
      catch (error) {
        setPriceData({
          price: '0.00',
          discounted_price: '0.00',
          discounted: 0,
        })
      }
    }
    price()
  }, [dailyLimit, expire, live, quota, mode])

  const {price, discounted_price: discountedPrice = '', discounted} = priceData

  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">
                ￥{price}
              </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>
            <li className="flex justify-between items-center">
              <span className="text-sm text-gray-500">原价</span>
              <span className="text-sm">
                ￥{price}
              </span>
            </li>
            {discounted === 1 ? '' : (
              <li className="flex justify-between items-center">
                <span className="text-sm text-gray-500">总折扣</span>
                <span className="text-sm">
                  -￥{discounted}
                </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">
          ￥{discountedPrice}
        </span>
      </p>
      <Suspense>
        <BalanceOrLogin {...{method, discountedPrice, mode, live, quota, expire, dailyLimit}}/>
      </Suspense>
    </Card>
  )
}

function BalanceOrLogin(props: {
  method: 'wechat' | 'alipay' | 'balance'
  discountedPrice: string
  mode: string
  live: string
  quota: number
  expire: string
  dailyLimit: number
}) {
  const profile = use(useProfileStore(store => store.profile))
  return profile ? (
    <>
      {/* <FieldPayment/> */}
      <Pay
        method={props.method}
        balance={profile.balance}
        amount={props.discountedPrice}
        resource={{
          type: 2,
          long: {
            mode: Number(props.mode),
            live: Number(props.live),
            expire: Number(props.expire),
            quota: props.mode === '1' ? props.dailyLimit : props.quota,
          },
        }}/>
    </>
  ) : (
    <Link href="/login" className={buttonVariants()}>
      登录后支付
    </Link>
  )
}