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

'use client'
import {FormField} from '@/components/ui/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {Input} from '@/components/ui/input'
import {Button} from '@/components/ui/button'
import {Minus, Plus} from 'lucide-react'
import {PurchaseFormContext, Schema} from '@/components/composites/purchase/_client/form'
import {useContext} from 'react'
import FormOption from '@/components/composites/purchase/_client/option'
import Image from 'next/image'
import check from '@/components/composites/purchase/_assets/check.svg'

export default function Center() {

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

  const watchType = form.watch('type')

  return (
    <div className={`flex-auto p-8 flex flex-col gap-8 relative`}>

      {/* 计费方式 */}
      <FormField
        className={`flex flex-col gap-4`}
        name={`type`}
        label={`计费方式`}>
        {({id, field}) => (
          <RadioGroup
            id={id}
            defaultValue={field.value}
            onValueChange={field.onChange}
            className={`flex gap-4`}>

            <FormOption
              id={`${id}-2`}
              value="2"
              label="包量套餐"
              description="适用于短期或不定期高提取业务场景"
              compare={field.value}/>

            <FormOption
              id={`${id}-1`}
              value="1"
              label="包时套餐"
              description="适用于每日提取量稳定的业务场景"
              compare={field.value}/>

          </RadioGroup>
        )}
      </FormField>

      {/* IP 时效 */}
      <FormField
        className={`space-y-4`}
        name={`live`}
        label={`IP 时效`}>
        {({id, field}) => (
          <RadioGroup
            id={id}
            defaultValue={field.value}
            onValueChange={field.onChange}
            className={`flex gap-4 flex-wrap`}>

            <FormOption id={`${id}-3`} value="3" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
            <FormOption id={`${id}-5`} value="5" label="5 分钟" description="￥0.007/IP" compare={field.value}/>
            <FormOption id={`${id}-10`} value="10" label="10 分钟" description="￥0.010/IP" compare={field.value}/>
            <FormOption id={`${id}-20`} value="20" label="20 分钟" description="￥0.015/IP" compare={field.value}/>
            <FormOption id={`${id}-30`} value="30" label="30 分钟" description="￥0.020/IP" compare={field.value}/>
          </RadioGroup>
        )}
      </FormField>

      {/* 根据套餐类型显示不同表单项 */}
      {watchType === '2' ? (
        /* 包量：IP 购买数量 */
        <FormField
          className={`space-y-4`}
          name={`quota`}
          label={`IP 购买数量`}>
          {({id, field}) => (
            <div className={`flex gap-2 items-center`}>
              <Button
                theme={`outline`}
                type="button"
                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
                onClick={() => form.setValue('quota', Math.max(10_000, Number(field.value) - 5_000))}
                disabled={Number(field.value) === 10_000}>
                <Minus/>
              </Button>
              <Input
                {...field}
                id={id}
                type="number"
                className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
                min={10_000}
                step={5_000}
              />
              <Button
                theme={`outline`}
                type="button"
                className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
                onClick={() => form.setValue('quota', Number(field.value) + 5_000)}>
                <Plus/>
              </Button>
            </div>
          )}
        </FormField>
      ) : (
        <>
          {/* 包时：套餐时效 */}
          <FormField
            className={`space-y-4`}
            name={`expire`}
            label={`套餐时效`}>
            {({id, field}) => (
              <RadioGroup
                id={id}
                defaultValue={field.value}
                onValueChange={field.onChange}
                className={`flex gap-4 flex-wrap`}>

                <FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
                <FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
                <FormOption id={`${id}-30`} value="30" label="30天" compare={field.value}/>
                <FormOption id={`${id}-90`} value="90" label="90天" compare={field.value}/>
                <FormOption id={`${id}-180`} value="180" label="180天" compare={field.value}/>
                <FormOption id={`${id}-365`} value="365" label="365天" compare={field.value}/>
              </RadioGroup>
            )}
          </FormField>

          {/* 包时：每日提取上限 */}
          <FormField
            className={`space-y-4`}
            name={`daily_limit`}
            label={`每日提取上限`}>
            {({id, field}) => (
              <div className={`flex gap-2 items-center`}>
                <Button
                  theme={`outline`}
                  type="button"
                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
                  onClick={() => form.setValue('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
                  disabled={Number(field.value) === 2_000}>
                  <Minus/>
                </Button>
                <Input
                  {...field}
                  id={id}
                  type="number"
                  className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
                  min={2_000}
                  step={1_000}
                />
                <Button
                  theme={`outline`}
                  type="button"
                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg`}
                  onClick={() => form.setValue('daily_limit', Number(field.value) + 1_000)}>
                  <Plus/>
                </Button>
              </div>
            )}
          </FormField>
        </>
      )}

      {/* 产品特性 */}
      <div className={`space-y-6`}>
        <h3>产品特性</h3>
        <div className={`grid grid-cols-3 auto-rows-fr gap-y-6`}>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>支持高并发提取</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>指定省份、城市或混播</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>账密＋白名单验证</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>完备的API接口</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>IP时效3-30分钟(可定制)</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>IP资源定期筛选</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>完备的API接口</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>包量/包时计费方式</span>
          </p>
          <p className={`flex gap-2 items-center`}>
            <Image src={check} alt={`check`} aria-hidden className={`w-4 h-4`}/>
            <span className={`text-sm text-gray-500`}>每日去重量：500万</span>
          </p>
        </div>
      </div>
    </div>
  )
}