import snippets from './snippets';

export default {
  snippets,
  componentName: 'Carousel',
  title: '走马灯',
  category: '数据展示',
  group: "基础组件",
  props: [
    {
      name: 'autoplay',
      title: { label: '是否自动切换', tip: 'autoplay | 是否自动切换' },
      propType: 'bool',
      defaultValue: false,
    },
    // {
    //   name: 'afterChange',
    //   title: { label: '切换面板的回调', tip: 'afterChange | 切换面板的回调' },
    //   propType: 'func',
    //   setter: [
    //     {
    //       componentName: 'FunctionSetter',
    //       props: {
    //         template: 'afterChange(current, ${extParams}){\nconsole.log(current);\n}',
    //       },
    //     },
    //   ],
    // },
    // {
    //   name: 'beforeChange',
    //   title: { label: '切换面板的回调', tip: 'beforeChange | 切换面板的回调' },
    //   propType: 'func',
    //   setter: [
    //     {
    //       componentName: 'FunctionSetter',
    //       props: {
    //         template: 'beforeChange(current, next){\nconsole.log(current, next)}',
    //       },
    //     },
    //   ],
    // },
    {
      name: 'dotPosition',
      title: {
        label: '指示点位置',
        tip: 'dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right`',
      },
      propType: {
        type: 'oneOf',
        value: ['top', 'bottom', 'left', 'right'],
      },
    },
    {
      name: 'dots',
      title: {
        label: '显示指示点',
        tip: 'dots | 是否显示面板指示点',
      },
      propType: 'bool',
    },
    {
      name: 'effect',
      title: { label: '动画效果函数', tip: 'effect | 动画效果函数' },
      propType: { type: 'oneOf', value: ['scrollx', 'fade'] },
    },
    {
      name: 'items',
      title: '轮播项',
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'title',
                    title: { label: '图片标题', tip: 'title | alt' },
                    propType: 'string',
                    setter: 'StringSetter',
                    isRequired: true,
                    defaultValue: '图片',
                  },
                  {
                    name: 'coverUrl',
                    title: { label: '图片地址', tip: 'coverUrl | 封面图片地址' },
                    propType: 'string',
                    setter: 'StringSetter',
                  },
                  {
                    title: '链接',
                    display: 'block',
                    type: 'group',
                    items: [
                      {
                        name: 'linkType',
                        title: { label: '链接类型', tip: 'linkType | 链接类型' },
                        propType: {
                          type: 'oneOf',
                          value: ['inner', 'outer'],
                        },
                        setter: [
                          {
                            componentName: 'RadioGroupSetter',
                            props: {
                              options: [
                                {
                                  title: 'page内部页面',
                                  value: 'inner',
                                },
                                {
                                  title: 'url外部链接',
                                  value: 'outer',
                                },
                              ],
                            },
                          },
                        ],
                        extraProps: {
                          setValue: (target, value) => {
                            if (value) {
                              target.parent.setPropValue('linkType', value);
                            }
                          },
                        },
                        defaultValue: 'outer',
                      },
                      {
                        name: 'page',
                        title: { label: '选择页面', tip: 'page | 选择页面' },
                        propType: 'string',
                        setter: 'StringSetter',
                        condition: (target: any) => {
                          return target.parent.getPropValue('linkType') === 'inner';
                        },
                      },
                      {
                        name: 'outerUrl',
                        title: { label: '链接地址', tip: 'outerUrl | 链接地址' },
                        propType: 'string',
                        setter: 'StringSetter',
                        condition: (target: any) => {
                          return target.parent.getPropValue('linkType') === 'outer';
                        },
                      },
                      {
                        name: '_target',
                        title: { label: '新标签页打开', tip: '_target | 新标签页打开' },
                        propType: 'bool',
                        setter: 'BoolSetter',
                        defaultValue: true,
                      },
                    ],
                  },
                ],
              },
            },
          },
        },
      },
    },
    {
      name: 'width',
      title: { label: '轮播项宽度', tip: 'width | 轮播项宽度' },
      propType: 'number',
      defaultValue: 500,
    },
    {
      name: 'height',
      title: { label: '轮播项高度', tip: 'height | 轮播项高度' },
      propType: 'number',
      defaultValue: 500,
    },
    {
      name: 'speed',
      title: { label: '轮播项速度', tip: 'speed | 轮播项速度' },
      propType: 'number',
      setter: 'NumberSetter',
      defaultValue: 500,
    },
    {
      name: 'objectFit',
      title: {
        label: '摆放方式',
        tip: 'objectFit | object-fit',
      },
      propType: {
        type: 'oneOf',
        value: ['cover', 'contain', 'fill', 'none'],
      },
      setter: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: 'cover',
                value: 'cover',
              },
              {
                title: 'contain',
                value: 'contain',
              },
              {
                title: 'fill',
                value: 'fill',
              },
              {
                title: 'none',
                value: 'none',
              },
            ],
          },
        },
      ],
    },
    {
      name: 'carouselType',
      title: { label: '轮播类型', tip: 'carouselType | 轮播类型' },
      propType: {
        type: 'oneOf',
        value: ['one', 'multi'],
      },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '单项轮播',
                value: 'one',
              },
              {
                title: '多项轮播',
                value: 'multi',
              },
            ],
          },
        },
      ],
    },
    {
      name: 'slidesToShow',
      title: { label: '同时展示的轮播项数量', tip: 'slidesToShow | 同时展示的轮播项数量' },
      propType: 'number',
      setter: 'NumberSetter',
      defaultValue: 2,
      condition: (target: any) => target.getProps().getPropValue('carouselType') === 'multi',
    },
    {
      name: 'slidesToScroll',
      title: { label: '同时滚动的轮播项数量', tip: 'slidesToScroll | 同时滚动的轮播项数量' },
      propType: 'number',
      setter: 'NumberSetter',
      defaultValue: 2,
      condition: (target: any) => target.getProps().getPropValue('carouselType') === 'multi',
    },
    {
      name: 'centerMode',
      title: { label: '居中模式', tip: 'centerMode | 居中模式' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'lazyLoad',
      title: { label: '懒加载', tip: 'lazyLoad | 懒加载' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'pauseOnHover',
      title: { label: '悬浮时暂停', tip: 'pauseOnHover | 悬浮时暂停' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: true,
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'beforeChange',
          description: '切换面板的回调',
          template:
          "beforeChange(current, next){\nconsole.log(current, next)}"
        },
        {
          name: 'afterChange',
          description: '切换面板的回调',
          template:
            "afterChange(current, ${extParams}){\nconsole.log(current);\n}",
        },
      ]
    },
    component: {
      isContainer: false,
    },
  },
};