import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

import { ITextCol } from '../table.type';
import { ColBase } from './col.base';

@Component({
  selector: 'bixi-table-col-text',
  host: { '[class.bixi-table-col-text]': 'true' },
  template: `
    <div [ngStyle]="style">
      <span nz-tooltip [nzTooltipTitle]="tooltip" [ngStyle]="innerStyle">{{ value }}</span>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BixiTableColTextComponent extends ColBase {
  @Input() col: ITextCol;

  get innerStyle() {
    let _style: Partial<CSSStyleDeclaration> = {};
    if (this.col.ellipsis) {
      _style = {
        display: 'inline-block',
        maxWidth: '100%',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        verticalAlign: 'middle'
      };
    }
    return _style;
  }
}