<template>
  <div class="component component-filter_dropdown" :class="{ disabled: !!disabled }" v-on-clickaway="() => showOptions = false">
    <div class="value" :class="{ 'options-open' : !!showOptions }" @click="showOptions = !showOptions">
      <span class="text placeholder">Filter</span>
      <span class="icon"><i class="fas fa-caret-down"></i></span>
    </div>
    <ul class="options" v-show="!!showOptions">
      <li class="no-hover" v-for="item in options">
        <label>
          <input type="checkbox" v-model="selectedValue" :value="(!!optionKey) ? item[optionKey] : item" />
          {{ (!!optionLabel) ? item[optionLabel] : item }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mixin as clickaway } from 'vue-clickaway2';

  export default {
    props: [ "value", "options", "optionLabel", "optionKey", "label", "disabled" ],
    data() {
      return {
        showOptions: false
      };
    },
    mixins: [ clickaway ],
    computed: {
      selectedValue: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val);
        }
      }
    }
  }
</script>
