import { Component, OnInit, ViewChild, Renderer2, Input, Output, EventEmitter, ContentChild, TemplateRef, HostBinding } from '@angular/core';
import { WalkerDetailDirective } from './page-walker.directive'

@Component({
  selector: 'farris-page-walker',
  templateUrl: './page-walker.component.html',
  styleUrls: ['./page-walker.component.scss']
})
export class PagewalkerComponent implements OnInit {
  @ContentChild(WalkerDetailDirective, {read: TemplateRef}) detailTemplate: TemplateRef<any>;
  @ViewChild('detailImg') detailImg;
  // @ViewChild('detailContent') detailContent;
  @ViewChild('detailWrapper') detailWrapper;
  // 唯一标记
  @Input() walkId = '';
  //提示详情部分宽度 单位px
  @Input() contentWidth:number = 460;
  @Input() pagelength:number = 1;
  @Input() currentIndex:number = 0;
  //内置提示标题和副标题
  @Input() title = '标题';
  @Input() subtitle;
  @Input() imgSrc:string;
  @HostBinding('class.f-component-walk-page') addClass = true;
  //位置坐标 [x,y]
  _coord:number[] = [0,0];
  _size:number[] = [0,0];
  //提示详情展示位置
  @Input() position:'left' | 'right' | 'top' | 'bottom' = 'right';
  //提示详情项的数组
  pageWalkSteps;
  //当前页是否为第一步
  firstStep:boolean = false;
  lastStep:boolean = false;
  imgWidth:number = 0;
  imgHeight:number = 0;
  pageTips = [];
  //显示位置坐标
  @Input()
  set coord(pos:number[]){
    if(pos){
      this._coord = pos;
      setTimeout(()=>{
        this.render.setStyle(
          this.detailWrapper.nativeElement,
          'left',
          this._coord[0] + 'px'
        );
        this.render.setStyle(
            this.detailWrapper.nativeElement,
            'top',
            this._coord[1] + 'px'
        );
      })
    }
  }
  get coord() {
    return this._coord;
  }
  @Input()
  set size(size:number[]){
    if(size){
      this._size = size;
      setTimeout(()=>{
        this.render.setStyle(
            this.detailImg.nativeElement,
            'width',
            this._size[0] + 'px'
        );
        this.render.setStyle(
            this.detailImg.nativeElement,
            'height',
            this._size[1] + 'px'
        );
      });
    }
  }
  get size() {
    return this._size;
  }

  @Output() walkSelected = new EventEmitter<any>();
  @Output() nextStep = new EventEmitter<any>();
  @Output() prevStep = new EventEmitter<any>();
  @Output() closeWakler = new EventEmitter<any>();
  @Output() finishWakler = new EventEmitter<any>();
  constructor( public render: Renderer2 ) {
  }

  ngOnInit() {
    if(this.pagelength>0){
      for(let i = 0; i< this.pagelength; i++){
        this.pageTips.push(i);
      }
    }
    this.firstStep = (this.currentIndex === 0);
    this.lastStep = (this.currentIndex === this.pagelength - 1);
    
  }

  next(){
    // this.walkService.nextStep();
    this.nextStep.emit();
  }

  prev(){
    // this.walkService.prevStep();
    this.prevStep.emit();
  }

  finish(){
    // this.walkService.finishWalk();
    this.finishWakler.emit();
  }

  close(){
    // this.walkService.closeWalk();
    this.closeWakler.emit();
  }

}