web/src/components/composites/purchase/shared/billing-method-field.tsx

'use client'

import {useFormContext} from 'react-hook-form'
import {FormField} from '@/components/ui/form'
import {RadioGroup} from '@/components/ui/radio-group'
import FormOption from '../option'
import {PurchaseMode} from './resource'
import {PurchaseFormValues} from './form-values'

export function BillingMethodField(props: {
  modeList: PurchaseMode[]
  timeDailyLimit: number
}) {
  const {setValue, getValues} = useFormContext<PurchaseFormValues>()

  return (
    <FormField<PurchaseFormValues, 'type'>
      className="flex flex-col gap-4"
      name="type"
      label="计费方式"
    >
      {({id, field}) => (
        <RadioGroup
          id={id}
          value={field.value}
          onValueChange={(value) => {
            field.onChange(value)

            if (value === '2') {
              setValue('expire', '0')
              return
            }
            setValue('expire', getValues('expire') || '0')
          }}
          className="flex gap-4 max-md:flex-col"
        >

          {props.modeList.includes('1') && (
            <FormOption
              id={`${id}-1`}
              value="1"
              label="包时套餐"
              description="适用于每日提取量稳定的业务场景"
              compare={field.value}
            />
          )}
          {props.modeList.includes('2') && (
            <FormOption
              id={`${id}-2`}
              value="2"
              label="包量套餐"
              description="适用于短期或不定期高提取业务场景"
              compare={field.value}
            />
          )}
        </RadioGroup>
      )}
    </FormField>
  )
}