import {
  Component,
  Input,
  Output,
  EventEmitter,
  AfterViewInit, OnInit,
  HostBinding
} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

@Component({
  selector: 'dc-tab-title',
  template: `
    <div class="tab-title-wrap">
      <div [class]="defaultTitle === item ? 'title-item active' : 'title-item'" *ngFor="let item of titleDatas" (click)="setTabTitle(item)">
        {{item.title}}
        <em class="line" [@openClose]="item.cur ? 'open' : 'closed'">&nbsp;</em>
      </div>
    </div>`,
  animations: [
    trigger('openClose', [
      state('open', style({
        left: '50%',
        width: '0'
      })),
      state('closed', style({
        left: '0',
        width: '100%'
      })),
      transition('open => closed', [
        animate('0.3s')
      ]),
      transition('closed => open', [
        animate('0.1s')
      ]),
    ]),
  ],
  styles: [
      `.tab-title-wrap {
      border-bottom: 1px solid #d6d6d6;
      position:relative;
    }
    .tab-title-wrap .title-item{
      width: auto;
      line-height: 20px;
      font-size: 16px;
      color: #666;
      padding: 22px 0;
      margin: 0 30px 0 20px;
      font-weight: bold;
      cursor: pointer;
      display: inline-block;
      position:relative;
    }
    .tab-title-wrap .title-item:hover,
    .tab-title-wrap .active{
      color:#3FB992;
    }
    .line{
      position: absolute;
      width:100%;
      height: 4px ;
      background-color: #3FB992;
      left:0;
      bottom:0;
    }`
  ]
})

export class TabTitleComponent implements OnInit {
  _titleDatas: any;
  @Input() set titleDatas(v) {
    this._titleDatas = v;
  }
  @Input() defaultTitle: any;

  get titleDatas() {
    return this._titleDatas;
  }

  @Output() tabTitleChangeEvent = new EventEmitter();

  constructor() {
  }
  ngOnInit() {
    this.init();
  }
  init() {
    if (this.titleDatas == null && this.titleDatas.length == 0) {
      return;
    }
    this.titleDatas.map((item: any)=>{
      item.cur = true;
    });
    if (this.defaultTitle) {
      this.defaultTitle.cur = false;
    } else {
      this.titleDatas[0].cur = false;
      this.defaultTitle = this.titleDatas[0];
    }
  }
  // 点击tab标题
  setTabTitle(tab: any) {
    this.titleDatas.map((item: any)=>{
      item.cur = true;
    });
    tab.cur = false;
    this.defaultTitle = tab;
    this.tabTitleChangeEvent.emit(tab);
  }
}