<template>
<div class="hightlights"> 
    <div class="hightlight boxed">
        <ul>
            <li>{{ caTheo }} €</li>
            <li>CA "séances effectuées"</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ retrocession }} €</li>
            <li>Rétrocession</li>
        </ul>
    </div>
    <div class="hightlight boxed">
        <ul>
            <li>{{ notInvoiced }} €</li>
            <li>Non facturé</li>
        </ul>
    </div>
</div>
<repartition-chart/>
</template>

<script>
import { mapGetters } from 'vuex'
import { 
    caTheo,
    notInvoiced,
    retrocession,
} from '../lib/months'
import RepartitionChart from './graphs/RepartitionChart.vue'

export default {
    name: 'caRepartition',
    components: {
        RepartitionChart: RepartitionChart,
        },
    data () {
        return {}
        },
    computed: {
        ...mapGetters('config', {
            caProPercentage: 'caProPercentage',
        }),
        ...mapGetters('travail', {
            months: "months",
        }),
        caTheo: function () {return caTheo(this.months).toLocaleString()},
        notInvoiced: function () {return notInvoiced(this.months).toLocaleString()},
        retrocession: function () {return retrocession(this.months).toLocaleString()},

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

<style scoped>
.hightlights{
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>
