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

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

<style lang="scss"></style>
