// import {
//   type Component,
//   type PropType,
//   type VNode,
//   computed,
//   defineComponent,
//   h,
//   ref,
// } from "vue";
// import { formProps } from "naive-ui/es/form/src/Form";
// import type { FormInst, LabelPlacement } from "naive-ui/es/form/src/interface";
// import {
//   NCascader,
//   NCheckbox,
//   NCheckboxGroup,
//   NDatePicker,
//   NForm,
//   NFormItemGi,
//   NGrid,
//   NInput,
//   NInputNumber,
//   NRadio,
//   NRadioGroup,
//   NSelect,
//   NSpace,
//   NTimePicker,
//   NTreeSelect,
//   type GridProps,
// } from "naive-ui";
// import type {
//   Fm,
//   FormItemOptions,
//   FormModelValue,
//   FormProInst,
//   FormProItemProps,
// } from "../src/indexface";

// export const formProProps = {
//   ...formProps,
//   labelWidth: {
//     type: [Number, String] as PropType<number | string>,
//   },
//   labelPlacement: {
//     type: String as PropType<LabelPlacement>,
//     default: "left",
//   },
//   value: {
//     type: Object as PropType<any>,
//   },
//   gridProps: {
//     type: Object as PropType<GridProps>,
//     default: {
//       cols: 1,
//       xGap: 8,
//       itemResponsive: true,
//       responsive: "self",
//     },
//   },
//   formItemOptions: {
//     type: Object as PropType<FormItemOptions<any>>,
//   },
// };

// export default defineComponent({
//   name: "FormPro",
//   props: formProProps,
//   emits: ["update:value"],
//   setup(props, { emit, expose }) {
//     //表单实例
//     const formRef = ref<FormInst>();
//     //表单值
//     const formModelValue = ref<FormModelValue>(props.value || {});

//     //初始化一些配置属性
//     const formOptions = computed<any>(() => {
//       if (!props.formItemOptions) {
//         return {};
//       }
//       return Object.fromEntries(
//         Object.entries(props.formItemOptions).map(([key, value]) => {
//           const item = { ...value };
//           item.path = key;
//           //设置默认校验规则
//           item.required &&
//             (item.rule = { required: true, message: `${item.label}不能为空` });
//           //初始化组件配置
//           !item.componentsProps && (item.componentsProps = {});
//           //设置提示词
//           !item.componentsProps.placeholder &&
//             (item.componentsProps.placeholder = item.type.includes("input")
//               ? `请输入${item.label}`
//               : `请选择${item.label}`);
//           //默认可清除
//           item.componentsProps?.clearable ??
//             (item.componentsProps.clearable = true);
//           return [key, item];
//         })
//       );
//     });

//     expose<FormProInst<any>>({
//       validate: () => formRef.value!.validate(),
//       restoreValidation: () => formRef.value!.restoreValidation(),
//     });
//     return () => (
//       <>
//         <NForm ref={formRef} {...props} model={formModelValue.value}>
//           <NGrid {...props.gridProps}>
//             {Object.entries(formOptions.value).map(([field, item]) => {
//               return (
//                 <NFormItemGi {...item} key={field}>
//                   {comps[item.type](formModelValue.value, field, item)}
//                 </NFormItemGi>
//               );
//             })}
//           </NGrid>
//         </NForm>
//       </>
//     );
//   },
// });

// const comps: Record<
//   keyof Fm,
//   (
//     modelValue: { [k in string]: any },
//     field: string,
//     itemProps: FormProItemProps<any, any>
//   ) => VNode
// > = {
//   custom: (modelValue, _, itemProps: FormProItemProps<any, "custom">) => {
//     if (itemProps.customRender) {
//       return itemProps.customRender(modelValue);
//     } else {
//       return h(itemProps.defineComponent as Component, {
//         modelValue,
//       });
//     }
//   },
//   input: (modelValue, field, itemProps: FormProItemProps<any, "input">) => {
//     return h(
//       NInput,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
//   inputNumber: (
//     modelValue,
//     field,
//     itemProps: FormProItemProps<any, "inputNumber">
//   ) => {
//     return h(
//       NInputNumber,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
//   radioGroup: (
//     modelValue,
//     field,
//     itemProps: FormProItemProps<any, "radioGroup">
//   ) => {
//     return h(
//       NRadioGroup,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         default: () => (
//           <NSpace>
//             {itemProps.options?.map((o) => {
//               return (
//                 //@ts-ignore 这里类型检查会有问题 其实没有问题
//                 <NRadio key={o.value} value={o.value}>
//                   {o.label}
//                 </NRadio>
//               );
//             })}
//           </NSpace>
//         ),
//       }
//     );
//   },
//   checkboxGroup: (
//     modelValue,
//     field,
//     itemProps: FormProItemProps<any, "checkboxGroup">
//   ) => {
//     return h(
//       NCheckboxGroup,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         default: () => {
//           return (
//             <NSpace>
//               {itemProps.options?.map((o) => {
//                 return (
//                   //@ts-ignore 这里类型检查会有问题 其实没有问题
//                   <NCheckbox key={o.value} value={o.value} label={o.label} />
//                 );
//               })}
//             </NSpace>
//           );
//         },
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
//   select: (modelValue, field, itemProps: FormProItemProps<any, "select">) => {
//     return h(
//       NSelect,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
//   treeSelect: (
//     modelValue,
//     field,
//     itemProps: FormProItemProps<any, "treeSelect">
//   ) => {
//     return h(
//       NTreeSelect,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
//   cascader: (
//     modelValue,
//     field,
//     itemProps: FormProItemProps<any, "cascader">
//   ) => {
//     return h(
//       NCascader,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
//   datePicker: (
//     modelValue,
//     field,
//     itemProps: FormProItemProps<any, "datePicker">
//   ) => {
//     return h(
//       NDatePicker,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
//   timePicker: (
//     modelValue,
//     field,
//     itemProps: FormProItemProps<any, "timePicker">
//   ) => {
//     return h(
//       NTimePicker,
//       {
//         style: {
//           width: "100%",
//         },
//         ...itemProps.componentsProps,
//         value: modelValue[field],
//         "onUpdate:value": (val) => (modelValue[field] = val),
//       },
//       {
//         ...itemProps.componentsSlots,
//       }
//     );
//   },
// };
