import { Directive, Input, ElementRef, Host, HostBinding, OnInit, Renderer2 } from '@angular/core';
@Directive({
    selector: '[farris-container]'
})
export class FarrisContainerDirective implements OnInit {
    @HostBinding('class.container') isContainer = true;
    // 可以设置宽度和高度
    // 设置宽 高属性
    _width: string | number;
    _height: string | number;
    @Input()
    get width() {
        // 对各个单位进行处理
        return this._width;
    }
    set width(width: any) {
        this._width = this.resolveSize(width);
    }
    @Input()
    get height() {
        return this._height;
    }
    set height(height: any) {
        this._height = this.resolveSize(height);
    }
    constructor(private el: ElementRef, private render: Renderer2) {
    }
    ngOnInit() {
        // 宽高  赋值
        this.render.setStyle(this.el.nativeElement, 'width', this.width);
        this.render.setStyle(this.el.nativeElement, 'height', this.height);
    }
    /*宽高类型是 string或者number 解析宽高  尺寸 */
    resolveSize(size) {
        const regex = /px|em|rem|pt|%/;
        // 说明是字符串
        return regex.test(size) ? `${parseInt(size, 10)}${size.match(regex)[0]}` : `${size}px`;
    }
}