import snippets from './snippets';
import {
  alignItems,
  backgroundColor,
  border,
  fontSize,
  lengthProp,
  padding,
  pxProp,
  width,
} from '../_utils/css';

export default {
  componentName: 'AMList',
  title: '列表',
  category: '数据展示',
  docUrl: 'https://mobile.ant.design/zh/components/list',
  group: '基础组件',
  props: [
    {
      name: 'header',
      title: {
        label: '标题',
        tip: 'header | 标题',
      },
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'mode',
      title: { label: 'mode', tip: 'mode | 显示模式' },
      propType: { type: 'oneOf', value: ['default', 'card'] },
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '默认',
                value: 'default',
              },
              {
                title: '卡片',
                value: 'card',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'default',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        fontSize('header', '标题字体大小'),
        fontSize('', '内容字体大小'),
        backgroundColor('active', '点击时的背景颜色'),
        padding('left', '左内边距padding'),
        padding('right', '右内边距padding'),
        border('top', '顶部边框样式'),
        border('bottom', '底部边框样式'),
        border('inner', '分割线样式'),
        alignItems('列表项的align-items', 'align-items', 'center'),
        width('prefix', '列表项左侧区域宽度'),
        pxProp('prefix-padding-right', '列表项左侧区域右边距'),
        lengthProp('extra-max-width', '列表项右侧宽度'),
      ],
    },
  ],
  configure: {
    supports: {
      events: [
        {
          name: 'onBack',
          description: '点击返回区域后的回调',
          template: "onBack(){\n// 点击返回区域后的回调\nconsole.log('onBack');}",
        },
      ],
      style: true,
    },
  },
  snippets,
};