<template>
    <div>
        <v-toolbar tile>
            <v-toolbar-title>{{user.lastname}}, {{user.firstname}}</v-toolbar-title>
        </v-toolbar>
        <div v-for="year in years" :key="years.indexOf(year)">
            <v-card style="margin-top: 3px;">
                <v-card-title>{{year}}</v-card-title>
                <Table v-bind:user="user" v-bind:year="year"/>
                <v-container fluid>
                    <v-col>
                        <v-row>
                            <v-col>
                                <v-label>Vorjahr:</v-label>
                            </v-col>
                            <v-col>
                                <v-chip outlined :text-color="getLastColor(user.creditList[year][1].last)">
                                    {{(user.creditList[year][1].last / 100).toFixed(2)}}
                                </v-chip>
                            </v-col>
                            <v-col>
                                <v-label>Gesamt:</v-label>
                            </v-col>
                            <v-col>
                                <v-chip outlined x-large
                                        :text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))">
                                    {{(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last) /
                                    100).toFixed(2)}}
                                </v-chip>
                            </v-col>
                        </v-row>
                    </v-col>
                </v-container>
            </v-card>
        </div>
    </div>
</template>

<script>
    import Table from "./Table";
    export default {
        name: "User",
        components: {Table},
        props: {
            user: Object,
        },
        data () {
            return {
                years: []
            }
        },
        created() {
            this.createYears()
        },
        methods: {
            createYears() {
                // eslint-disable-next-line no-console
                console.log(this.user.creditList)
                for (let year in this.user.creditList) {
                    // eslint-disable-next-line no-console
                    this.years.unshift(parseInt(year))
                }
            },
            getLastColor (value) {
                return value < 0 ? 'red' : 'green'
            },
            getAllSum(sum, lastYear) {
                // eslint-disable-next-line no-console
                console.log(sum, lastYear)
                return lastYear + sum
            },
        }
    }
</script>

<style scoped>

</style>
