import snippets from './snippets';

export default {
  snippets,
  componentName: 'Input.Search',
  title: '搜索框',
  category: '表单',
  group: "基础组件",
  props: [
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: 'defaultValue | 默认值' },
      propType: 'string',
      setter: 'StringSetter'
    },
    {
      name: 'value',
      title: { label: '当前值', tip: 'value | 当前值' },
      propType: 'string',
      setter: 'StringSetter'
    },
    {
      name: 'bordered',
      title: { label: '显示边框', tip: 'bordered | 是否有边框' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter'
    },
    {
      name: 'loading',
      title: { label: '加载状态', tip: 'loading | 加载状态' },
      propType: 'bool',
      setter: 'BoolSetter'
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: 'disabled | 是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter'
    },
    {
      name: 'placeholder',
      title: { label: '占位提示', tip: 'placeholder | 占位提示' },
      propType: 'string',
      defaultValue: '请输入',
      setter: 'StringSetter'
    },
    // {
    //   name: 'id',
    //   title: { label: '输入框ID', tip: '输入框的ID' },
    //   propType: 'string',
    // },
    {
      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',
            },
          ],
        },
      },
      defaultValue: 'middle',
    },
    {
      name: 'enterButton',
      title: {
        label: '确认按钮',
        tip: 'enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 addonAfter 冲突。',
      },
      propType: { type: 'oneOfType', value: ['bool', 'node'] },
      defaultValue: false,
    },
    {
      name: 'addonAfter',
      title: { label: '后置标签', tip: 'addonAfter | 后置标签' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'addonBefore',
      title: { label: '前置标签', tip: 'addonBefore | 前置标签' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'prefix',
      title: { label: '前缀', tip: 'prefix | 前缀' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'suffix',
      title: { label: '后缀', tip: 'suffix | 后缀' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'onChange',
      title: { label: '输入框内容变化时的回调', tip: 'onChange | 输入框内容变化时的回调' },
      propType: 'func',
    },
    {
      name: 'onSearch',
      title: {
        label: '点击搜索或按下回车键时的回调',
        tip: 'onSearch | 点击搜索或按下回车键时的回调',
      },
      propType: 'func',
    },
    {
      name: 'onPressEnter',
      title: { label: '按下回车的回调', tip: 'onPressEnter | 按下回车的回调' },
      propType: 'func',
    },
    {
      name: 'onFocus',
      title: { label: '获取焦点回调', tip: 'onFocus | 获取焦点回调' },
      propType: 'func',
    },
    {
      name: 'onKeyDown',
      title: { label: '按键按下时的回调', tip: 'onKeyDown | 按键按下时的回调' },
      propType: 'func',
    },
    {
      name: 'onKeyPress',
      title: { label: '按键按下后的回调', tip: 'onKeyPress | 按键按下之后释放之前的回调' },
      propType: 'func',
    },
    {
      name: 'onKeyUp',
      title: { label: '按键释放回调', tip: 'onKeyUp | 按键释放之后的回调' },
      propType: 'func',
    },
    {
      name: 'onBlur',
      title: { label: '失去焦点回调', tip: 'onBlur | 失去焦点回调' },
      propType: 'func',
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          description: '输入框内容变化时的回调',
          template:
            "\tonChange(event,${extParams}){\n\t\t// 输入框内容变化时的回调\n\t\tconsole.log('onChange',event);}",
        },
        {
          name: 'onPressEnter',
          description: '按下回车的回调',
          template:
            "\tonPressEnter(event,${extParams}){\n\t\t// 按下回车的回调\n\t\tconsole.log('onPressEnter',event);\n\t}\n",
        },
        {
          name: 'onSearch',
          description: '点击搜索图标、清除图标，或按下回车键时的回调',
          template:
            "\tonSearch(value,event,${extParams}){\n\t\t// 点击搜索图标、清除图标，或按下回车键时的回调\n\t\tconsole.log('onSearch',value,event);\n\t}\n",
        },
        {
          name: 'onFocus',
          description: '获取焦点回调',
          template: "onFocus(event,${extParams}){\n\t\t// 获取焦点回调\n\t\tconsole.log('onFocus',event);\n\t}\n",
        },
        {
          name: 'onKeyDown',
          description: '按键按下时的回调',
          template:
            "\tonKeyDown(event,${extParams}){\n\t\t// 按键按下时的回调\n\t\tconsole.log('onKeyDown',event);\n\t}\n",
        },
        {
          name: 'onKeyPress',
          description: '按键按下后的回调',
          template:
            "\tonKeyPress(event,${extParams}){\n\t\t// 按键按下后的回调\n\t\tconsole.log('onKeyPress',event);\n\t}\n",
        },
        {
          name: 'onKeyUp',
          description: '按键释放回调',
          template: "\tonKeyUp(event,${extParams}){\n\t\t// 按键释放回调\n\t\tconsole.log('onKeyUp',event);\n\t}\n",
        },
        {
          name: 'onBlur',
          description: '移除焦点回调',
          template: "\tonBlur(event,${extParams}){\n\t\t// 移除焦点回调\n\t\tconsole.log('onBlur',event);\n\t}\n",
        },
      ],
    },
  },
};