// // @ts-nocheck
// import React from "react";
// import {
//   Form,
//   Input,
//   RadioGroup,
//   Radio,
//   CheckboxGroup,
//   Checkbox,
//   Card,
//   InputNumber,
//   Button,
// } from "@tencent/tea-component";

// import { Formik, Form as FormikForm, Field } from "formik";

// const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

// function getStatus(meta, submitCount) {
//   if (!meta?.touched && submitCount === 0) {
//     return null;
//   }
//   return meta?.error ? "error" : "success";
// }

// export default function FormWithReactFinalFormExample() {
//   async function onSubmit(values) {
//     await sleep(1500);
//     alert(JSON.stringify(values));
//   }

//   return (
//     <div className="example-stage">
//       <Card>
//         <Card.Body>
//           <Formik
//             validateOnChange
//             onSubmit={onSubmit}
//             initialValues={{
//               name: "",
//               age: 18,
//               hobbies: [],
//             }}
//           >
//             {({ handleSubmit, isValidating, isSubmitting, submitCount }) => {
//               console.log(submitCount);
//               return (
//                 <FormikForm onSubmit={handleSubmit}>
//                   <Form.Title>表单验证</Form.Title>
//                   <Form>
//                     <Field
//                       name="name"
//                       validate={async value => {
//                         await sleep(1500);
//                         console.log(value);
//                         return !value || value.length < 4
//                           ? "昵称太短了哦"
//                           : undefined;
//                       }}
//                     >
//                       {({ field, meta }) => {
//                         console.log(field, meta);
//                         return (
//                           <Form.Item
//                             label="昵称"
//                             status={
//                               isValidating
//                                 ? "validating"
//                                 : getStatus(meta, submitCount)
//                             }
//                             message={meta?.error}
//                           >
//                             <input
//                               {...field}
//                               autoComplete="off"
//                               placeholder="你是谁"
//                             />
//                           </Form.Item>
//                         );
//                       }}
//                     </Field>
//                     <Field
//                       name="sex"
//                       validate={value => (!value ? "请选择性别" : undefined)}
//                     >
//                       {({ field, meta }) => (
//                         <Form.Item
//                           label="性别"
//                           status={getStatus(meta, submitCount)}
//                           message={meta?.error}
//                         >
//                           <RadioGroup {...field}>
//                             <Radio name="male">男</Radio>
//                             <Radio name="female">女</Radio>
//                           </RadioGroup>
//                         </Form.Item>
//                       )}
//                     </Field>
//                     <Field
//                       name="age"
//                       validate={value =>
//                         value < 18 ? "你好像还未成年哦" : undefined
//                       }
//                     >
//                       {({ field, meta }) => (
//                         <Form.Item
//                           label="年龄"
//                           status={getStatus(meta, submitCount)}
//                           message={meta?.error}
//                         >
//                           <InputNumber {...field} min={12} max={100} />
//                         </Form.Item>
//                       )}
//                     </Field>
//                     <Field
//                       name="hobbies"
//                       validate={value =>
//                         value.length < 1 ? "请至少选择一个哦" : undefined
//                       }
//                     >
//                       {({ field, meta }) => (
//                         <Form.Item
//                           label="兴趣"
//                           status={getStatus(meta, submitCount)}
//                           message="选择一项或多项爱好"
//                         >
//                           <CheckboxGroup {...field}>
//                             <Checkbox name="code">编程</Checkbox>
//                             <Checkbox name="web">抠图</Checkbox>
//                             <Checkbox name="jinli">超越</Checkbox>
//                           </CheckboxGroup>
//                         </Form.Item>
//                       )}
//                     </Field>
//                   </Form>
//                   <Form.Action>
//                     <Button
//                       type="primary"
//                       htmlType="submit"
//                       loading={isSubmitting}
//                     >
//                       提交
//                     </Button>
//                   </Form.Action>
//                 </FormikForm>
//               );
//             }}
//           </Formik>
//         </Card.Body>
//       </Card>
//     </div>
//   );
// }