<template lang="pug">
    .payments-step
        .move-step
            grid(:items='moves' @onSelect='selectMove' :currency='currencyInvoice')
            select-moves(:items='movesPayments' :total="movesPaymentsTotal" @onDeleteIntem='removeMovePayments' :currency='currencyInvoice')
</template>
<script>
    import Grid from '@@/moveLine/MovesGrid'
    import SelectMoves from '@@/moveLine/SelectedMovesGrid'

    import {mapGetters, mapActions } from 'vuex'
    import { SELECT_MOVE, REMOVE_MOVE_PAYMENTS } from '@/constants/actionTypes'

    export default {
        components: {
            Grid,
            SelectMoves
        },
        computed: mapGetters([
            'moves',
            'movesPayments',
            'movesPaymentsTotal',
            'currencyInvoice',
        ]),
        methods: mapActions([
            SELECT_MOVE,
            REMOVE_MOVE_PAYMENTS
        ])
    }
</script>
<style lang="sass">
    .move-step
        width: 100%
        height: 100%
        padding-right: 5px
</style>
