import {Component, Input, Output, EventEmitter, OnInit} from '@angular/core';

@Component({
  selector: 'dc-table-column-new',
  template: `
    <div *ngIf="show" class="table-font" [class.rows]="rows" [style.max-height]="maxHeight" [style.-webkit-line-clamp]="rows"  [title]="(!header.hideTitle && data && data[field]) || ''">
      <ng-content></ng-content>
    </div>
  `,
  styles: [`
    .table-font {
      font-size: 12px;
      line-height: 50px;
      height: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .table-font.rows {
      line-height: 20px;
      padding:10px 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      white-space: normal;
      word-break: break-all;
    }
  `]
})
export class ColumnNewComponent implements OnInit {
  @Input() header: any;
  @Input() data: any;
  @Input() width: any;
  @Input() field: string;
  @Input() rows: number;
  show: boolean;
  maxHeight: string;

  constructor() {
  }

  ngOnInit(): void {
    if (this.header.field == this.field) {
      this.show = true;
    }
    if(this.rows){
      this.maxHeight = this.rows*20 + 14 + 'px';
    }
  }
}