import snippets from "./snippets";

export default {
  snippets,
  componentName: "PisellCustomCheckboxGroup",
  title: "自定义选项卡",
  category: "数据展示",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "PisellCustomCheckboxGroup",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    // {
    //   title: '数据源',
    //   display: 'block',
    //   type: 'group',
    //   items: [

    //   ],
    // },

    {
      name: 'dataSource',
      title: { label: '列表数据源', tip: 'dataSource | 列表数据源' },
      propType: { type: 'arrayOf', value: 'any' },
      setter: ['JsonSetter', 'VariableSetter'],
    },
    // {
    //   name: 'loading',
    //   title: {
    //     label: '是否加载中',
    //     tip: 'loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位',
    //   },
    //   propType: 'bool',
    //   defaultValue: false,
    //   setter: ['BoolSetter', 'VariableSetter'],
    // },
    {
      name: 'rowKey',
      title: {
        label: '行Key',
        tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
      },
      propType: {
        type: 'oneOfType',
        value: ['string', 'function'],
      },
      defaultValue: 'id',
      setter: [
        'StringSetter',
        {
          componentName: 'FunctionSetter',
          props: {
            template:
              'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'disabled',
      title: { label: '禁用选择', tip: 'disabled | 是否禁用选择' },
      propType: 'boolean',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'isMultiple',
      title: { label: '是否多选', tip: 'isMultiple | 是否多选' },
      propType: 'boolean',
      setter: 'BoolSetter',
    },
    {
      name: "value",
      title: { label: "Value", tip: "value | 当前选中的值" },
      propType: "string",
      setter: "StringSetter",
    },
    {
      name: 'allowAdd',
      title: { label: '允许添加', tip: 'allowAdd | 是否允许添加' },
      propType: 'boolean',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    // {
    //   title: '栅格  ',
    //   display: 'block',
    //   type: 'group',
    //   items: [
    //     {
    //       name: 'columns',
    //       title: { label: '列数', tip: 'columns | 列数' },
    //       propType: 'number',
    //       setter: 'NumberSetter',
    //       defaultValue: 3,
    //     },
    //     {
    //       name: 'horizontalGap',
    //       title: { label: '水平间隔', tip: 'horizontalGap | 栅格水平间隔，单位为像素(px)' },
    //       propType: 'number',
    //       setter: {
    //         componentName: 'NumberSetter', props: {
    //           min: 0,
    //         },
    //       },
    //       defaultValue: 10,
    //     },
    //     {
    //       name: 'verticalGap',
    //       title: { label: '垂直间隔', tip: 'verticalGap | 栅格垂直间隔，单位为像素(px)' },
    //       propType: 'number',
    //       setter: {
    //         componentName: 'NumberSetter',
    //         props: {
    //           min: 0,
    //         },
    //       },
    //       defaultValue: 10,
    //     },
    //     {
    //       name: 'singleRow',
    //       title: { label: '一行展示', tip: 'singleRow | 一行展示' },
    //       propType: 'boolean',
    //       defaultValue: false,
    //       setter: 'BoolSetter',
    //     },
    //   ]
    // },
    // {
    //   title: '扩展',
    //   display: 'block',
    //   type: 'group',
    //   items: [
    //     {
    //       name: 'renderItem',
    //       title: {
    //         label: '渲染函数',
    //         tip: 'renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项',
    //       },
    //       propType: 'func',
    //       setter: [
    //         {
    //           componentName: 'SlotSetter',
    //           title: '渲染函数插槽',
    //           initialValue: {
    //             type: 'JSSlot',
    //             params: ['item'],
    //             value: [
    //               {
    //                 componentName: 'List.Item',
    //                 props: {},
    //                 children: {
    //                   componentName: 'Typography.Text',
    //                   props: {
    //                     children: {
    //                       type: 'JSExpression',
    //                       value: 'this.item.text',
    //                     },
    //                   },
    //                 },
    //               },
    //             ],
    //           },
    //         },
    //         {
    //           componentName: 'FunctionSetter',
    //           props: {
    //             template: 'renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}',
    //           },
    //         },
    //         'VariableSetter',
    //       ],
    //     },
    //   ],
    // }
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template: 'onChange(value,${extParams}){\n// 选中值改变时的回调\nconsole.log("value",value);\n}',
        },
        {
          name: 'onAdd',
          template: 'onAdd(${extParams}){\n// 点击添加按钮时的回调\n}',
        },
      ],
    },
    component: {
      isContainer: true,
    },
  },
};