<script>
import { unique } from './util'

export default {
  name: 'UiFilterItem',
  inject: ['UiFilter'],
  props: {
    label: {
      type: String
    },
    position: {
      type: String,
      default: 'left',
      validator(value) {
        return ['left', 'right'].indexOf(value) >= 0
      }
    }
  },
  data() {
    return {
      info: {
        count: 0
      }
    }
  },
  computed: {
    item() {
      return {
        id: this.id,
        props: this.$props,
        info: this.info,
        render: () => {
          return this.$scopedSlots.default()
        }
      }
    }
  },
  created() {
    this.id = unique()
    this.UiFilter.addItem(this.item)
  },
  beforeDestroy() {
    this.UiFilter.removeItem(this.id)
  },
  updated() {
    this.info.count++
  },
  render() {
    return null
  }
}
</script>
