import { Component, OnInit } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';
@Component({
  selector: 'app-scrollspy-demo',
  templateUrl: './scrollspy-demo.component.html',
  styleUrls: ['./scrollspy-demo.component.scss']
})
export class ScrollspyDemoComponent implements OnInit {

  followProperties: Array<Propertiy> = [
    {
        name: 'scrollspyData',
        value: 'Array',
        type: '@Input()',
        description: '跟随监听滚动的跟随项数组'
    },
    {
      name: 'currentSectionId',
      value: 'string',
      type: '@Input()',
      description: '当前active项id'
    },
    {
      name: 'fFollowType',
      value: 'side || tab',
      type: '@Input()',
      description: '跟随样式'
    },
    {
      name: 'scrollGroupId',
      value: 'string',
      type: '@Input()',
      description: '若一个页面中需要使用两次或以上该滚动监听功能，则除了第一次使用，其他每次使用都需要加上该属性，来标记该滚动属于哪个分组'
    }
  ];
  followothers:Array<Others> = [
    {
      name:'<ng-template scrollspyItem let-scrollItem = "scrollItem">',
      description: '支持跟随滚动项自定义样式'
    }
  ]
  contentProperties: Array<Propertiy> = [
    {
        name: 'fScrollSpyContainer',
        value: 'string',
        type: '@Input()',
        description: '当页面需要使用两次及以上该功能时，需要传递值，标志滚动属于哪个分组'
    },
    {
      name: 'offset',
      value: 'number',
      type: '@Input()',
      description: '点击及滚动时每个section的偏移量'
    }
  ];
  properties: Array<Propertiy> = [
    {
        name: 'fScrollSpy',
        value: 'string',
        type: '@Input()',
        description: '传递当前section唯一标识的id'
    },
    {
      name: 'fScrollGroup',
      value: 'string',
      type: '@Input()',
      description: '当一个页面中需要使用两次及以上该功能，需要传递值，标志滚动属于哪个分组'
    }
  ]
  others: Array<Others> = [
    {
      name:'fScrollChange',
      description: '监听滚动区域变化事件，接收参数为当前滚动到区域部分的id'
    }
  ];
  codePath = {
    baseDemo: 'assets/codes/scrollspy/basedemo',
    topDemo: 'assets/codes/scrollspy/topdemo',
    customDemo: 'assets/codes/scrollspy/customdemo'
  };

  monitors = [
    {
      'id':'basicMessage',
      'title':'基本信息基本信息'
    },
    {
      'id':'billsMessage',
      'title':'单据信息'
    },
    {
      'id':'businessDetail',
      'title':'业务明细'
    },
    {
      'id':'accessoryMessage',
      'title':'附件信息'
    }
  ];
  tabs = [
    {
      'id':'basic',
      'title':'基本信息'
    },
    {
      'id':'bills',
      'title':'单据信息'
    },
    {
      'id':'accessory',
      'title':'附件信息'
    }
  ];
  followtabs = [
    {
      'id':'basic1',
      'title':'基本信息'
    },
    {
      'id':'bills1',
      'title':'单据信息'
    },
    {
      'id':'accessory1',
      'title':'附件信息'
    }
  ];
  followtabs2 = [
    {
      'id':'basic2',
      'title':'基本信息'
    },
    {
      'id':'bills2',
      'title':'单据信息'
    },
    {
      'id':'accessory2',
      'title':'附件信息'
    }
  ];

  show = false;
  currentSection = 'basicMessage';
  currentTab = 'basic';
  currentTab1 = 'basic1';
  currentTab2 = 'basic2';
  // 显示类型
  fFollowType='side';
  constructor() { }

  ngOnInit() {}
  //监听currentSection变化
  scrollSectionChange(sectionId:string){
    this.currentSection = sectionId;
  }

  scrollTabChange(tabId:string){
    this.currentTab = tabId;
    //console.log(tabId);
  }
  scrollTabChange1(tabId:string){
    this.currentTab1 = tabId;
  }
  scrollTabChange2(tabId:string){
    this.currentTab2 = tabId;
  }
  changefFollowType(){
    this.fFollowType=this.fFollowType=='side'?'fixedTab':'side';
  }
  changemonitors(){
   this.monitors = [
     
      {
        'id':'businessDetail',
        'title':'业务明细'
      },
      {
        'id':'accessoryMessage',
        'title':'附件信息'
      }
    ];
  }
}