<template>
  <div class="mm-table-sorter">
    <ui-icon
      :active="store.operations.sortColumn === column && store.operations.sortOrder"
      name="chevronup"
      size="10px"
      fill="#898989"
      hover-fill="#1890ff"
      active-fill="#1890ff"
      @click="sort(column, true)"></ui-icon>
    <ui-icon
      :active="store.operations.sortColumn === column && !store.operations.sortOrder"
      name="chevrondown"
      size="10px"
      fill="#898989"
      hover-fill="#1890ff"
      active-fill="#1890ff"
      @click="sort(column, false)"></ui-icon>
  </div>
</template>

<script>
import isFunction from "lodash/isFunction"
import Icon from "../icon"

export default {
  name: "mm-table-sorter",
  components: {
    "ui-icon": Icon,
  },
  props: {
    column: Object,
    store: Object,
  },
  inject: {
    rootTable: {
      from: "mm-table",
      default: null,
    },
  },
  methods: {
    sort(column, ascending) {
      this.store.setSort(column, ascending)
      const data = {
        column,
        order: this.store.getSortAlias(this.store.operations.sortOrder),
        sortColumn: this.store.operations.sortColumn,
      }

      if (isFunction(this.rootTable.onSort)) {
        this.rootTable.onSort(data)
      }

      this.rootTable.$emit("sort", data)
    },
  },
}
</script>
