<template>
  <table class="ui celled table">
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key)"
          :class="{ active: sortKey == key }">
          {{ key | capitalize }}
          &nbsp;&nbsp;
          <icon :name="sortOrders[key] > 0 ? 'sort-asc' : 'sort-desc'"></icon>
        </th>
        <th v-if="buttons" v-lang.general.action></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="entry in filteredData">
        <template v-for="item in entry" v-if="item || item === 0 || item === ''">
          <td v-if="!item.hide">
            <template v-if="item.content">
              <template v-if="item.link">
                <router-link v-bind:to="item.link">{{item.content}}</router-link>
              </template>
              <template v-else>
                {{item.content}}
              </template>
            </template>
            <template v-else-if="item.content === ''"></template>
            <template v-else>
              {{item}}
            </template>
          </td>
        </template>
        <td v-if="buttons">
          <span v-for="btn in buttons">
            <button v-bind:class="btn.css" @click="btnclick(btn, entry)">
              <i v-if="btn.icon" :class="btn.icon" class="icon"></i>
              <span v-if="btn.text">{{ btn.text }}</span>
            </button>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  import Icon from 'vue-awesome/components/Icon'

  export default {
    components: {Icon},
    name: 'grid',
    props: {
      data: Array,
      columns: Array,
      filterKey: String,
      buttons: Array,
      context: Object,
      btnclick: Function
    },
    data: function () {
      var sortOrders = {}
      this.columns.forEach(function (key) {
        sortOrders[key] = 1
      })
      return {
        sortKey: '',
        sortOrders: sortOrders
      }
    },
    created () {
      let data = this.data
      let i = 0

      for (const d in data) {
        let ii = 0
        for (const dd in d) {
          if (dd.content === '') {
            this.data[i][ii] = dd
          } else {
            this.data[i][ii] = dd.content
          }
          ii++
        }
        i++
      }
    },
    computed: {
      filteredData: function () {
        var sortKey = this.sortKey
        var filterKey = this.filterKey && this.filterKey.toLowerCase()
        var order = this.sortOrders[sortKey] || 1
        var data = this.data
        if (filterKey) {
          data = data.filter(function (row) {
            return Object.keys(row).some(function (key) {
              return String(row[key]).toLowerCase().indexOf(filterKey) > -1
            })
          })
        }
        if (sortKey) {
          data = data.slice().sort(function (a, b) {
            a = a[sortKey]
            b = b[sortKey]
            return (a === b ? 0 : a > b ? 1 : -1) * order
          })
        }
        return data
      }
    },
    filters: {
      capitalize: function (str) {
        return str.charAt(0).toUpperCase() + str.slice(1)
      }
    },
    methods: {
      sortBy: function (key) {
        this.sortKey = key
        this.sortOrders[key] = this.sortOrders[key] * -1
      }
    }
  }
</script>
