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

@Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.less']
})
export class GridComponent implements OnInit {
    gutter = 16;
    count = 4;
    marksGutter = {
        8: 8,
        16: 16,
        24: 24,
        32: 32,
        40: 40,
        48: 48
    };
    marksCount = {
        2: 2,
        3: 3,
        4: 4,
        6: 6,
        8: 8,
        12: 12
    };
    code = '';
    orderList = [1, 2, 3, 4];

    generateArray(value) {
        return new Array(value);
    }

    generateCode() {
        const html = [];
        html.push(`<div nz-row [nzGutter]="${this.gutter}">\r\n`);
        for (const i of this.generateArray(this.count)) {
            html.push(`    <div nz-col [nzSpan]="${24 / this.count}"></div>\r\n`);
        }
        html.push(`</div>`);
        this.code = html.join('');
    }

    ngOnInit() {

        this.generateCode();

        setTimeout(_ => {
            this.orderList = [...this.orderList.reverse()];
        }, 10000);
    }
}