<template>
    <div class="cancelButtonArea">
        <ButtonBasic
            v-if="state.isCancelButtonVisible"
            class="cancel-btn"
            :label="'Cancel'"
            :type="'tertiary'"
            :size="'nvmt-size'"
            @click="cancelButtonClick()"
        />
    </div>
</template>

<script>
import {TruckAreaVuexConstants} from '../../TruckAreaVuexConstants';
import ButtonBasic from '@navis-npm/tos-storybook/src/components/buttons/ButtonBasic';
export default {
    name: 'CancelButton',
    components: {
        ButtonBasic
    },
    computed: {
        /**
         * Getter for the state object in vuex
         * @return {Object}
         */
        state: function() {
            return this.$store.state;
        }
    },
    methods: {
        /**
         * Click cancel button
         */
        cancelButtonClick() {
            this.$store.dispatch(TruckAreaVuexConstants.CLICK_CANCEL_BUTTON);
        }
    }
};
</script>

<style scoped>
    .cancelButtonArea {
        width: 166px;
        height: 64px;
        position: fixed;
        bottom: 74px;
        left: 0;
    }
    .cancel-btn {
        display: block;
        margin: 8px auto;
    }
</style>