import snippets from './snippets';

export default {
  componentName: 'AMButton',
  docUrl: 'https://mobile.ant.design/zh/components/button',
  title: '按钮',
  category: '通用',
  group: '基础组件',
  props: [
    {
      title: '功能',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'children',
          title: {
            label: '内容',
            tip: 'children | 内容',
          },
          propType: {
            type: 'oneOfType',
            value: ['node', 'string'],
          },
          setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
        },
        {
          name: 'shape',
          title: {
            label: '按钮形状',
            tip: 'shape | 按钮形状',
          },
          propType: {
            type: 'oneOf',
            value: ['default', 'rounded', 'rectangular'],
          },
          setter: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: 'default',
                    value: 'default',
                  },
                  {
                    title: 'rounded',
                    value: 'rounded',
                  },
                  {
                    title: 'rectangular',
                    value: 'rectangular',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'default',
        },
        {
          name: 'block',
          title: {
            label: '块级元素',
            tip: 'block | 是否是块级元素',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
        {
          name: 'type',
          title: {
            label: '原生类型',
            tip: 'type | 设置 `button` 原生的 `type` 值',
          },
          propType: {
            type: 'oneOf',
            value: ['submit', 'reset', 'button'],
          },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: 'Submit',
                    value: 'submit',
                  },
                  {
                    title: 'Reset',
                    value: 'reset',
                  },
                  {
                    title: 'Button',
                    value: 'button',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'button',
        },
        {
          name: 'loadingText',
          title: {
            label: '加载状态文本',
            tip: 'loadingText | 加载状态下额外展示的文字',
          },
          propType: 'string',
          setter: ['StringSetter', 'VariableSetter'],
        },
      ],
    },
    {
      title: '外观',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'color',
          title: {
            label: '按钮的颜色',
            tip: 'color | 按钮的颜色',
          },
          propType: {
            type: 'oneOf',
            value: ['default', 'primary', 'success', 'warning', 'danger'],
          },
          setter: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: '默认',
                    value: 'default',
                  },
                  {
                    title: '主要',
                    value: 'primary',
                  },
                  {
                    title: '成功',
                    value: 'success',
                  },
                  {
                    title: '警告',
                    value: 'warning',
                  },
                  {
                    title: '危险',
                    value: 'danger',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'default',
        },
        {
          name: 'fill',
          title: {
            label: '填充模式',
            tip: 'fill | 填充模式',
          },
          propType: {
            type: 'oneOf',
            value: ['solid', 'outline', 'none'],
          },
          setter: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    title: 'solid',
                    value: 'solid',
                  },
                  {
                    title: 'outline',
                    value: 'outline',
                  },
                  {
                    title: 'none',
                    value: 'none',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'solid',
        },
        {
          name: 'size',
          title: { label: '尺寸', tip: 'size | 设置按钮大小' },
          propType: { type: 'oneOf', value: ['large', 'middle', 'small', 'mini'] },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '大',
                    value: 'large',
                  },
                  {
                    title: '中',
                    value: 'middle',
                  },
                  {
                    title: '小',
                    value: 'small',
                  },
                  {
                    title: '迷你',
                    value: 'mini',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'middle',
        },
      ],
    },
    {
      title: '状态',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'loading',
          title: { label: '加载中状态', tip: 'loading | 设置按钮加载中状态，可让按钮处于加载状态' },
          propType: 'bool',
          setter: ['BoolSetter', 'VariableSetter'],
        },
        {
          name: 'disabled',
          title: { label: '是否禁用', tip: 'disabled | 是否为禁用状态' },
          propType: 'bool',
          setter: ['BoolSetter', 'VariableSetter'],
          defaultValue: false,
        },
      ],
    },
    {
      name: 'onClick',
      title: { label: '点击回调', tip: '点击按钮时的回调' },
      propType: 'func',
    },
  ],
  configure: {
    supports: {
      events: [
        {
          name: 'onClick',
          description: '点击按钮时的回调',
          template:
            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
        },
      ],
      style: true,
    },
  },
  snippets,
};