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

<script>
    import { mapGetters } from 'vuex'

    export default {
        props: {
            total: {
                type: Number,
                required: true
            },
            symbol: {
                type: String,
                required: true,
                default: '$'
            },
            separator: {
                type: String,
                default: '.'
            },
            decimals: {
                type: Number,
                default: 0
            }
        },
        methods: {
            getTotal() {
                return accounting.format(this.total, 2, '.', ',')
            },
            getSymbol() {
                return this.symbol
            }
        },
        mounted() {
            console.log(this)
        }
    }

</script>

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

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