import snippets from './snippets';
import { color, fontSize, stringProp } from '../_utils/css';

export default {
  snippets,
  componentName: 'AMInput',
  docUrl: 'https://mobile.ant.design/zh/components/input',
  title: '输入框',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'id',
      title: { label: 'ID', tip: 'input元素的id' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'type',
      title: {
        label: '类型',
        tip: 'type | input原生类型',
      },
      propType: {
        type: 'oneOf',
        value: ['text', 'password', 'number', 'email', 'url'],
      },
      setter: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: '文本',
                value: 'text',
              },
              {
                title: '密码',
                value: 'password',
              },
              {
                title: '数字',
                value: 'number',
              },
              {
                title: '邮件',
                value: 'email',
              },
              {
                title: '链接',
                value: 'url',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'default',
    },
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认内容' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前值' },
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      name: 'clearable',
      title: { label: '支持清除', tip: '是否允许清除' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'placeholder',
      title: { label: '占位提示', tip: '占位提示' },
      propType: 'string',
      defaultValue: '请输入',
      setter: 'StringSetter',
    },
    {
      name: 'readOnly',
      title: { label: '是否只读', tip: '是否只读' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'onlyShowClearWhenFocus',
      title: {
        label: '清除按钮显示控制',
        tip: 'onlyShowClearWhenFocus | 如果 true，那么只有输入框聚焦时才会显示清除按钮',
      },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'min',
      title: { label: '最小值', tip: '最小值，仅当type为number生效' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'max',
      title: { label: '最大值', tip: '最大值，仅当type为number生效' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'maxLength',
      title: { label: '最大长度', tip: '最大长度' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      name: 'minLength',
      title: { label: '最小长度', tip: '最小长度' },
      propType: 'number',
      setter: 'NumberSetter',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        fontSize('', '字体大小'),
        color('', '字体颜色'),
        color('placeholder', '提示字体颜色'),
        stringProp('text-align', '文字对齐方式'),
      ],
    },
  ],
  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: 'onEnterPress',
          description: '按下回车的回调',
          template:
            "\tonPressEnter(event,${extParams}){\n\t\t// 按下回车的回调\n\t\tconsole.log('onPressEnter',event);\n\t}\n",
        },
        {
          name: 'onClear',
          description: '点击清除按钮后回调',
          template: "\tonClear(){\n\t\t// 点击清除按钮后回调\n\t\tconsole.log('onClear');\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",
        },
      ],
    },
  },
};