<template>
  <b-menu>
    <div>
      <b-menu-list v-for="category in tags" v-bind:key="category.name" :label="category.name">
        <div v-for="tag in category.tags" v-bind:key="tag.name" class="field">
          <b-checkbox
          :native-value="tag.name"
          v-model="checkboxGroup"
          @input="changeTag">{{tag.name}}</b-checkbox>
        </div>
      </b-menu-list>
    </div>
  </b-menu>
</template>

<script>
export default {
  name: 'Filters',
  props: ['tags'],
  data () {
    return {
      checkboxGroup: [],
      perfValue: 0
    }
  },
  methods: {
    changeTag () {
      this.$emit('setTags', this.checkboxGroup, this.convertPerf())
    },
    convertPerf () {
      switch (this.perfValue) {
        case 0 : return 10
        case 1 : return 100
        case 2 : return 1000
        case 3 : return 10000
      }
    }
  }
}
</script>

<style scoped>
.menu {
  margin: 15px;
}
</style>