import snippets from './snippets';
import { border, color, height, padding } from '../_utils/css';

export default {
  snippets,
  componentName: 'AMSearchBar',
  docUrl: 'https://mobile.ant.design/zh/components/search-bar',
  title: '搜索框',
  category: '导航',
  group: '基础组件',
  props: [
    {
    title: '功能',
    display: 'block',
    type: 'group',
    items: [
    {
      name: 'cancelText',
      title: { label: '取消按钮的文案', tip: '取消按钮的文案' },
      defaultValue: '取消',
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'clearOnCancel',
      title: { label: '取消按钮清空', tip: '点击取消按钮之后是否清空输入框' },
      defaultValue: true,
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'clearable',
      title: { label: '是否启用清除图标', tip: '点击清除图标后会清空输入框' },
      defaultValue: true,
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'searchIcon',
      title: '自定义搜索图标',
      propType: 'node',
      setter: 'SlotSetter',
    },
    {
      name: 'maxLength',
      title: '最大输入字符数',
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'onlyShowClearWhenFocus',
      title: {
        label: '清除按钮显示控制',
        tip: 'onlyShowClearWhenFocus | 如果 true，那么只有输入框聚焦时才会显示清除按钮',
      },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'placeholder',
      title: { label: '提示文本' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'showCancelButton',
      title: { label: '是否显示右侧取消按钮' },
      propType: {
        type: 'oneOf',
        value: ['node', 'func'],
      },
      setter: 'SlotSetter'|| 'FunctionSetter',
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'value',
      title: { label: '输入值', tip: '输入值' },
      propType: 'string',
      setter: 'StringSetter',
    },
  ],
},
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        color('onlybackground', '背景色'),
        border('radius', '圆角'),
        height('', '高度'),
        padding('left', '搜索框的左侧 padding'),
        color('placeholder', 'placeholder 文字颜色'),
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          description: '输入框内容变化时的回调',
          template:
            "\tonChange(value,${extParams}){\n\t\t// 输入框内容变化时的回调\n\t\tconsole.log('onChange',value);\n\t}\n",
        },
        {
          name: 'onSearch',
          description: '输入框回车时触发',
          template:
            "\tonSearch(value,${extParams}){\n\t\t// 输入框回车时触发\n\t\tconsole.log('onSearch',value);\n\t}\n",
        },
        {
          name: 'onClear',
          description: '点击清除按钮后回调',
          template: "\tonClear(){\n\t\t// 点击清除按钮后回调\n\t\tconsole.log('onClear');\n\t}\n",
        },
        {
          name: 'onCancel',
          description: '点击取消按钮时触发',
          template: "\tonCancel(){\n\t\t// 点击清除按钮后回调\n\t\tconsole.log('onCancel');\n\t}\n",
        },
        {
          name: 'onFocus',
          description: '获取焦点回调',
          template:
            "\tonFocus(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: 'onBlur',
          description: '移除焦点回调',
          template:
            "\tonBlur(event,${extParams}){\n\t\t// 移除焦点回调\n\t\tconsole.log('onBlur',event);\n\t}\n",
        },
      ],
    },
  },
};