#Install npm i crttablecard

#USE

import { Component } from "@stencil/core";
import { CrtRow, CrtCardUniButton } from "../../model/crt-row/crt-row.model";

@Component({
    tag: 'crt-example',
})


export class Example {

    // JSON für Erzeugung des Headers
    get defaultHeaderButton(): any {
        return { text: "MORE", color: "green", crttitle: "Franz Obleing/NL" }
    }

    // JSON für Erzeugung der Tabelle
    get defaultRows(): CrtRow[] {
        let rows = [                                            // Wie in Java - eine Variable für ein Array                                
            { label: "Rechnungsnummer: ", value: "123456" },
            { label: "Abteilungs Nr.: ", value: "123" },
            { label: "Belegdatum: ", value: "12.12.12" },
            { label: "Ziel 1: ", value: "12.13.14" },
            { label: "Ziel 1 Skonto BW: ", value: "0.00% - 0.00" },
            { label: "Ziel 2 : ", value: "14.15.16" },
            { label: "Ziel 2 Skonto: BW ", value: "0.00% - 0.00" },
            { label: "Fällig am: ", value: "15.16.17" }
        ]
        return rows;
    }

    // Array für Erzeugung des Footers
    get defaultFooter(): CrtCardUniButton[] {
        let buttons = [
            {color: "red", text: "Ablehnen", icon: "./assets/icon/ablehnen.png"},
            {color: "blue", text: "Lorem Ipsum", icon: "./assets/icon/lorem.png"},
            {color: "green", text: "Freigeben", icon: "./assets/icon/haken.jpg"}
        ]
        return buttons;
    }

    render() {
        return (
            <crt-table-card
                rows={this.defaultRows}
                headerButton={this.defaultHeaderButton}
                color="grey"
                summary="500,00 EUR"
                buttons={this.defaultFooter}>
            </crt-table-card>
        )
    }
}