import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const FormMeta: IPublicTypeComponentMetadata = {
  componentName: 'Form',
  title: '表单',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '自定义表单组件',
  group: '精选组件',
  npm: {
    package: 'temp-materials',
    version: '0.1.2',
    exportName: 'Form',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'column',
        title: {
          label:'布局',
          tip:'统一设表单内组件的布局模式,优先度低于表单组件内部的布局属性'
        },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              { title: '一栏', value: 1 },
              { title: '两栏', value: 2 },
            ],
          },
        },
      },
      {
        name: 'size',
        title: {
          label:'表单尺寸',
          tip:'统一设置表单内部表单组件的尺寸'
        },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              { title: '小', value: 'small' },
              { title: '中', value: 'middle' },
              { title: '大', value: 'large' },
            ],
          },
        },
      },
      {
        name: 'layout',
        title: {
          label:'表单布局',
          tip:'设置表单项文本和表单项组件的布局模式'
        },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              { title: '水平布局', value: 'horizontal' },
              { title: '垂直布局', value: 'vertical' },
            ],
          },
        },
      },
      // {
      //   name: 'labelAlign',
      //   title: '标签位置',
      //   setter: {
      //     componentName: 'RadioGroupSetter',
      //     props: {
      //       options: [
      //         { title: '左边', value: 'left' },
      //         { title: '右边', value: 'right' },
      //       ],
      //     },
      //   },
      // },
    ],
    supports: {
      // style: true,
    },
    component: {
      isContainer: true,
      nestingRule: {
        childWhitelist: [
          'FormAnnexUpload',
          'FormCascaderSingle',
          'FormCascaderMultiple',
          'FormCheckbox',
          'FormDatePicker',
          'FormImageUpload',
          'FormInput',
          'FormMultipleSelect',
          'FormNumber',
          'FormRadio',
          'FormRangeDatePicker',
          'FormRate',
          'FormRichText',
          'FormSelect',
          'FormTextArea',
          'FormChildren',
          'FormCreator',
          'FormOrganizationalTree',
          'FormPersonnel',
        ],
      },
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '表单',
    screenshot: '',
    schema: {
      componentName: 'Form',
      props: {
        size: 'middle',
        labelAlign: 'left',
        layout: 'vertical',
        column: 1,
      },
    },
  },
];

export default {
  ...FormMeta,
  snippets,
};