<template lang="pug">
    .cart-total
        h2
            small.cart-total-currency {{ currencySymbol }}
            |
            | {{ formatTotal() }}
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        computed: mapGetters([
            'total',
            'currencySymbol'
        ]),
        methods: {
            formatTotal() {
                return accounting.format(this.total, 0, '.', ',')
            }
        }
    }

</script>

<style lang="sass">
    .cart-total
        width: 100%
        height: 50px

        h2
            width: 100%
            height: inherit
            margin: 0
            font-size: 30pt
</style>
