import snippets from './snippets';

export default {
  componentName: 'Button',
  title: '按钮',
  category: '通用',
  group: '移动端',
  npm: {
    package: 'web-sdk-h5-material',
    version: '0.1.0',
    exportName: 'Button',
    main: '',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      title: '功能',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'children',
          title: {
            label: '内容',
            tip: 'children | 内容',
          },
          propType: {
            type: 'oneOfType',
            value: ['node', 'string'],
          },
          setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
        },
        {
          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: 'fill',
          title: {
            label: '填充模式',
            tip: 'fill | 设置 填充模式',
          },
          propType: {
            type: 'oneOf',
            value: ['solid', 'outline', 'none'],
          },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: 'Solid',
                    value: 'solid',
                  },
                  {
                    title: 'Outline',
                    value: 'outline',
                  },
                  {
                    title: 'None',
                    value: 'none',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'button',
        },
      ],
    },
    {
      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',
          ],
        },
        {
          name: 'size',
          title: { label: '尺寸', tip: 'size | 设置按钮大小' },
          propType: { type: 'oneOf', value: ['mini', 'large', 'middle', 'small'] },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '大',
                    value: 'large',
                  },
                  {
                    title: '中',
                    value: 'middle',
                  },
                  {
                    title: '小',
                    value: 'small',
                  },
                  {
                    title: '迷你',
                    value: 'mini',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'middle',
        },
        {
          name: 'shape',
          title: {
            label: '形状',
            tip: 'shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设',
          },
          propType: { type: 'oneOf', value: ['default', 'rounded', 'rectangular'] },
          defaultValue: 'default',
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '默认',
                    value: 'default',
                  },
                  {
                    title: '圆角',
                    value: 'rounded',
                  },
                  {
                    title: '方形',
                    value: 'rectangular',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
        },

        {
          name: 'block',
          title: {
            label: '自适应',
            tip: 'block | 将按钮宽度调整为其父宽度的选项',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
      ],
    },
    {
      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',
          template:
            "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
        },
      ],
      style: true,
    },
  },
  snippets,
};