<template>
    <b-taginput
        v-model="selectedTags"
        :data="filteredTags"
        autocomplete
        :open-on-focus="true"
        field="name"
        icon="label"
        @typing="getFilteredTags"
        @input="onInputTag">
    </b-taginput>
</template>

<script>
export default {
  name: "LeanispInputTag",
  created() {
      if (this.$store && this.listCode) {
          this.tags = this.$store.getters.getTagsByList(this.listCode);
          this.filteredTags = this.tags;
      }
  },
  props: ["listCode"],
  data() {
      return {
        selectedTags: [],
        tags: [],
        filteredTags: []
      }
  },
  methods: {
      getFilteredTags(text) {
          this.filteredTags = this.tags.filter((tag) => {
              return tag.name.toString().toLowerCase().indexOf(text.toLowerCase()) >= 0
          })
      },
      onInputTag () {
          let tagList = this.selectedTags
            .map((tag) => {
                return {
                    code: tag.code,
                    name: tag.name,
                    attributes: tag.attributes
                }
            })
            this.$emit('input', tagList);
      }
  }
}
</script>
