<template>
    <div class="hightlight boxed">
        <ul>
            <li>{{ sumValue }} {{ unit }}</li>
            <li>{{ label }} </li>
        </ul>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { 
    sum,
} from '../lib/months'

export default {
    name: 'hightlightSum',
    components: {
    },
    props: {
        months: Object,
        attribute: String,
    },
    data () {
        return {}
    },
    computed: {
        ...mapGetters('config', {
            descOf: "descOf",
        }),
        theDesc: function () {
            return this.descOf(this.attribute)
        },
        sumValue: function () {
            return sum(Object.values(this.months).map(m => this.theDesc.output(m))).toLocaleString()
        },
        label: function () {
            return this.theDesc.label
        },
        unit: function () {
            return this.theDesc.unit
        },
    },
    mounted () {
    },
    methods: {
    },
}
</script>

<style scoped>
</style>
