<template>
   <div class="list-item" :class="{ checked: isChecked }">
      <div class="container">
         
         <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
         <input class="" 
            type="checkbox" 
            v-model="selected" 
            :value="item" />
            
         {{ item.text }}
         
      </div>
      <div class="right_actions">
         
         <span class="badge badge-pill badge-secondary" :title="item.id">
            {{ $t('item.type_person') }}
         </span>
         <a class="sc-button bt-show" target="_blank" :title="item.id" :href="url.show"></a>
         
      </div>
   </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
   name: 'PersonSuggestion',
   props: ['item'],
   data() {
      return {
         url: {
            show: '/fr/person/' + this.item.id + '/general',
            edit: '/fr/person/' + this.item.id + '/general/edit'
         }
      }
   },
   computed: {
      selected: {
         set(value) {
            this.$store.dispatch('updateSelected', value);
         },
         get() {
            return this.$store.state.add_persons.selected;
         }
      },
      isChecked() {
         return (this.selected.indexOf(this.item) === -1) ? false : true;
      }
   }
};
</script>
