<template>
  <div>
    <baseTemplate
      :currentCarInfo="year + ' ' + make"
      :neededCarInfo="'What is the model of your ' + make + '?'"
      :backFunction="goBack"
    >
      <carAttributes :attritbutes="models" :selectAttribute="selectModel" />
    </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", "models"]),
  },
  methods: {
    selectModel(model) {
      this.$store.dispatch("selectModel", model);
    },
    goBack() {
      this.$store.state.slideTransition = "slide_reverse";
      this.$router.push(`/select-make?year=${this.$store.state.year}`);
    },
  },
  components: {
    baseTemplate,
    carAttributes,
  },
};
</script>
