<template>
    <div class="seatWrap">
    <div class="seat" v-for="(seat, index) in seats" :key="index">
        <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">
            {{ seat }}
        </div>
        <div v-else-if="seat.startsWith(classType.value)" v-on:click="addSeatClick(seat)">
            {{ seat }}
        </div>
        <div v-else class="disabled">
            {{ seat }}
        </div>
        <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
    </div>
</div>

</template>

<script>
export default {
    propS: ["seats", "classType", "personCount", ],
    data: function() {
        return {
            chosenSeats: [],
        }
    },
    methods: {
        addSeatClick: function(seat) {
            if (this.chosenSeats.length < this.personCount) {
                this.chosenSeats.push(seat);
            }
            else {
                alert("Všichni cestující již sedí!");
            }
        },
    }

}
</script>

<style scoped>

</style>>
