import { Component, OnInit, Input, Output, Directive, TemplateRef, ContentChild,EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[progressStepItem]'
})
export class ProgressStepItemTemplateDirective {
  constructor(public template: TemplateRef<any>) {}
}

@Directive({
  selector: '[progressStepExtend]'
})
export class ProgressStepExtendTemplateDirective {
  constructor(public template: TemplateRef<any>) {}
}


export interface stepMessage {
  "id": string,
  "title": string,
  "icon"?:string,
  "status"?:string,
  "clickDisable"?:boolean,
  "hidden"?:boolean,
  "class"?:string
}
export interface progressData {
  activeIndex:number,
  stepMessages:stepMessage[]
}

@Component({
  selector: 'farris-progress-step',
  templateUrl:'./progress-step.component.html',
  styleUrls:[
    './progress-step.component.scss'
  ]
})
export class ProgressStepComponent implements OnInit, OnChanges {

  @ContentChild(ProgressStepItemTemplateDirective, {read: TemplateRef}) progressStepTemplate: TemplateRef<any>;
  @ContentChild(ProgressStepExtendTemplateDirective, {read: TemplateRef}) progressStepExtendTmpl: TemplateRef<any>;

  //进度条数据
  // @Input() stepData:progressData;

  /**横向horizontal、竖向排列vertical*/
  @Input() direction = 'horizontal';
  /**是否铺满 */
  @Input() fill:boolean = false;
  /**是否支持点击 */
  @Input() clickable:boolean = false;
  // 步骤条整体样式
  @Input() stepsCls='';
  @Input() fHeight:number;
  // 步骤条Style,写法 [stepStyle]="{'max-width':'100px'}"
  @Input() stepStyle:any;
  @Output('stepClick') stepClick = new EventEmitter();
  

  @Input() steps: stepMessage[];
  @Input() currentId: string;
  @Input() storedIndexState:boolean = false;

  _subStepData;
  @Input()
  set subStepData(value){
    this._subStepData = value;
  }
  get subStepData(){
    return this._subStepData;
  }

  stepMessages: stepMessage[];
  activeIndex:number = 0; //从0开始
  currentIndex:number;

  private innerStepData: progressData;

  constructor() { }

  ngOnInit() {
  }

  _stepData:progressData;
  @Input()
  set stepData(value){
    // if(value['stepMessages']&&value['stepMessages'].length){
    //   value['stepMessages'].forEach(step => {
    //     //if(typeof step.status === 'undefined'){
    //       step.status = '';
    //     //}
    //   });
    //   this.stepMessages = value['stepMessages'].filter((step) =>{
    //     return !step.hidden;
    //   });
    // }
    // this.activeIndex = value['activeIndex'];
    setTimeout(() => {
      if(value){
        this.stepInit(value);
      }
    });
  }
  get stepData(){
    return this._stepData;
  }

  ngOnChanges(changes: SimpleChanges) {
    // if (changes['stepData'] && this.stepData) {
    //   // if(this.stepData['stepMessages']&&this.stepData['stepMessages'].length){
    //   //   this.stepData['stepMessages'].forEach(step => {
    //   //     //if(typeof step.status === 'undefined'){
    //   //       step.status = '';
    //   //     //}
    //   //   });
    //   //   this.stepMessages = this.stepData['stepMessages'].filter((step) =>{
    //   //     return !step.hidden;
    //   //   });
    //   // }
    //   // this.activeIndex = this.stepData['activeIndex'];
    //   this.stepInit();
    // } else 
    if (changes['steps'] || changes['currentId']) {
      if (!this.steps || this.stepData) { return; }
      this.steps.forEach(item => item.status = '');
      this.stepMessages = this.steps.filter(item => !item.hidden);
      let index = this.stepMessages.findIndex(item => item.id === this.currentId);
      this.activeIndex = index === -1 ? 0 : index;
    }
  }

  /**点击某一步 */
  listClick(step,index){
    if(this.clickable){
      this.stepClick.emit({'step':step,'index':index});
    }
  }

  goStep(index){
    if(this.storedIndexState){
      if(this.activeIndex == index){
        this.currentIndex = null;
      }
      else{
        this.currentIndex = index;
      }
    }
    else{
      this.stepMessages.forEach((step, i )=> {
        if(i<index){
          step.status = 'finish';
        }
        else if(i>index){
          step.status = '';
        }
        else{
          step.status = 'active';
        }
      });
      this.activeIndex = index;
    }
    
  }

  /**下一步 */
  nextStep(){
    if(this.storedIndexState && this.currentIndex < this.stepMessages.length-1){
      this.currentIndex++;
    }
    if(this.activeIndex < this.stepMessages.length-1){
      this.stepMessages[this.activeIndex].status = 'finish';
      this.stepMessages[this.activeIndex+1].status = 'active';
      this.activeIndex++;
      if(this.storedIndexState){
        this.currentIndex = this.activeIndex;
      }

    }
    //return this.activeIndex;
  }
  /**上一步 */
  prevStep(){
    // if(this.storedIndexState && this.currentIndex > 0){
    //   this.currentIndex--;
    // }
    if(this.activeIndex > 0){
    // else if(this.activeIndex > 0 && !this.storedIndexState){
      this.stepMessages[this.activeIndex].status = '';
      this.stepMessages[this.activeIndex-1].status = 'active';
      this.activeIndex--;
      if(this.storedIndexState){
        this.currentIndex = this.activeIndex;
      }
      
    }
    //return this.activeIndex;
  }

  getCurrentStepIndex(){
    return this.activeIndex;
  }

  stepInit(data){
    if(data['stepMessages']&&data['stepMessages'].length){
      data['stepMessages'].forEach(step => {
        //if(typeof step.status === 'undefined'){
          step.status = '';
        //}
      });
      this.stepMessages = data['stepMessages'].filter((step) =>{
        return !step.hidden;
      });
    }
    this.activeIndex = data['activeIndex'];
    if(this.storedIndexState){
      this.currentIndex = this.activeIndex;
    }
  }

  setProgressData(progressData:progressData){
    if(progressData){
      //this.stepData = progressData;
      this.stepInit(progressData);
    }
  }

  setActiveIndex(num:number){
    let activeNum:number  = (num>= 0 && num < this.stepMessages.length)? num: 0;
    this.activeIndex = activeNum;
    
  }
}