import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { default as OptionSetter } from '../setter/OptionSetter';
import RuleSetter from '../setter/RuleSetter';

const FormMultipleSelectMeta: IPublicTypeComponentMetadata = {
  componentName: 'FormMultipleSelect',
  title: '下拉复选',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '表单组件',
  group: '精选组件',
  npm: {
    package: 'temp-materials',
    version: '0.1.2',
    exportName: 'FormMultipleSelect',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: '标题',
          tip: '表单项名称,后续生成表格时,转化为表格列名',
        },
        name: 'title',
        setter: 'StringSetter',
        defaultValue: '下拉复选',
      },
      // 列数
      {
        title: {
          label: '列数',
          tip: '设置组件自身的布局,可选择继承表单组件的值,有限度高于表单组件布局属性',
        },
        name: 'column',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '一栏',
                value: 24,
              },
              {
                label: '两栏',
                value: 12,
              },
              {
                label: '继承',
                value: 0,
              },
            ],
          },
        },
      },
      // 状态
      {
        title: {
          label: '状态',
          tip: '禁用模式禁止用户手动录入参数',
        },
        name: 'status',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '普通',
                value: 'normal',
              },
              {
                label: '只读',
                value: 'readonly',
              },
            ],
          },
          isRequired: true,
          initialValue: 'normal',
        },
      },
      // 是否支持清除
      {
        title: {
          label: '清除按钮',
          tip: '是否显示清除按钮',
        },
        name: 'allowClear',
        setter: 'BoolSetter',
      },
      // 是否支持可搜索
      {
        title: {
          label: '可搜索',
          tip: '是否支持可搜索',
        },
        name: 'showSearch',
        setter: 'BoolSetter',
      },
      // 是否展示边框
      {
        title: {
          label: '边框',
          tip: '组件是否显示边框',
        },
        name: 'bordered',
        setter: 'BoolSetter',
      },
      // 是否展示下拉小箭头
      {
        title: {
          label: '下拉箭头',
          tip: '是否显示下拉小箭头',
        },
        name: 'showArrow',
        setter: 'BoolSetter',
      },
      // 是否展示下拉小箭头
      {
        title: {
          label: '文本长度',
          tip: '选项标签文本可显示最大长度',
        },
        name: 'maxTagTextLength',
        setter: 'NumberSetter',
      },
      // 是否展示下拉小箭头
      {
        title: {
          label: '标签数量',
          tip: '选择框内可展示的最大标签数量',
        },
        name: 'maxTagCount',
        setter: 'NumberSetter',
      },
      {
        title: {
          label: '占位文本',
          tip: '选项为空时展示的文本',
        },
        name: 'placeholder',
        setter: 'StringSetter',
      },
      // 选项类型
      {
        display: 'block',
        title: {
          label: '选项类型',
          tip: '可通过手动录入,api调用等方式设置选项',
        },
        name: 'options',
        setter: {
          componentName: OptionSetter,
          props: {
            type: 'checkbox',
          },
        },
      },
      {
        display: 'block',
        title: {
          label: '校验',
          tip: '可选择内置的校验规则',
        },
        name: 'rules',
        setter: {
          componentName: RuleSetter,
          props: {
            type: ['REQUIRED', 'MAXLEN'],
          },
        },
      },
    ],
    supports: {
      // style: true,
    },
    component: {
      nestingRule: {
        parentWhitelist: ['Form'],
      },
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '下拉复选',
    screenshot: '',
    schema: {
      componentName: 'FormMultipleSelect',
      props: {
        // 后端识别类型
        fieldType: 'array',
        showSearch: true,
        bordered: true,
        showArrow: true,
        allowClear: true,
        status: 'normal',
        maxTagCount: 5,
      },
    },
  },
];

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