import snippets from './snippets';
import { stringProp } from '../_utils/css';

export default {
  snippets,
  componentName: 'AMSpace',
  docUrl: 'https://mobile.ant.design/zh/components/space',
  title: '间距',
  category: '布局',
  group: '基础组件',
  props: [
    {
      name: 'direction',
      title: { label: '方向', tip: '水平还是垂直类型' },
      propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '水平',
                value: 'horizontal',
              },
              {
                title: '垂直',
                value: 'vertical',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'horizontal',
    },
    {
      name: 'block',
      title: {
        label: '块级元素',
        tip: 'block | 是否是块级元素',
      },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'wrap',
      title: {
        label: '自动换行',
        tip: 'block | 是否自动换行，仅在 horizontal 时有效',
      },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'src',
      title: { label: '图片地址', tip: '图片地址' },
      propType: { type: 'string', isRequired: true },
    },
    {
      name: 'alt',
      title: { label: '替换文本', tip: '替换文本' },
      propType: 'string',
    },
    {
      name: 'fallback',
      title: { label: '失败地址', tip: '加载失败容错地址' },
      propType: 'string',
    },
    {
      name: 'justify',
      title: { label: '主轴对齐方式', tip: 'justify | 主轴对齐方式' },
      propType: {
        type: 'oneOf',
        value: ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch'],
      },
      setter: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: 'start',
                value: 'start',
              },
              {
                title: 'center',
                value: 'center',
              },
              {
                title: 'end',
                value: 'end',
              },
              {
                title: 'between',
                value: 'between',
              },
              {
                title: 'around',
                value: 'around',
              },
              {
                title: 'evenly',
                value: 'evenly',
              },
              {
                title: 'stretch',
                value: 'stretch',
              },
            ],
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'align',
      title: { label: '交叉轴对齐方式', tip: 'align | 交叉轴对齐方式' },
      propType: {
        type: 'oneOf',
        value: ['start', 'end', 'center', 'baseline'],
      },
      setter: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: 'start',
                value: 'start',
              },
              {
                title: 'center',
                value: 'center',
              },
              {
                title: 'end',
                value: 'end',
              },
              {
                title: 'baseline',
                value: 'baseline',
              },
            ],
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'lazy',
      title: { label: '懒加载', tip: 'lazy 是否懒加载' },
      propType: 'bool',
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        stringProp('gap', '间距大小', '间距大小'),
        stringProp('gap-horizontal', '水平间距'),
        stringProp('gap-vertical', '垂直间距'),
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      events: [
        {
          name: 'onError',
          template: "onClick(e, ${extParams}){\n// 点击事件\nconsole.log('e');}",
        },
      ],
    },
  },
};