import snippets from './snippets';

export default {
  snippets,
  componentName: 'ProfileMenu',
  title: '个人中心菜单',
  category: '通用',
  npm: {
    package: '@pisell/materials',
    version: '1.0.0',
    exportName: 'ProfileMenu',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      title: {
        label: "入口菜单设置"
      },
      display: "block",
      type: "group",
      items: [
        {
          name: 'showBadge',
          title: { label: '显示徽标', tip: '是否在头像右上角显示徽标' },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'badgeCount',
          title: { label: '徽标数量', tip: '徽标显示的数字' },
          propType: 'number',
          defaultValue: 1,
          setter: 'NumberSetter',
        },
        {
          name: 'menuIcon',
          title: { label: '菜单图标', tip: '左侧菜单图标' },
          propType: { type: 'oneOfType', value: ['string', 'node'] },
          setter: [{
            componentName: 'IconSetter',
          }, {
            componentName: 'SlotSetter',
          }],
        },
        {
          name: 'userName',
          title: { label: '用户名', tip: '显示的用户名' },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'email',
          title: { label: '邮箱', tip: '显示的邮箱地址' },
          propType: 'string',
          setter: 'StringSetter',
        },
        {
          name: 'isShowUserName',
          title: { label: '显示用户名', tip: '是否显示用户名' },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'isShowEmail',
          title: { label: '显示邮箱', tip: '是否显示邮箱' },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
      ]
    },
    {
      title: {
        label: "菜单字段设置"
      },
      display: "block",
      type: "group",
      items: [
        {
          name: 'isShowUserInfo',
          title: { 
            label: '显示用户信息展示区域', 
            tip: '在下拉菜单顶部显示用户信息' 
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'menuItems',
          title: { label: '下拉菜单项', tip: '下拉菜单的配置项' },
          propType: {
            type: 'arrayOf',
            value: {
              type: 'shape',
              value: {
                key: 'string',
                label: 'string',
                icon: 'node',
                danger: 'bool',
                disabled: 'bool',
              },
            },
          },
          setter: {
            componentName: 'ArraySetter',
            props: {
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: [
                      {
                        name: 'key',
                        title: '唯一标识',
                        setter: 'StringSetter',
                      },
                      {
                        name: 'label',
                        title: '菜单项文本',
                        setter: 'StringSetter',
                      },
                      {
                        name: 'icon',
                        title: '图标',
                        setter: 'IconSetter',
                      },
                      {
                        name: 'danger',
                        title: '危险项',
                        setter: 'BoolSetter',
                      },
                      {
                        name: 'disabled',
                        title: '禁用',
                        setter: 'BoolSetter',
                      },
                    ],
                  },
                },
              },
            },
          },
        },
        {
          name: 'placement',
          title: { label: '弹出位置', tip: '下拉菜单弹出的位置' },
          propType: {
            type: 'oneOf',
            value: ['bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'],
          },
          defaultValue: 'bottomRight',
          setter: {
            componentName: 'SelectSetter',
            props: {
              options: [
                { label: '左下', value: 'bottomLeft' },
                { label: '下居中', value: 'bottomCenter' },
                { label: '右下', value: 'bottomRight' },
                { label: '左上', value: 'topLeft' },
                { label: '上居中', value: 'topCenter' },
                { label: '右上', value: 'topRight' },
              ],
            },
          },
        },
      ]
    }
  ],
  configure: { supports: { style: true, className: true } },
};