import { Component, Input, Output, OnInit, OnChanges, OnDestroy, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { debug } from 'util';


@Component({
    selector: 'cm-from-layout',
    templateUrl: 'cmForm.component.html',
    styleUrls: ['./cmForm.component.less']
})
export class cmFormComponent implements OnInit, AfterViewInit {
    isCollapse: boolean = false;
    isShow: boolean = false;
    html: any;
    top: any;
    length: number;
    maxWidth: number;
    maxTop: number;
    maxLeft: number;

    constructor(private ref: ElementRef) {

    }
    ngOnInit() {
        this.toggleCollapse()
        setTimeout(() => {
            this.html = this.ref.nativeElement.querySelector('.leftBox');
            this.top = this.html.children[0]['offsetTop']
            this.length = this.html.children.length;
            this.maxWidth = this.html.children[0]['offsetWidth'] + this.html.children[0]['offsetLeft']
            this.maxTop = this.html.children[0]['offsetTop']
            this.maxLeft = this.html.children[0]['offsetLeft']
            for (var i = 0; i < this.length; i++) {
                if (this.html.children[i]['offsetTop'] > this.top) {
                    this.isShow = true
                }
                if (this.html.children[i]['offsetTop'] > this.maxTop) {
                    this.maxTop = this.html.children[i]['offsetTop']
                }
                if (this.html.children[i]['offsetLeft'] > this.maxLeft) {
                    this.maxLeft = this.html.children[i]['offsetLeft']
                }
            }
            for (var i = 0; i < this.length; i++) {
                // console.log(this.maxTop,this.html.children[i]['offsetTop'])           
                if (this.html.children[i]['offsetTop'] == this.maxTop) {
                    // console.log(this.html.children[i])               
                    this.html.children[i].style.marginBottom = "0"
                } else {
                    this.html.children[i].style.marginBottom = "16px"
                }
            }
            for (var i = 0; i < this.length; i++) {
                // console.log(this.maxTop,this.html.children[i]['offsetTop'])           
                if (this.html.children[i]['offsetLeft'] == this.maxLeft) {
                    // console.log(this.html.children[i])               
                    this.html.children[i].style.marginRight = "0"
                } else {
                    this.html.children[i].style.marginRight = "24px"
                }
            }
        }, 0)

    }
    toggleCollapse() {
        this.isCollapse = !this.isCollapse;
        for (var i = 1; i < this.length; i++) {
            if (this.isCollapse == false && this.html.children[i]['offsetTop'] > this.top) {
                this.html.children[i]["style"]['display'] = "none";
            } else {
                this.html.children[i]["style"]['display'] = "";
            }
        }
        for (var i = 0; i < this.length; i++) {
            if (this.isCollapse == false) {
                this.html.children[i].style.marginBottom = "0"
            } else {
                this.html.children[i].style.marginBottom = "16px"
                // console.log(this.html.children[i]['offsetTop'],this.maxTop)
                if (this.html.children[i]['offsetTop'] == this.maxTop) {
                    // console.log(this.html.children[i])
                    this.html.children[i].style.marginBottom = "0"
                } else {
                    this.html.children[i].style.marginBottom = "16px"
                }
            }
        }
    }
    ngAfterViewInit() {
    }
}