import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellImageCarousels',
  title: '轮播图',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellImageCarousels',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      title: '数据源',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'dataSource',
          title: { label: '列表数据源', tip: '列表数据源' },
          propType: { type: 'arrayOf', value: 'any' },
          setter: ['JsonSetter', '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',
          ],
        },
      ],
    },
    {
      title: '轮播设置',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'showDots',
          title: { label: '显示翻页点', tip: 'showDots | 显示翻页点' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showArrows',
          title: { label: '显示箭头', tip: 'showArrows | 显示箭头' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'autoplay',
          title: { label: '自动切换', tip: 'autoplay | 自动切换' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'interval',
          title: { label: '切换的间隔 (毫秒)', tip: 'interval | 切换的间隔 (毫秒)' },
          setter: {
            componentName: "NumberSetter",
            props: {
              min: 0,
            },
          },
          defaultValue: 3000,
        },
      ],
    },
    {
      title: '图片设置',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'borderRadius',
          title: { label: '圆角度数', tip: 'borderRadius | 圆角度数' },
          setter: {
            componentName: "NumberSetter",
            props: {
              min: 0,
            },
          },
          defaultValue: 8,
        },
        {
          name: 'width',
          title: { label: '图片宽度', tip: 'width | 图片宽度' },
          setter: {
            componentName: "NumberSetter",
            props: {
              min: 0,
            },
          },
          defaultValue: 640,
        },
        {
          name: 'height',
          title: { label: '图片高度', tip: 'height | 图片高度' },
          setter: {
            componentName: "NumberSetter",
            props: {
              min: 0,
            },
          },
          defaultValue: 400,
        },
      ],
    },
  ],

  configure: {
    supports: {
      style: true,
      events: [],
    },
  },
};