import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellPercent',
  title: '百分比',
  category: '表单',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellPercent',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: { type: 'i18n', 'en-US': 'Basic', 'zh-CN': '基础配置' },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'mode',
            title: { label: '状态模式', tip: 'mode | 组件的状态模式' },
            propType: { type: 'oneOf', value: ['read', 'edit'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '只读', value: 'read' },
                    { title: '编辑', value: 'edit' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'edit',
          },
          {
            name: 'value',
            title: { label: '当前值', tip: 'value | 百分比数值' },
            propType: { type: 'oneOfType', value: ['number', 'null'] },
            setter: ['NumberSetter', 'VariableSetter'],
          },
          {
            name: 'variant',
            title: { label: '展示变体', tip: 'variant | 展示形式' },
            propType: { type: 'oneOf', value: ['text', 'progress', 'circle'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '文本', value: 'text' },
                    { title: '进度条', value: 'progress' },
                    { title: '环形', value: 'circle' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'text',
          },
          {
            name: 'showPercentSymbol',
            title: { label: '显示百分号', tip: 'showPercentSymbol | 是否显示 % 符号' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
        ],
      },
      {
        title: {
          label: { type: 'i18n', 'en-US': 'Range', 'zh-CN': '范围配置' },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'min',
            title: { label: '最小值', tip: 'min | 最小值，默认 0' },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 0,
          },
          {
            name: 'max',
            title: { label: '最大值', tip: 'max | 最大值，默认 100' },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 100,
          },
          {
            name: 'step',
            title: { label: '步进值', tip: 'step | 每次改变步数' },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 1,
          },
          {
            name: 'precision',
            title: { label: '小数精度', tip: 'precision | 小数位数，默认 1' },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 1,
          },
        ],
      },
      {
        title: {
          label: { type: 'i18n', 'en-US': 'Edit', 'zh-CN': '编辑配置' },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'showSlider',
            title: { label: '显示滑块', tip: 'showSlider | 是否显示滑块（配合输入框）' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'size',
            title: { label: '尺寸', tip: 'size | 输入框尺寸' },
            propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '大', value: 'large' },
                    { title: '中', value: 'middle' },
                    { title: '小', value: 'small' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'middle',
          },
        ],
      },
      {
        title: {
          label: { type: 'i18n', 'en-US': 'Validation', 'zh-CN': '校验配置' },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'required',
            title: { label: '是否必填', tip: 'required | 是否为必填项' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: { type: 'i18n', 'en-US': 'Style', 'zh-CN': '样式' },
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'className',
            title: { label: '样式类名', tip: 'className | 自定义样式类名' },
            propType: 'string',
            setter: 'StringSetter',
          },
          {
            name: 'style',
            title: { label: '自定义样式', tip: 'style | 自定义样式对象' },
            propType: 'object',
            setter: 'StyleSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template: "onChange(value,${extParams}){\nconsole.log('onChange', value);}",
        },
      ],
    },
    component: {},
  },
};