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

export default {
  snippets,
  componentName: 'AMSlider',
  docUrl: 'https://mobile.ant.design/zh/components/slider',
  title: '滑动输入条',
  category: '表单',
  group: '基础组件',
  props: [
    {
      title: '属性',
      display: 'block',
      type: 'group',
      items: [
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: 'defaultValue | 默认值' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: 'disabled | 禁用' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'icon',
      title: { label: '滑块的图标', tip: 'icon' },
      propType: 'node',
      setter: 'SlotSetter',
    },
    {
      name: 'marks',
      title: { label: '刻度标记', tip: 'marks | 刻度标记' },
      propType: 'object',
      setter: 'ObjectSetter',
    },
    {
      name: 'max',
      title: '最大值',
      propType: 'number',
      defaultValue: 100,
      setter: 'NumberSetter',
    },
    {
      name: 'min',
      title: '最小值',
      propType: 'number',
      defaultValue: 0,
      setter: 'NumberSetter',
    },
    {
      name: 'popover',
      title: { label: '拖动悬浮提示', tip: 'popover | 是否在拖动时显示悬浮提示，支持传入函数自定义渲染内容' },
      propType: {
        type: 'oneOf',
        value: ['bool', 'func'],
      },
      defaultValue: false,
      setter: 'BoolSetter'||'FunctionSetter',
    },
    {
      name: 'residentPopover',
      title: { label: 'popover是否常驻显示', tip: 'residentPopover | popover 存在时生效' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'range',
      title: { label: '是否为双滑块', tip: 'range' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'step',
      title: { label: ' 步距', tip: 'step | 取值必须大于 0，并且 (max - min) 可被 step 整除。当 marks 不为空对象时，step 的配置失效' },
      propType: 'number',
      setter: 'NumberSetter',
      defaultValue: 1,
    },
    {
      name: 'ticks',
      title: { label: '是否显示刻度', tip: 'ticks | 是否显示刻度' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'value',
      title: { label: '当前值', tip: 'value | 当前值' },
      propType: 'number',
      setter: 'NumberSetter',
    },
  ],
},
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        color('fill', '填充色'),
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onAfterChange',
          description: '与 touchend 触发时机一致，把当前值作为参数传入',
          template:
            "\tonChange(value,${extParams}){\n\t\t// 与 touchend 触发时机一致，把当前值作为参数传入\n\t\tconsole.log('onChange',value);\n\t}\n",
        },
        {
          name: 'onChange',
          description: '输入框内容变化时的回调',
          template:
            "\tonChange(value,${extParams}){\n\t\t// 输入框内容变化时的回调\n\t\tconsole.log('onChange',value);\n\t}\n",
        },
      ],
    },
  },
};