import snippets from './snippets';

export default {
  snippets,
  componentName: 'TimePicker',
  title: '时间选择框',
  category: '表单',
  group: '基础组件',
  props: [
    {
      title: '值设置',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'defaultValue',
          title: { 
            label: '默认时间', 
            tip: 'defaultValue | 默认时间' 
          },
          propType: 'date',
          setter: 'DateSetter',
        },
        {
          name: 'value',
          title: { 
            label: '当前时间', 
            tip: 'value | 当前时间' 
          },
          propType: 'date',
          setter: 'DateSetter',
        },
      ],
    },
    {
      title: '功能选项',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'allowClear',
          title: { 
            label: '支持清除', 
            tip: 'allowClear | 是否允许清除' 
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'autoFocus',
          title: { 
            label: '自动聚焦', 
            tip: 'autoFocus | 自动获取焦点' 
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'bordered',
          title: { 
            label: '显示边框', 
            tip: 'bordered | 是否有边框' 
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'className',
          title: { 
            label: '选择器类名', 
            tip: 'className | 选择器类名' 
          },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'clearText',
          title: { 
            label: '清除按钮的提示文案', 
            tip: 'clearText | 清除按钮的提示文案' 
          },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'disabled',
          title: { 
            label: '是否禁用', 
            tip: 'disabled | 是否为禁用状态' 
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'disabledHours',
          title: { 
            label: '禁止选择部分小时选项', 
            tip: 'disabledHours | 禁止选择部分小时选项' 
          },
          setter: {
            componentName: 'FunctionSetter',
          }
        },
        {
          name: 'disabledMinutes',
          title: { 
            label: '禁止选择部分分钟选项', 
            tip: 'disabledMinutes | 禁止选择部分分钟选项' 
          },
          setter: {
            componentName: 'FunctionSetter',
          }
        },
        {
          name: 'disabledSeconds',
          title: { 
            label: '禁止选择部分秒选项', 
            tip: 'disabledSeconds | 禁止选择部分秒选项' 
          },
          setter: {
            componentName: 'FunctionSetter',
          }
        },
        {
          name: 'format',
          title: { 
            label: '展示的时间格式', 
            tip: 'format | 展示的时间格式' 
          },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'getPopupContainer',
          title: {
            label: '定义浮层的容器',
            tip: 'getPopupContainer | 定义浮层的容器，默认为 body 上新建 div',
          },
          setter: {
            componentName: 'FunctionSetter',
          }
        },
        {
          name: 'hideDisabledOptions',
          title: { 
            label: '隐藏禁止选择的选项', 
            tip: 'hideDisabledOptions | 隐藏禁止选择的选项' 
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'hourStep',
          title: { 
            label: '小时选项间隔', 
            tip: 'hourStep | 小时选项间隔' 
          },
          propType: 'number',
          setter: 'NumberSetter',
        },
        {
          name: 'inputReadOnly',
          title: {
            label: '只读',
            tip: 'inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘）',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'minuteStep',
          title: { 
            label: '分钟选项间隔', 
            tip: 'minuteStep | 分钟选项间隔' 
          },
          propType: 'number',
          setter: 'NumberSetter',
        },
        // {
        //   name: 'open',
        //   title: { label: '面板是否打开', tip: '面板是否打开' },
        //   propType: 'bool',
        //   // defaultValue: false,
        //   setter: 'BoolSetter'
        // },
        {
          name: 'popupClassName',
          title: { 
            label: '弹出层类名', 
            tip: 'popupClassName | 弹出层类名' 
          },
          propType: 'string',
          setter: 'StringSetter',
        },
        // {
        //   name: 'popupStyle',
        //   title: { label: '弹出层样式对象', tip: '弹出层样式对象' },
        //   propType: 'object',
        // },
        {
          name: 'secondStep',
          title: { 
            label: '秒选项间隔', 
            tip: 'secondStep | 秒选项间隔' 
          },
          propType: 'number',
          setter: 'NumberSetter',
        },
        // {
        //   name: 'suffixIcon',
        //   title: { label: '自定义的选择框后缀图标', tip: '自定义的选择框后缀图标' },
        //   propType: 'node',
        // },
        // {
        //   name: 'clearIcon',
        //   title: { label: '自定义的清除图标', tip: '自定义的清除图标' },
        //   propType: 'node',
        // },
        // {
        //   name: 'renderExtraFooter',
        //   title: {
        //     label: '选择框底部显示自定义的内容',
        //     tip: '选择框底部显示自定义的内容',
        //   },
        //   propType: 'func',
        // },
        {
          name: 'use12Hours',
          title: {
            label: '12小时制',
            tip: 'use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a`',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'onCalendarChange',
          title: { 
            label: '待选日期发生变化的回调', 
            tip: 'onCalendarChange | info 参数自 4.4.0 添加' 
          },
          setter: {
            componentName: 'FunctionSetter',
          }
        },
        {
          name: 'onChange',
          title: { 
            label: '时间发生变化的回调', 
            tip: 'onChange | 时间发生变化的回调' 
          },
          setter: {
            componentName: 'FunctionSetter',
          }
        },
        {
          name: 'onOpenChange',
          title: { 
            label: '面板打开/关闭时的回调', 
            tip: 'onOpenChange | 面板打开/关闭时的回调' 
          },
          setter: {
            componentName: 'FunctionSetter',
          }
        },
        {
          name: 'showNow',
          title: { 
            label: '“此刻”按钮', 
            tip: 'showNow | 面板是否显示“此刻”按钮' 
          },
          propType: 'bool',
          setter: 'BoolSetter',
        },
      ],
    },
    {
      name: 'placeholder',
      title: { 
        label: '空值提示', 
        tip: 'placeholder | 没有值的时候显示的内容' 
      },
      propType: {
        type: 'oneOfType',
        value: ['string', { type: 'arrayOf', value: 'string' }],
      },
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onCalendarChange',
          description: '待选日期发生变化的回调',
          template:
            "onCalendarChange(dates,dateStrings,info,${extParams}){\n// 待选日期发生变化的回调。info 参数自 4.4.0 添加\nconsole.log('onCalendarChange',dates,dateStrings,info);}",
        },
        {
          name: 'onChange',
          description: '时间发生变化的回调',
          template:
            "onChange(time,timeString,${extParams}){\n// 时间发生变化的回调\nconsole.log('onChange',time,timeString);}",
        },
        {
          name: 'onOpenChange',
          description: '面板打开/关闭时的回调',
          template:
            "onOpenChange(open,${extParams}){\n// 面板打开/关闭时的回调\nconsole.log('onOpenChange',open);}",
        },
      ],
    },
  },
};