<template>
<div class="hightlights"> 
    <div class="hightlight boxed">
        <ul>
            <li>{{ ca }} €</li>
            <li>CA</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ remuneration }} €</li>
            <li>Rémunération</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ caPersoUntouch }} €</li>
            <li>13e mois</li>
        </ul>
    </div>
</div>
<revenus-chart/>
</template>

<script>
import { mapGetters } from 'vuex'
import { 
    ca,
    caPersoUntouch,
    sum,
    mean,
} from '../lib/months'
import RevenusChart from '../components/graphs/RevenusChart.vue'

export default {
    name: 'caOnPeriod',
    components: {
        RevenusChart: RevenusChart,
        },
    data () {
        return {}
        },
    computed: {
        ...mapGetters('travail', {
            months: "months",
        }),
        ca: function () {return sum(Object.values(this.months).map(a => ca(a))).toLocaleString()},
        caMean: function () {return mean(Object.values(this.months).map(a => ca(a))).toLocaleString()},
        remuneration: function () {return sum(Object.values(this.months).map(a => a.remuneration)).toLocaleString()},
        caPersoUntouch: function () {return sum(Object.values(this.months).map(a => caPersoUntouch(a))).toLocaleString()},

      },
      mounted () {
      },
      methods: {
      },
}
</script>

<style scoped>
</style>
