dros/src/pages/patient/components/register.form.tsx

import React, { useEffect, useRef } from 'react';
import {
  Form,
  Input,
  DatePicker,
  InputNumber,
  Select,
  Radio,
  FormInstance,
} from 'antd';
import { useIntl, FormattedMessage } from 'react-intl';
import { registerFormFields } from '@/validation/patient/registerSchema';
import NumberWithUnit from '@/components/NumberWithUnit';
import dayjs, { Dayjs } from 'dayjs';
import { useSelector } from 'react-redux';
import { RootState } from '@/states/store';

const genderOptions = [
  {
    value: 'male',
    label: (
      <FormattedMessage
        id="register.gender.male"
        defaultMessage="register.gender.male"
      />
    ),
  },
  {
    value: 'female',
    label: (
      <FormattedMessage
        id="register.gender.female"
        defaultMessage="register.gender.female"
      />
    ),
  },
];

const pregnancyStatusOptions = [
  {
    value: 'yes',
    label: (
      <FormattedMessage
        id="register.pregnancyStatus.yes"
        defaultMessage="register.pregnancyStatus.yes"
      />
    ),
  },
  {
    value: 'no',
    label: (
      <FormattedMessage
        id="register.pregnancyStatus.no"
        defaultMessage="register.pregnancyStatus.no"
      />
    ),
  },
  {
    value: 'na',
    label: (
      <FormattedMessage
        id="register.pregnancyStatus.na"
        defaultMessage="register.pregnancyStatus.na"
      />
    ),
  },
];

