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

export interface Image {
  width: number;
  height: number;
  url: string;
}
export class Props extends BasicProps {
  public editSetting: EditSetting = {
    key: 'gaea-tab',
    name: 'Tab',
    // 暂时先加在这个，help是此组件的说明文档链接
    help: 'https://note.youdao.com/s/2LKLmNTz',
    isContainer: true,
    isAutoHeight: true,
    defaultPosition: {
      top: '0',
      left: '0'
    },
    editors: [
      {
        field: 'listStyle',
        text: '是否开启容器的内间距',
        type: 'boolean'
      },
      {
        field: 'marginColor',
        text: '内边框颜色(默认蓝色)',
        type: 'color'
      },
      {
        field: 'marginLR',
        text: '开启内边距:左右间距距离',
        type: 'number'
      },
      {
        field: 'marginTop',
        text: '模块上间距',
        type: 'number',
      },
      {
        field: 'backgroudColor',
        text: '内容背景颜色',
        type: 'color'
      },
      {
        field: 'tabColor',
        text: 'tab背景颜色',
        type: 'color'
      },
      {
        field: 'tabHeight',
        text: 'tab高度',
        type: 'number'
      },
      {
        field: 'type',
        text: '样式类型',
        type: 'select',
        data: [
          {
            text: '滑块',
            value: 1
          },
          {
            text: 'Tab',
            value: 2
          },
          {
            text: '内边距滑块（无背景色）',
            value: 3
          },
          {
            text: '按钮图片',
            value: 4
          }
        ]
      },
      {
        field: 'tabType',
        text: '切换方式',
        type: 'select',
        data: [
          {
            text: '平铺',
            value: 1
          },
          {
            text: '点击切换',
            value: 2
          }
        ]
      },
      {
        field: 'tabFixed',
        text: '是否跟随页面滚动',
        type: 'boolean'
      },
      {
        field: 'autoScrollToView',
        text: '自动切换后是否定位到当前位置',
        type: 'boolean'
      },
      {
        field: 'tabs',
        text: 'Tab配置',
        type: 'array',
        data: [
          {
            field: 'name',
            type: 'string',
            text: '名字'
          },
          {
            field: 'focusImage',
            text: '选中Tab背景图片',
            type: 'image'
          },
          {
            field: 'unfocusImage',
            text: '未选中Tab背景图片',
            type: 'image'
          },
        ]

      },

    ]
  };
  public listStyle: boolean = false
  public backgroudColor: string = '#fff';
  public tabColor: string = '';
  public marginColor: string = ''
  public marginLR: number = 0
  public isAutoHeight = true;
  public type: number = 1;
  public tabType: number = 2;
  public tabFixed: boolean = false;
  public tabHeight: number = 80;
  public marginTop: number = 0;
  public tabs: { name: string; focusImage: Image; unfocusImage: Image }[] = [];
  public autoScrollToView: boolean = false;

}

export class State extends BasicState {
  public selectedIndex = 0;
}