<template>
    <div>
        <baseTemplate
            :currentCarInfo="year"
            neededCarInfo="What make is your vehicle?"
            :attritbutes="makes"
            :backFunction="goBack"
            :selectAttribute="selectMake"
            :transition='slideTransition'
        />
    </div>
</template>

<script>
import baseTemplate from './BaseTemplate';
import { mapState } from 'vuex';

export default {
  name: 'SelectCar',
  computed: {
      ...mapState(['year', 'makes', 'slideTransition'])
  },
  methods: {
      selectMake(make){
          this.$store.dispatch('selectMake', make);
      },
      goBack(){
          this.$store.state.slideTransition = 'slide_reverse'
          this.$router.push('/select-year');
      }
  }, 
  components: {
      baseTemplate
  }
}
</script>