import snippets from './snippets';

export default {
  snippets,
  componentName: 'Slider',
  title: '滑动输入条',
  category: '表单',
  group: "基础组件",
  props: [
    {
      name: 'defaultValue',
      title: {
        label: '默认值',
        tip: 'defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 [number, number]',
      },
      propType: {
        type: 'oneOfType',
        value: ['number', { type: 'arrayOf', value: 'number' }],
      },
    },
    {
      name: 'range',
      title: { label: '双滑块模式', tip: 'range | 双滑块模式' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
      setValue(target, range) {
        let defaultValue = target.node.getPropValue('defaultValue');
        if (range) {
          defaultValue = Array.isArray(defaultValue) ? defaultValue : [0, defaultValue];
        } else {
          defaultValue = Array.isArray(defaultValue)
            ? defaultValue[1] || defaultValue[0]
            : defaultValue;
        }
        target.node.setPropValue('defaultValue', defaultValue);
      },
    },
    {
      name: 'allowClear',
      title: { label: '支持清除', tip: 'allowClear | 是否允许清除' },
      condition(target) {
        return target.getProps().getPropValue('range') === true;
      },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter'
    },
    {
      name: 'disabled',
      title: {
        label: '是否禁用',
        tip: 'disabled | 是否为禁用状态',
      },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter'
    },
    {
      name: 'dots',
      title: { label: '对齐刻度', tip: 'dots | 是否只能拖拽到刻度上' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter'
    },
    {
      name: 'max',
      title: { label: '最大值', tip: 'max | 最大值' },
      propType: 'number',
      setter: 'NumberSetter'
    },
    {
      name: 'min',
      title: { label: '最小值', tip: 'min | 最小值' },
      propType: 'number',
      setter: 'NumberSetter'
    },
    {
      name: 'reverse',
      title: { label: '反向坐标轴', tip: 'reverse | 反向坐标轴' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter'
    },
    {
      name: 'step',
      title: {
        label: '步长',
        tip:
          'step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分',
      },
      propType: 'number',
      setter: 'NumberSetter'
    },
    {
      name: 'vertical',
      title: {
        label: '垂直方向',
        tip: 'vertical | 值为 true 时，Slider 为垂直方向',
      },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter'
    },
    {
      name: 'onAfterChange',
      title: {
        label: '与 `onmouseup` 触发时机一致，把当前值作为参数传入',
        tip: 'onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入',
      },
      propType: 'func',
    },
    {
      name: 'onChange',
      title: {
        label: '当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入',
        tip: 'onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入',
      },
      propType: 'func',
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onAfterChange',
          description: '与 onmouseup 触发时机一致',
          template:
            "\tonAfterChange(value,${extParams}){\n\t\t// 与 onmouseup 触发时机一致\n\t\tconsole.log('onAfterChange',value);\n\t}\n",
        },
        {
          name: 'onChange',
          description: '当 Slider 的值发生改变时触发回调',
          template:
            "\tonChange(value,${extParams}){\n\t\t// 当 Slider 的值发生改变时触发回调\n\t\tconsole.log('onChange',value);\n\t}\n",
        },
      ],
    },
  },
};