<template>
   <div class="item-bloc">
      <div class="item-row">
         <div class="item-col">
            <h4>{{ $t(bloc.title) }}</h4>
         </div>
         <div class="item-col">
            <ul class="list-content">
               <person-badge
                  v-for="person in bloc.persons"
                  v-bind:key="person.id"
                  v-bind:person="person"
                  @remove="removePerson">
               </person-badge>
            </ul>
         </div>
      </div>
   </div>
</template>

<script>
import PersonBadge from './PersonBadge.vue';
export default {
   name:"PersonsBloc",
   components: {
      PersonBadge
   },
   props: ['bloc', 'setPersonsInBloc'],
   methods: {
      removePerson(item) {
         console.log('@@ CLICK remove person: item', item);
         this.$store.dispatch('removePersonInvolved', item);
         this.setPersonsInBloc();
      }
   }
}
</script>

<style lang="scss">

</style>
