import { ComponentGroupInfo, ConfigDetailType } from '../page-object'

const data: ComponentGroupInfo = {
  id: 'layout',
  title: '布局',
  list: [
    {
      id: 'a-row',
      title: 'Row',
      ext: {
        icon: 'mpd-icon-row',
        help: '通过`row`在水平方向建立一组`column`（简写 col）',
        childrenComponent: ['a-col'],
        componentConfig: [
          {
            type: 'attr',
            title: '栅格间隔',
            name: 'gutter',
            help:
              '栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          },
          {
            type: 'attr',
            title: '布局模式',
            name: 'type',
            help: '布局模式，可选 flex，现代浏览器 下有效',
            inputList: [
              {
                component: ConfigDetailType.Select,
                attr: {
                  allowClear: true,
                  options: [
                    {
                      value: 'flex',
                      label: 'flex'
                    }
                  ]
                }
              }
            ]
          },
          {
            type: 'attr',
            title: '垂直对齐方式',
            name: 'align',
            help: 'flex 布局下的垂直对齐方式',
            inputList: [
              {
                component: ConfigDetailType.Select,
                attr: {
                  allowClear: true,
                  options: [
                    {
                      value: 'top',
                      label: '顶部'
                    },
                    {
                      value: 'middle',
                      label: '中间'
                    },
                    {
                      value: 'bottom',
                      label: '底部'
                    }
                  ]
                }
              }
            ]
          },
          {
            type: 'attr',
            title: '水平排列方式',
            name: 'justify',
            help: '	flex 布局下的水平排列方式',
            inputList: [
              {
                component: ConfigDetailType.Select,
                attr: {
                  allowClear: true,
                  options: [
                    {
                      value: 'start',
                      label: 'start'
                    },
                    {
                      value: 'end',
                      label: 'end'
                    },
                    {
                      value: 'center',
                      label: 'center'
                    },
                    {
                      value: 'space-around',
                      label: 'space-around'
                    },
                    {
                      value: 'space-between',
                      label: 'space-between'
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    },
    {
      id: 'a-col',
      title: 'Col',
      ext: {
        icon: 'mpd-icon-col',
        help: '你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素',
        childrenComponent: [],
        parentComponent: ['a-row'],
        componentConfig: [
          {
            type: 'attr',
            title: 'flex 布局填充',
            name: 'flex',
            group: 'Flex',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber
              }
            ]
          },
          {
            type: 'attr',
            title: '偏移量',
            name: 'offset',
            group: 'general',
            help: '栅格左侧的间隔格数，间隔内不可以有栅格',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber
              }
            ]
          },
          {
            type: 'attr',
            title: '栅格顺序',
            name: 'order',
            group: 'Flex',
            help: 'flex 布局模式下有效',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber
              }
            ]
          },
          {
            type: 'attr',
            title: '栅格向左移动格数',
            name: 'pull',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber
              }
            ]
          },
          {
            type: 'attr',
            title: '栅格向右移动格数',
            name: 'push',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber
              }
            ]
          },
          {
            type: 'attr',
            name: 'span',
            group: 'general',
            help: '为 0 时相当于 display: none',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          },
          {
            type: 'attr',
            name: 'xs',
            group: '栅格占位格数',
            help: '<576px 响应式栅格，可为栅格数或一个包含其他属性的对象',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          },
          {
            type: 'attr',
            name: 'sm',
            group: '栅格占位格数',
            help: '≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          },
          {
            type: 'attr',
            name: 'md',
            group: '栅格占位格数',
            help: '≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          },
          {
            type: 'attr',
            name: 'lg',
            group: '栅格占位格数',
            help: '≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          },
          {
            type: 'attr',
            name: 'xl',
            group: '栅格占位格数',
            help: '≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          },
          {
            type: 'attr',
            name: 'xxl',
            group: '栅格占位格数',
            help: '≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象',
            inputList: [
              {
                title: '数字框',
                component: ConfigDetailType.InputNumber,
                attr: {
                  max: 24,
                  min: 0
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

export default data