<template>
<div>
    <baseTemplate :currentCarInfo="year + ' ' + make + ' ' + model" neededCarInfo="What is your damage?">
        <div class="damage-section text-center">
            <div class="choose-damage row">
                <div class="col">
                    <radioCard />
                </div>
                <div class="col">
                    <radioCard />
                </div>
                <div class="col">
                    <radioCard />
                </div>
            </div>
            <transition name="fade">
                <div v-if="damage" class="how-bad mt-3">
                    <span class="text-center fs-6 fw-bold">How bad is it?</span>
                    <div class="choose-how-bad row mt-2">
                        <div class="col">
                            <radioCard />
                        </div>
                        <div class="col">
                            <radioCard />
                        </div>
                    </div>
                </div>
            </transition>
            <div class="next-action row">
                <div class="col">
                    <div v-on:click="goBack" class="change">
                        <span>Change Vehicle</span>
                    </div>
                </div>
            </div>
        </div>

    </baseTemplate>
</div>
</template>

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

export default {
    name: 'SelectCar',
    computed: {
        ...mapState(['year', 'make', 'model'])
    },
    data() {
        return {
            damage: ''
        }
    },
    methods: {
        chooseDamage(damage) {
            this.damage = damage
            console.log(this.damage)
        },
        goBack() {
            this.$store.state.slideTransition = 'slide_reverse';
            this.$store.commit('removeStyle')
            this.$router.push(`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`);
        }
    },
    components: {
        baseTemplate,
        radioCard
    }
}
</script>
