web/src/components/composites/purchase/short/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 FormOption from '@/components/composites/purchase/option'
import Image from 'next/image'
import check from '../_assets/check.svg'
import {useFormContext, useWatch} from 'react-hook-form'
import {Schema} from '@/components/composites/purchase/short/form'
import {Card} from '@/components/ui/card'

export default function Center({
  priceMap,
  liveList,
  expireList,
}: {
  priceMap: Map<string, string>
  liveList: string[]
  expireList: string[]
}) {
  const form = useFormContext<Schema>()
  const type = useWatch({name: 'type'})
  const expire = useWatch({name: 'expire'})
  const isTime = type === '1'

  return (
    <Card className="flex-auto p-6 flex flex-col gap-6 relative">

      {/* 计费方式 */}
      <FormField<Schema, 'type'>
        className="flex flex-col gap-4"
        name="type"
        label="计费方式">
        {({id, field}) => (
          <RadioGroup
            id={id}
            value={field.value}
            onValueChange={(v) => {
              field.onChange(v)
              if (v === '2') {
                form.setValue('expire', '0')
              }
              else if (expireList.length > 0) {
                form.setValue('expire', expireList[0])
                form.setValue('daily_limit', 2000)
              }
            }}
            className="flex gap-4 max-md:flex-col">

            <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<Schema, 'live'>
        className="space-y-4"
        name="live"
        label="IP 时效">
        {({id, field}) => (
          <RadioGroup
            id={id}
            value={field.value}
            onValueChange={field.onChange}
            className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
            {liveList.map((live) => {
              const params = new URLSearchParams()
              params.set('mode', isTime ? 'time' : 'quota')
              params.set('live', live)
              params.set('expire', isTime ? expire : '0')
              const price = priceMap.get(params.toString())
              const minutes = Number(live)
              const hours = minutes / 60
              const label = minutes % 60 === 0 ? `${hours} 小时` : `${minutes} 分钟`
              return (
                <FormOption
                  key={live}
                  id={`${id}-${live}`}
                  value={live}
                  label={label}
                  description={price && `￥${price}${!isTime ? '/IP' : ''}`}
                  compare={field.value}
                />
              )
            })}
          </RadioGroup>
        )}
      </FormField>

      {/* 根据套餐类型显示不同表单项 */}
      {!isTime ? (
        /* 包量：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(10000, Number(field.value) - 5000))}
                disabled={Number(field.value) === 10000}>
                <Minus/>
              </Button>
              <Input
                {...field}
                id={id}
                type="number"
                className="w-40 h-10 border border-gray-200 rounded-sm text-center"
                min={10000}
                step={5000}
                onBlur={(e) => {
                  const value = Number(e.target.value)
                  if (value < 10000) {
                    form.setValue('quota', 10000)
                  }
                }}
              />
              <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) + 5000)}>
                <Plus/>
              </Button>
            </div>
          )}
        </FormField>
      ) : (
        <>
          {/* 包时：套餐时效 */}
          <FormField className="space-y-4" name="expire" label="套餐时效">
            {({id, field}) => (
              <RadioGroup id={id} value={field.value} onValueChange={field.onChange} className="flex gap-4 flex-wrap">
                {expireList.map(day => (
                  <FormOption
                    key={day}
                    id={`${id}-${day}`}
                    value={day}
                    label={`${day} 天`}
                    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(2000, Number(field.value) - 1000))}
                  disabled={Number(field.value) === 2000}>
                  <Minus/>
                </Button>
                <Input
                  {...field}
                  id={id}
                  type="number"
                  className="w-40 h-10 border border-gray-200 rounded-sm text-center"
                  min={2000}
                  step={1000}
                  onBlur={(e) => {
                    const value = Number(e.target.value)
                    if (value < 2000) {
                      form.setValue('daily_limit', 2000)
                    }
                  }}
                />
                <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) + 1000)}>
                  <Plus/>
                </Button>
              </div>
            )}
          </FormField>
        </>
      )}

      {/* 产品特性 */}
      <div className="space-y-6">
        <h3>产品特性</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 auto-rows-fr gap-4 md: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">包量/包时计费方式</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>
    </Card>
  )
}