<template>
  <div class="ui-grid-filter">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'UiGridFilter',
  provide() {
    return {
      UiGridFilter: this
    }
  },
  inject: ['UiGrid'],
  props: {
    value: {
      type: Object
    }
  },
  data() {
    return {
      items: []
    }
  },
  created() {
    this.UiGrid.filterProps.items = this.items
    this.UiGrid.filterProps.value = this.value
  },
  methods: {
    handleRenderItem(item) {
      return {
        functional: true,
        render: (h, c) => {
          return item.render(h, c)
        }
      }
    },
    addItem(item) {
      if (!item || !item.id) {
        return
      }
      let index = -1
      this.items.some((v, i) => {
        if (v.id === item.id) {
          index = i
          return true
        }
      })
      if (index >= 0) {
        this.items.splice(index, 1, item)
      } else {
        this.items.push(item)
      }
    },
    removeItem(id) {
      this.items = this.items.filter(v => v.id !== id)
    }
  }
}
</script>
<style>
.bi-toolbar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