interface BasicInfoFormProps {
  style?: React.CSSProperties;
  form?: FormInstance;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onValuesChange?: (changedValues: any, allValues: any) => void;
}
const BasicInfoForm: React.FC<BasicInfoFormProps> = ({
  style,
  form,
  onValuesChange,
}) => {
  // 使用 ref 记录更新源，防止循环触发
  const updateSourceRef = useRef<'age' | 'dob' | null>(null);

  const patient_age = Form.useWatch('patient_age', form);
  const patient_dob = Form.useWatch('patient_dob', form);

  const productName = useSelector(
    (state: RootState) => state.product.productName
  );

  const intl = useIntl();

  // 根据年龄计算出生日期
  const calculateDobFromAge = (age: {
    number: number;
    unit: 'D' | 'M' | 'Y';
  }): Dayjs => {
    const now = dayjs();
    switch (age.unit) {
      case 'D':
        return now.subtract(age.number, 'day');
      case 'M':
        return now.subtract(age.number, 'month');
      case 'Y':
        return now.subtract(age.number, 'year');
      default:
        return now;
    }
  };

  // 根据出生日期计算年龄
  const calculateAgeFromDob = (
    dob: Dayjs
  ): { number: number; unit: 'D' | 'M' | 'Y' } => {
    const now = dayjs();

    const years = now.diff(dob, 'year');
    if (years >= 1) {
      return { number: years, unit: 'Y' };
    }

    const months = now.diff(dob, 'month');
    if (months >= 1) {
      return { number: months, unit: 'M' };
    }

    const days = now.diff(dob, 'day');
    return { number: Math.max(0, days), unit: 'D' };
  };

  // 监听年龄变化
  useEffect(() => {
    // 如果是出生日期联动更新的年龄，跳过
    if (updateSourceRef.current === 'dob') {
      updateSourceRef.current = null;
      return;
    }

    // 如果年龄有效，计算出生日期
    if (patient_age && patient_age.number >= 0 && form) {
      updateSourceRef.current = 'age';
      const newDob = calculateDobFromAge(patient_age);
      form.setFieldsValue({ patient_dob: newDob });
      console.log('年龄变化，更新出生日期:', newDob.format('YYYY-MM-DD'));
    }
  }, [patient_age, form]);

  // 监听出生日期变化
  useEffect(() => {
    // 如果是年龄联动更新的出生日期，跳过
    if (updateSourceRef.current === 'age') {
      updateSourceRef.current = null;
      return;
    }

    // 如果出生日期有效，计算年龄
    if (patient_dob && dayjs.isDayjs(patient_dob) && form) {
      updateSourceRef.current = 'dob';
      const newAge = calculateAgeFromDob(patient_dob);
      form.setFieldsValue({ patient_age: newAge });
      console.log('出生日期变化，更新年龄:', newAge);
    }
  }, [patient_dob, form]);
  return (
    <Form
      form={form}
      layout="vertical"
      style={style}
      className="px-2"
      initialValues={{
        patient_dob: dayjs(),
      }}
      onValuesChange={onValuesChange}
    >
      {/** 宠物专用 */}
      {productName === 'VETDROS' && (
        <Form.Item
          label={
            <FormattedMessage
              id="register.owner_name"
              defaultMessage="register.owner_name"
            />
          }
          name="owner_name"
          required={registerFormFields.owner_name.required}
          validateTrigger={registerFormFields.owner_name.trigger}
          rules={registerFormFields.owner_name.validation}
        >
          <Input
            placeholder={intl.formatMessage({
              id: 'register.owner_name.placeholder',
              defaultMessage: 'register.owner_name.placeholder',
            })}
          />
        </Form.Item>
      )}
      <Form.Item
        label={
          <FormattedMessage
            id="register.accessionNumber"
            defaultMessage="register.accessionNumber"
          />
        }
        name="accession_number"
        required={registerFormFields.accession_number.required}
        validateTrigger={registerFormFields.accession_number.trigger}
        rules={registerFormFields.accession_number.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.accessionNumber.placeholder',
            defaultMessage: 'register.accessionNumber.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.patientId"
            defaultMessage="register.patientId"
          />
        }
        name="patient_id"
        required={registerFormFields.patient_id.required}
        validateTrigger={registerFormFields.patient_id.trigger}
        rules={registerFormFields.patient_id.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.patientId.placeholder',
            defaultMessage: 'register.patientId.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.patientName"
            defaultMessage="register.patientName"
          />
        }
        name="patient_name"
        required={registerFormFields.patient_name.required}
        validateTrigger={registerFormFields.patient_name.trigger}
        rules={registerFormFields.patient_name.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.patientName.placeholder',
            defaultMessage: 'register.patientName.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.patientSize"
            defaultMessage="register.patientSize"
          />
        }
        name="patient_size"
        required={registerFormFields.patient_size.required}
        validateTrigger={registerFormFields.patient_size.trigger}
        rules={registerFormFields.patient_size.validation}
        initialValue="Medium"
      >
        <Select
          placeholder={intl.formatMessage({
            id: 'register.patientSize.placeholder',
            defaultMessage: 'register.patientSize.placeholder',
          })}
          defaultValue="Medium"
        >
          <Select.Option value="Large">Large</Select.Option>
          <Select.Option value="Medium">Medium</Select.Option>
          <Select.Option value="Small">Small</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage id="register.age" defaultMessage="register.age" />
        }
        name="patient_age"
        required={registerFormFields.patient_age.required}
        validateTrigger={registerFormFields.patient_age.trigger}
        rules={registerFormFields.patient_age.validation}
        initialValue={{ number: 0, unit: 'Y' }}
      >
        <NumberWithUnit
          align="baseline"
          defaultUnit="Y"
          defaultNumber={0}
          unitClassName="w-full"
          numberClassName="w-full"
          className="w-full"
          options={[
            { label: '天', value: 'D' },
            { label: '月', value: 'M' },
            { label: '年', value: 'Y' },
          ]}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.dateOfBirth"
            defaultMessage="register.dateOfBirth"
          />
        }
        name="patient_dob"
        required={registerFormFields.patient_dob.required}
        validateTrigger={registerFormFields.patient_dob.trigger}
        rules={registerFormFields.patient_dob.validation}
      >
        <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.gender"
            defaultMessage="register.gender"
          />
        }
        name="patient_sex"
        required={registerFormFields.patient_sex.required}
        validateTrigger={registerFormFields.patient_sex.trigger}
        rules={registerFormFields.patient_sex.validation}
      >
        <Select options={genderOptions} />
      </Form.Item>
      {/** 宠物专用 */}
      {productName === 'VETDROS' && (
        <Form.Item
          label={
            <FormattedMessage
              id="register.sexNeutered"
              defaultMessage="register.sexNeutered"
            />
          }
          name="sex_neutered"
          required={registerFormFields.sex_neutered.required}
          validateTrigger={registerFormFields.sex_neutered.trigger}
          rules={registerFormFields.sex_neutered.validation}
        >
          <Select
            defaultValue={'UNALTERED'}
            placeholder={intl.formatMessage({
              id: 'register.sexNeutered.placeholder',
              defaultMessage: 'register.sexNeutered.placeholder',
            })}
          >
            <Select.Option value="ALTERED">ALTERED (绝育)</Select.Option>
            <Select.Option value="UNALTERED">UNALTERED (未绝育)</Select.Option>
          </Select>
        </Form.Item>
      )}
      {/** 人类专用 */}
      {productName === 'DROS' && (
        <Form.Item
          label={
            <FormattedMessage
              id="register.pregnancyStatus"
              defaultMessage="register.pregnancyStatus"
            />
          }
          name="pregnancy_status"
          required={registerFormFields.pregnancy_status.required}
          validateTrigger={registerFormFields.pregnancy_status.trigger}
          rules={registerFormFields.pregnancy_status.validation}
        >
          <Radio.Group
            options={pregnancyStatusOptions}
            optionType="button"
            buttonStyle="solid"
          />
        </Form.Item>
      )}
      {/** 宠物专用 */}
      {productName === 'VETDROS' && (
        <Form.Item
          label={
            <FormattedMessage
              id="register.chipNumber"
              defaultMessage="register.chipNumber"
            />
          }
          name="chip_number"
          required={registerFormFields.chip_number.required}
          validateTrigger={registerFormFields.chip_number.trigger}
          rules={registerFormFields.chip_number.validation}
        >
          <Input
            placeholder={intl.formatMessage({
              id: 'register.chipNumber.placeholder',
              defaultMessage: 'register.chipNumber.placeholder',
            })}
          />
        </Form.Item>
      )}
      {/** 宠物专用 */}
      {productName === 'VETDROS' && (
        <Form.Item
          label={
            <FormattedMessage
              id="register.variety"
              defaultMessage="register.variety"
            />
          }
          name="variety"
          required={registerFormFields.variety.required}
          validateTrigger={registerFormFields.variety.trigger}
          rules={registerFormFields.variety.validation}
        >
          <Input
            placeholder={intl.formatMessage({
              id: 'register.variety.placeholder',
              defaultMessage: 'register.variety.placeholder',
            })}
          />
        </Form.Item>
      )}
      {/* <Form.Item
        label={
          <FormattedMessage
            id="register.patientType"
            defaultMessage="register.patientType"
          />
        }
        name="patient_type"
        required={registerFormFields.patient_type.required}
        validateTrigger={registerFormFields.patient_type.trigger}
        rules={registerFormFields.patient_type.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.patientType.placeholder',
            defaultMessage: 'register.patientType.placeholder',
          })}
        />
      </Form.Item> */}
      <Form.Item
        label={
          <FormattedMessage
            id="register.referringPhysician"
            defaultMessage="register.referringPhysician"
          />
        }
        name="ref_physician"
        required={registerFormFields.ref_physician.required}
        validateTrigger={registerFormFields.ref_physician.trigger}
        rules={registerFormFields.ref_physician.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.referringPhysician.placeholder',
            defaultMessage: 'register.referringPhysician.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.operatorId"
            defaultMessage="register.operatorId"
          />
        }
        name="operator_id"
        required={registerFormFields.operator_id.required}
        validateTrigger={registerFormFields.operator_id.trigger}
        rules={registerFormFields.operator_id.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.operatorId.placeholder',
            defaultMessage: 'register.operatorId.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.weight"
            defaultMessage="register.weight"
          />
        }
        name="weight"
        required={registerFormFields.weight.required}
        validateTrigger={registerFormFields.weight.trigger}
        rules={registerFormFields.weight.validation}
      >
        <InputNumber min={0} addonAfter="kg" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.thickness"
            defaultMessage="register.thickness"
          />
        }
        name="thickness"
        required={registerFormFields.thickness.required}
        validateTrigger={registerFormFields.thickness.trigger}
        rules={registerFormFields.thickness.validation}
      >
        <InputNumber min={0} addonAfter="cm" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.height"
            defaultMessage="register.height"
          />
        }
        name="length"
        required={registerFormFields.length.required}
        validateTrigger={registerFormFields.length.trigger}
        rules={registerFormFields.length.validation}
      >
        <InputNumber min={0} addonAfter="cm" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.comment"
            defaultMessage="register.comment"
          />
        }
        name="comment"
        required={registerFormFields.comment.required}
        validateTrigger={registerFormFields.comment.trigger}
        rules={registerFormFields.comment.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.comment.placeholder',
            defaultMessage: 'register.comment.placeholder',
          })}
        />
      </Form.Item>
    </Form>
  );
};

export default BasicInfoForm;