import snippets from './snippets';
import {
  border,
  backgroundColor,
  fontSize,
  pxProp,
  stringProp,
  color,
} from '../_utils/css';

export default {
  componentName: 'AMStepper',
  docUrl: 'https://mobile.ant.design/zh/components/stepper',
  title: '步进器',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'defaultValue',
      title: {
        label: '默认值',
        tip: 'defaultValue | 默认值',
      },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'value',
      title: {
        label: '当前值',
        tip: 'value | 当前值',
      },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'max',
      title: {
        label: '最大值',
        tip: 'max | 最大值',
      },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'min',
      title: {
        label: '最小值',
        tip: 'min | 最小值',
      },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'step',
      title: {
        label: '步长',
        tip: 'step | 每次增加或减少的值，可以为小数',
      },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'digits',
      title: {
        label: '小数点后固定位数',
        tip: 'digits | 格式化到小数点后固定位数，设置为 0 表示格式化到整数。配置 formatter 时展示会以 formatter 为准',
      },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'disabled',
      title: { label: '禁用', 
               tip: 'disabled | 是否禁用步进器' 
      },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'inputReadOnly',
      title: { label: '只读', 
               tip: 'inputReadOnly | 输入框是否只读' 
      },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'allowEmpty',
      title: { label: '允许为空', 
               tip: 'allowEmpty | 是否允许内容为空' 
      },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'stringMode',
      title: { label: '字符值模式', 
               tip: 'stringMode | 开启后支持高精度小数。开启后 defaultValue、value、min、max、onChange 等都将转换为 string 类型' 
      },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        stringProp('active-border','输入框选中状态边框样式','输入框 Focus 状态下，四周边框样式'),
        border('', '边框样式','组件四周边框的样式'),
        border('inner', '内边框样式','组件内部边框的样式'),
        border('radius', '圆角','组件整体的圆角'),
        pxProp('height','高度','组件整体高度'),

        backgroundColor('button', '按钮背景颜色','左右两侧按钮背景颜色'),
        stringProp('button-font-size','按钮文字大小','左右两侧按钮文字大小'),
        color('button-text','按钮文字颜色','左右两侧按钮文字颜色'),
        stringProp('button-width','按钮宽度','左右两侧按钮的宽度'),

        backgroundColor('input', '输入框背景色'),
        color('input-font', '输入框文字颜色'),
        fontSize('input', '输入框字体大小'),
        pxProp('input-width','输入框的宽度'),
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      events: [
        {
          name: 'formatter',
          description: '格式化展示数值',
          template: "formatter(value,${extParams}){\n// 格式化展示数值\nconsole.log('onChange');}",
        },
        {
          name: 'onBlur',
          description: '输入框失去焦点时触发',
          template: "onBlur(event,${extParams}){\n// 输入框失去焦点时触发\nconsole.log('onChange');}",
        },
        {
          name: 'onChange',
          description: '变化时的回调',
          template: "onChange(value,${extParams}){\n// 变化时的回调\nconsole.log('onChange');}",
        },
        {
          name: 'onFocus',
          description: '输入框获得焦点时触发',
          template: "onFocus(event,${extParams}){\n// 输入框获得焦点时触发\nconsole.log('onChange');}",
        },
        {
          name: 'parser',
          description: '将输入解析为对应数字',
          template: "parser(text,${extParams}){\n// 将输入解析为对应数字\nconsole.log('onChange');}",
        },
        
      ],
      style: true,
    },
  },
  snippets,
};