<template>
  <div class="mm-table-filter">
    <ui-dropdown
      :visible.sync="visible"
      @after-leave="saveFilter">
      <ui-icon
        :active="!!filters.length"
        name="filterlist"
        size="10px"
        hover-fill="#1890ff"
        active-fill="#1890ff"
        fill="#898989"></ui-icon>
      <div
        slot="dropdown"
        class="mm-table-filter-dropdown">
        <ul class="mm-table-filter-list">
          <li
            v-for="(filter, index) of column.filters"
            :key="index">
            <ui-checkbox
              v-model="filters"
              :value="filter.value"
              :label="filter.label"></ui-checkbox>
          </li>
        </ul>
        <div class="mm-table-filter-buttons">
          <a
            class="mm-table-filter-button"
            @click="setFilter">
            确定
          </a>
          <a
            class="mm-table-filter-button"
            @click="clearFilter">
            重置
          </a>
        </div>
      </div>
    </ui-dropdown>
  </div>
</template>

<script>
import isFunction from "lodash/isFunction"
import Icon from "../icon"
import Dropdown from "../dropdown"
import Checkbox from "../checkbox"

export default {
  name: "mm-table-filter",
  components: {
    "ui-checkbox": Checkbox,
    "ui-dropdown": Dropdown,
    "ui-icon": Icon,
  },
  props: {
    column: Object,
    store: Object,
  },
  data() {
    return {
      filters: [],
      visible: false,
    }
  },
  inject: {
    rootTable: {
      from: "mm-table",
      default: null,
    },
  },

  methods: {
    saveFilter() {
      const data = {
        filter: this.column.key,
        keywords: [...this.filters],
        onFilter: this.column.onFilter,
      }
      this.store.setFilter(data)
      if (isFunction(this.rootTable.onFilter)) {
        this.rootTable.onFilter(data)
      }
    },
    setFilter() {
      this.visible = false
    },
    clearFilter() {
      this.filters = []
      this.visible = false
    },
  },
}
</script>
