import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Directive, ElementRef, Input } from "@angular/core";
import { NzPopoverDirective } from "ng-zorro-antd/popover";

@Directive({
	selector: "[jwTdOverflow]",
})
export class TdOverflowDirective implements AfterViewInit {
	@Input("jwTdOverflow") content!: string;

	constructor(
		private elementRef: ElementRef,
		private popoverDirective: NzPopoverDirective,
		private cdr: ChangeDetectorRef
	) {}

	ngOnInit() {}

	ngAfterViewInit(): void {
		const element = this.elementRef.nativeElement as HTMLElement;
		console.log("element", element.offsetWidth, element.scrollWidth);
		// 如果元素的实际宽度大于可见宽度，就使用 nz-popover 指令来显示完整的内容
		if (element.offsetWidth < element.scrollWidth) {
			this.popoverDirective.content = this.content;
		} else {
			this.popoverDirective.trigger = null;
			this.popoverDirective.content = "da";
			element.textContent = this.content;
		}
	}
}