import { BasicProps, BasicState, EditSetting } from '../type'

export class Props extends BasicProps {
  public containerType = 'page';
  public backgroundImage?: any;
  public editSetting: EditSetting = {
    key: 'gaea-bg-container',
    name: '背景容器',
    isContainer: true,
    editors: [
      'Style',
      {
        field: 'margin',
        text: '外边距',
        type: 'object',
        data: [
          {
            field: 'top',
            type: 'number',
            text: '上侧外边距'
          },
          {
            field: 'bottom',
            type: 'number',
            text: '下侧外边距'
          },
          {
            field: 'left',
            type: 'number',
            text: '左侧外边距'
          },
          {
            field: 'right',
            type: 'number',
            text: '右侧外边距'
          }
        ]
      },
      {
        field: 'padding',
        text: '内边距',
        type: 'object',
        data: [
          {
            field: 'top',
            type: 'number',
            text: '上侧内边距'
          },
          {
            field: 'bottom',
            type: 'number',
            text: '下侧内边距'
          },
          {
            field: 'left',
            type: 'number',
            text: '左侧内边距'
          },
          {
            field: 'right',
            type: 'number',
            text: '右侧内边距'
          }
        ]
      },
      {
        field: 'borderRadius',
        text: '圆角设置',
        type: 'object',
        data: [
          {
            field: 'topLeft',
            type: 'number',
            text: '左上圆角'
          },
          {
            field: 'topRight',
            type: 'number',
            text: '右上圆角'
          },
          {
            field: 'bottomLeft',
            type: 'number',
            text: '左下圆角'
          },
          {
            field: 'bottomRight',
            type: 'number',
            text: '右下圆角'
          }
        ]
      },
      {
        field: 'background',
        text: '背景设置',
        type: 'object',
        data: [
          {
            field: 'color',
            text: '背景颜色',
            type: 'color'
          },
          {
            field: 'headerImage',
            text: '顶部背景图片',
            type: 'image'
          },
          {
            field: 'repeatImage',
            text: '重复背景图片',
            type: 'image'
          },
          {
            field: 'footerImage',
            text: '底部背景图片',
            type: 'image'
          }
        ]
      }
    ]
  };

  public margin: {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
  } = {}

  public padding: {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
  } = {}

  public borderRadius: {
    topLeft?: number;
    topRight?: number;
    bottomRight?: number;
    bottomLeft?: number;
  } = {
      topLeft: 0,
      topRight: 0,
      bottomRight: 36,
      bottomLeft: 36
    }

  public background: {
    color?: string;
    headerImage?: { url: string };
    repeatImage?: { url: string };
    footerImage?: { url: string };
  } = {
      color: '#fff',
      headerImage: {
        url: 'https://lofter.lf127.net/1657692318324/header.png'
      }
    }
}

export class State extends BasicState {

}