<template>
    <div>
        <baseTemplate
            :currentCarInfo="year + ' ' + make + ' ' + model"
            :neededCarInfo="'What style is your ' + model + '?'"
            :backFunction="goBack"
        >
            <carAttributes
                :attritbutes="styles"
                :selectAttribute="selectStyle"
            />
        </baseTemplate>
    </div>
</template>

<script>
import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
import carAttributes from '@/commonComponents/carAttributes/carAttributes';
import { mapState } from 'vuex'

export default {
  name: 'SelectCar',
  computed: {
      ...mapState(['year', 'make', 'model', 'styles'])
  },
  methods: {
      selectStyle(style){
          this.$store.dispatch('selectStyle', style);
      },
      goBack(){
          this.$store.state.slideTransition = 'slide_reverse';
          this.$router.push(`/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`);
      }
  }, 
  components: {
      baseTemplate,
      carAttributes
  }
}
</script>