import { BasicProps, BasicState, EditSetting } from '../type'
export class Props extends BasicProps {
  public containerType = 'page';
  public backgroundImage?: any;
  public editSetting: EditSetting = {
    key: 'gaea-container',
    name: 'Container',
    isContainer: true,
    editors: [
      'Style',
      {
        field: 'overflow',
        text: '滚动设置',
        type: 'select',
        data: [
          {
            text: '默认',
            value: 'visible'
          }, 
          {
            text: '内容超出可滚动',
            value: 'auto'
          }, 
          {
            text: '内容超出不可滚动',
            value: 'hidden'
          },
        ]
      },
      {
        field: 'style.backgroundColor',
        text: '背景颜色',
        type: 'color'
      },
      {
        field: 'backgroundImage',
        text: '背景图片',
        type: 'image'
      },
      {
        field: 'style.opacity',
        text: '透明度',
        type: 'number',
        data: {
          useSlider: true,
          step: 1,
          inputRange: [0, 100],
          outputRange: [0, 1]
        }
      },
      {
        field: 'numbers',
        text: '每行显示数量',
        type: 'select',
        relate: 'list',
        data: [{
          text: '1个',
          value: 1
        }, {
          text: '2个',
          value: 2
        }]
      },
      {
        field: 'list',
        type: 'reveal-list',
        relate: 'list'
      },
    ]
  };

  public style: React.CSSProperties = {
    width: '10rem',
    height: '300px',
    backgroundSize: '100%',
    backgroundPosition: '0% 0%',
    backgroundRepeat: 'no-repeat'
  };

  public overflow = 'visible'
}

export class State extends BasicState {

}