import { uuid } from '../_utils/utils';

import snippets from './snippets';

export default {
  snippets,
  componentName: 'CustomSelect',
  title: '自定义下拉菜单',
  category: '表单',
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "CustomSelect",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认选中值' },
      propType: {
        type: 'oneOfType',
        value: [
          'string',
          'number',
        ],
      },
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前值' },
      propType: {
        type: 'oneOfType',
        value: [
          'string',
          'number',
        ],
      },
    },
    {
      name: 'renderItem',
      title: { label: '自定义渲染', tip: '自定义渲染选项内容' },
      propType: {
        type: 'func',
      },
      setter: [
        {
          componentName: 'SlotSetter',
          title: '渲染函数插槽',
          initialValue: {
            type: 'JSSlot',
            params: ['option'],
          },
        },
        {
          componentName: 'FunctionSetter',
          props: {
            template: 'renderItem(item,${extParams}){\n// 自定义渲染\nreturn `item`;\n}',
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'options',
      title: { label: '可选项', tip: '可选项' },
      propType: {
        type: 'arrayOf',
        value: {
          type: 'shape',
          value: [
            {
              name: 'label',
              propType: 'string',
              description: '选项名',
              defaultValue: '选项名',
            },
            {
              name: 'value',
              propType: ['string', 'number'],
              description: '选项值',
              defaultValue: '选项值',
            },
            {
              name: 'disabled',
              propType: 'bool',
              description: '是否禁用',
              defaultValue: false,
            },
          ],
        },
      },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'label',
                    title: '选项名',
                    setter: ['PisellI18nSetter', 'VariableSetter'],
                    isRequired: true
                  },
                  {
                    name: 'value',
                    title: '选项值',
                    setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
                    isRequired: true
                  },
                  {
                    name: 'disabled',
                    title: '是否禁用',
                    setter: ['BoolSetter', 'VariableSetter'],
                  },
                ],
              },
            },
            initialValue: () => {
              return {
                label: '选项名',
                value: uuid(),
                disabled: false,
              };
            },
          },
        },
      },
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter'
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onBlur',
          template: "onBlur(${extParams}){\n// 失去焦点时回调\nconsole.log('onBlur');}",
        },
        {
          name: 'onChange',
          template:
            "onChange(value,option,${extParams}){\n// 选中 option，或 input 的 value 变化时，调用此函数\nconsole.log('onChange',value,option);}",
        },
        {
          name: 'onDeselect',
          template:
            "onDeselect(value,${extParams}){\n// 取消选中时调用\nconsole.log('onDeselect',value);}",
        },
        {
          name: 'onFocus',
          template: "onFocus(${extParams}){\n// 获得焦点时回调\nconsole.log('onFocus');}",
        },
        {
          name: 'onInputKeyDown',
          template:
            "onInputKeyDown(${extParams}){\n// 按键按下时回调\nconsole.log('onInputKeyDown');}",
        },
        {
          name: 'onMouseEnter',
          template: "onMouseEnter(${extParams}){\n// 鼠标移入时回调\nconsole.log('onMouseEnter');}",
        },
        {
          name: 'onMouseLeave',
          template: "onMouseLeave(${extParams}){\n// 鼠标移出时回调\nconsole.log('onMouseLeave');}",
        },
        {
          name: 'onPopupScroll',
          template:
            "onPopupScroll(${extParams}){\n// 下拉列表滚动时的回调\nconsole.log('onPopupScroll');}",
        },
        {
          name: 'onSearch',
          template:
            "onSearch(value,${extParams}){\n// 文本框值变化时回调\nconsole.log('onSearch',value);}",
        },
        {
          name: 'onSelect',
          template:
            "onSelect(value,option,${extParams}){\n// 被选中时调用\nconsole.log('onSelect',value,option);}",
        },
        {
          name: 'onDropdownVisibleChange',
          template:
            "onDropdownVisibleChange(open,${extParams}){\n// 展开下拉菜单的回调\nconsole.log('onDropdownVisibleChange',open);}",
        },
      ],
    },
  },
};