<template>
  <div :class="classes" @click="handleClick">
    <filter-label :value="input.label" :disabled="input.disabled">
      <template v-slot:left>
        <span class="point"></span>
      </template>
    </filter-label>
  </div>
</template>

<script>
import FilterLabel from './filter-label'
export default {
  name: 'u-filter-item',
  components: {
    FilterLabel
  },
  props: {
    input: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    classes () {
      return {
        'uif-filter-active': this.input.value
      }
    }
  },
  methods: {
    handleClick () {
      if (this.input.disabled) return false
      const value = !this.input.value
      this.$set(this.input, 'value', value)
      this.$emit('u-change', this.input.name, value)
    }
  }
}
</script>
