import snippets from './snippets';

export default {
  componentName: 'AMSwiper',
  docUrl: 'https://mobile.ant.design/zh/components/swiper',
  title: '走马灯',
  category: '数据展示',
  group: '基础组件',
  props: [
    {
    name: 'items',
    title: { label: '内容', 
      tip: 'items | 走马灯轮播内容'
     },
    setter: {
      componentName: 'ArraySetter',
      props: {
        itemSetter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'children',
                  title: {
                    label: '内容',
                    tip: 'children | 内容',
                  },
                  propType: 'node',
                  setter: {
                    componentName: 'SlotSetter',
                    title: '自定义插槽',
                    isRequired: true,
                    initialValue: {
                      type: 'JSSlot',
                      value: [
                        {
                          componentName: 'AMImage',
                          props: {
                            src: 'https://img.freepik.com/free-photo/landscape-with-mountains-blue-sky_1340-23021.jpg?w=1380&t=st=1685434221~exp=1685434821~hmac=109fc377f2f8e0aca560a522fcc54824ea76b381e4eb9a6c40df1b8a9e813b8f',
                            height: 200,
                            fit:'cover',
                          },
                        },
                      ],
                    },
                  },
                },
                {
                  name: 'onclick',
                  title: { label: '点击滑块触发',
                     tip: 'onclick | 点击滑块时触发'
                     },
                  setter: [
                    {
                      componentName: 'FunctionSetter',
                      props: {
                        template: 'onclick_swiper(){ \n //点击滑块时触发\n}',
                      },
                    },
                  ],
                },
              ],
            },
          },
        },
      },
    },
  },
  {
    title: '设置',
    display: 'block',
    type: 'group',
    items: [
      {
        name: 'allowTouchMove',
        title: {
          label: '手势滑动',
          tip: 'allowTouchMove | 是否允许手势滑动',
        },
        propType: 'bool',
        defaultValue: true,
        setter: 'BoolSetter',
      },
      {
        name: 'autoplay',
        title: {
          label: '自动切换',
          tip: 'autoplay | 是否自动切换',
        },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'autoplayInterval',
        title: {
          label: '自动切换间隔',
          tip: 'autoplayInterval | 自动切换的间隔，单位为 ms,默认3000ms',
        },
        propType: 'number',
        setter: 'NumberSetter',
        defaultValue: 3000,
      },
      {
        name: 'defaultIndex',
        title: {
          label: '初始位置',
          tip: 'defaultIndex | 初始位置',
        },
        propType: 'number',
        setter: 'NumberSetter',
        defaultValue: 0,
      },
      {
        name: 'direction',
        title: { label: '方向',
           tip: 'direction | 方向，默认是水平方向',
        },
        propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
        setter: [
          {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                {
                  title: '水平',
                  value: 'horizontal',
                },
                {
                  title: '垂直',
                  value: 'vertical',
                }
              ],
            },
          },
          'VariableSetter',
        ],
        defaultValue: 'horizontal',
      },
      {
        name: 'loop',
        title: {
          label: '循环',
          tip: 'loop | 是否循环',
        },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'rubberband',
        title: {
          label: '启用橡皮筋效果',
          tip: 'rubberband | 是否在拖动超出内容区域时启用橡皮筋效果，仅在非 loop 模式下生效',
        },
        propType: 'bool',
        defaultValue: true,
        setter: 'BoolSetter',
      },
      {
        name: 'slideSize',
        title: {
          label: '滑块宽度百分比',
          tip: 'slideSize | 滑块的宽度百分比',
        },
        propType: 'number',
        setter: 'NumberSetter',
        defaultValue: 100,
      },
      {
        name: 'trackOffset',
        title: {
          label: '滑块轨道偏移百分比',
          tip: 'trackOffset | 滑块轨道整体的偏移量百分比',
        },
        propType: 'number',
        setter: 'NumberSetter',
        defaultValue: 0,
      },
     {
        name: 'stopPropagation',
        title: {
          label: '阻止事件的冒泡',
          tip: 'stopPropagation | 阻止某些事件的冒泡',
        },
        propType: {
          type: 'oneOf',
          value: ['mouseup', 'mousemove', 'mousedown'],
        },
        setter: [
          {
            componentName: 'SelectSetter',
            props: {
              options: [
                {
                  title: '鼠标释放',
                  value: 'mouseup',
                },
                {
                  title: '鼠标移动',
                  value: 'mousemove',
                },
                {
                  title: '鼠标按下',
                  value: 'mousedown',
                },
              ],
            },
          },
          'VariableSetter',
        ],
        defaultValue: [],
      },
    ]},
 

  ],
  configure: {
    component: {
      isContainer: true,
      nestingRule: { childWhitelist: ['AMSwiper.Item'] } 
    },
    supports: {
      events: [
        {
          name: 'indicator',
          description: '自定义指示器',
          template: "indicator(total,current,${extParams}){\n// 自定义指示器\nconsole.log('indicator');}",
        },
        {
          name: 'onIndexChange',
          description: '切换时触发',
          template: "onIndexChange(index,${extParams}){\n// 切换时触发\nconsole.log('onIndexChange');}",
        },
      ],
      style: true,
    },
  },
  snippets,
};