<template>
  <FormPro ref="form" v-model:value="modelValue" :form-item-options="formOptions" />
  {{ modelValue }}
</template>
<script setup lang="tsx">
import { defineComponent, markRaw, reactive, useTemplateRef } from 'vue'
import { FormPro, type FormItemOptions, type FormProInst } from '@/components'

const formRef = useTemplateRef<FormProInst>('form')

interface A {
  name: string
  age: number
  info: string
  text: string
  text2: string
  like: string
  aaa: string[]
}

const modelValue = reactive<A>({
  name: 'zs',
  age: 12,
  info: 'asdsadas',
  text: '222',
  text2: '',
  like: '',
  aaa: [],
})

const formOptions = reactive<FormItemOptions<A>>({
  name: {
    type: 'input',
    label: '名字',
    componentsProps: {
      disabled: false,
    },
  },
  like: {
    type: 'radioGroup',
    label: '爱好',
    options: [
      {
        value: 0,
        label: '唱',
      },
      {
        value: 1,
        label: '跳',
      },
      {
        value: 2,
        label: 'rap',
      },
    ],
  },
  aaa: {
    type: 'checkboxGroup',
    label: 'aaa',
    options: [
      {
        value: 0,
        label: '唱',
      },
      {
        value: 1,
        label: '跳',
      },
      {
        value: 2,
        label: 'rap',
      },
    ],
  },
  age: {
    type: 'inputNumber',
    label: '年龄',
  },
  info: {
    type: 'input',
    label: '介绍',
    componentsProps: {},
    required: true,
  },
  text: {
    type: 'custom',
    label: '文件',
    customRender: (modelValue) => {
      return <n-input v-model:value={modelValue.text}></n-input>
    },
  },
  text2: {
    type: 'custom',
    label: '文件',
    defineComponent: markRaw(
      defineComponent(
        ({ modelValue }) => {
        
          return () => <n-input v-model:value={modelValue.text2}></n-input>
        },
        { props: ['modelValue'] }
      )
    ),
  },
})

setTimeout(() => {
  formOptions.name.componentsProps.disabled = true
}, 3000)
</script>
<style scoped></style>
