<template>
    <div>

   <appup-button v-if="navigateTo" size="small" buttonStyle="success" :label="buttonLabel" class="float-right"  :navigateTo="navigateTo"/>
        <template v-for="(items,key) in sortedData">
          <div :key="key">
            <div class="cat_name">
              <h4>{{key}}</h4>
            </div>
            <div  class="row">
              <template v-for="(item, index) in items">
                  <div class="col-sm-6 col-md-4 col-lg-3 no-padding" :key="index">
                      <div class="appup-grid-item">      
                          <div class="row card-header">
                              <div class="col-sm-8 no-padding">
                                  <h5>{{getLabel(item)}}</h5>
                              </div>
                              <div class="col-sm-4 no-padding" v-if="actions && actions.length > 0">
                                  <b-dropdown id="ddown1" text="...">
                                      <template v-for="(action, actionKey) in actions" >
                                          <b-dropdown-item :key="actionKey" @click="clickAction(item,action.action);">{{action.label}}</b-dropdown-item>
                                      </template>
                                  </b-dropdown>
                              </div> 
                          </div>
                          <div class="card-content">
                              <template v-if="image !== null && image !== ''">
                                <appup-image 
                                    :src="getImage(item)"       
                                    alt="Image"
                                    :width=50
                                    :height=50
                                    /> 
                                </template>
                              <p>{{getDescription(item)}}</p>
                              <p><small>{{getReference(item)}}</small></p>
                          </div>          
                      </div>
                  </div>
              </template>
            </div>
        </div>
        </template>
    </div>
</template>

<script>
import { AjaxRequests } from "@/mixins/ajaxRequests";
import { Workflow } from "@/mixins/workflow";

/**
 * Appup Gridview component which can be used to display Grid items
 */
export default {
  name: "appup-grid",
  mixins: [AjaxRequests, Workflow],
  props: {
    /**
     * Id of grid
     */
    id: {
      type: String,
      required: false
    },
    /**
     * label for grid item in header
     */
    label: {
      type: String,
      required: false
    },
    /**
     * Description for Grid item
     */
    description: {
      type: String,
      required: false
    },
    /**
     * Image for Grid item
     */
    image: {
      type: String,
      required: false
    },
    /**
     * Reference for grid item
     */
    reference: {
      type: String,
      required: false
    },
    /**
     * Fetch data with url
     */
    url: {
      type: String,
      required: false
    },
    /**
     * Action items for grid item
     *
     * 'view','edit','delete'
     */
    actions: {
      type: Array,
      required: false
    },
    sortKey: {
      type: String,
      required: false
    },
    /**
     * URL to deserialize the grid initially.
     */
    preload: {
      type: String,
      required: false
    },
    /**
     * Edit route based
     */
    edit: {
      type: Object,
      required: false
    },
    navigateTo: {
      type: String,
      required: false
    },
    buttonLabel:{
      type: String,
      required: false
    }
  },
  components: {},
  data() {
    return {
      data: [],
      sortedData: {}
    };
  },
  methods: {
    getLabel: function(item) {
      return item[this.label];
    },

    getDescription: function(item) {
      return item[this.description];
    },

    getReference: function(item) {
      return item[this.reference];
    },

    getImage: function(item) {
      return item[this.image];
    },
    parse() {},
    clickAction(item, action) {
      if (action === "edit") {
        this.$router.push(this.edit.route + "/" + item[this.edit.key]);
      } else if (action == "delete") {
        console.log("delete id ", item[this.edit.key]);
      } else {
        return;
      }
    }
  },
  watch: {
    data(newVal, oldVal) {
      console.log("Sort key " + this.sortKey);

      // If sort key is there
      if (this.sortKey && this.data) {
        var self = this;
        this.sortedData = _.groupBy(this.data, function(data) {
          return data[self.sortKey];
        });
      } else {
        // console.log("no sort key");
        this.sortedData.test = this.data;
      }
      // console.log(this.sortedData);
    }
  },
  beforeMount() {},
  mounted() {
    /*if (this.url) {
      console.log("===> url ", this.url);
      this.getData(this.url, null, response => {
        console.log("=====> response :: ", response);
        this.data = response;
      });
    }*/

    if (this.preload) this.start(this.preload);
  }
};
</script>