<template>
  <v-row>
    <v-col
      v-for="(item, i) in dashItems()"
      :key="i"
      class="d-flex child-flex"
      cols="12"
      sm="6"
      lg="4"
      xl="3"
    >
      <gz-dash
        :title="'Dash-' + i"
        :id="'dash-item-' + i"
        v-on:dash-remove="dashRemove"
        v-on:dash-move-start="dashMoveStart"
        v-on:dash-move-back="dashMoveBack"
        v-on:dash-move-forward="dashMoveForward"
        v-on:dash-move-end="dashMoveEnd"
        v-on:dash-refresh="dashRefresh"
      />
    </v-col>
  </v-row>
</template>

<script>
import GzDash from "../components/dash-base.vue";
/**
 * 
 * 
 *   <div>
      MRU + depending on role: new workorder, new client, personal workorder
      list if scheduleable, or if ops then whatever ops needs or admin whatever
      they need etc
    </div>
 * 
 * 
 */
export default {
  components: {
    GzDash
  },
  beforeCreate() {
    window.$gz.eventBus.$emit("menu-change", {
      isMain: true,
      icon: "$ayiTachometer",
      title: "Dashboard",
      helpUrl: "form-home-dashboard"
    });
  },
  methods: {
    dashItems: function() {
      let ret = [];
      for (var i = 0; i < 12; i++) {
        ret.push({ index: i, title: `Dash ${i}` });
      }
      return ret;
    },
    dashMoveStart: function(item) {
      console.log("home-dashboard:dashMoveStart", item);
    },
    dashMoveBack: function(item) {
      console.log("home-dashboard:dashMoveBack", item);
    },
    dashMoveForward: function(item) {
      console.log("home-dashboard:dashMoveForward", item);
    },
    dashMoveEnd: function(item) {
      console.log("home-dashboard:dashMoveEnd", item);
    },
    dashRemove: function(item) {
      console.log("home-dashboard:dashRemove", item);
    },
    dashRefresh: function(item) {
      console.log(
        "home-dashboard:refresh (normally handle @ typed dash control)",
        item
      );
    }
  },
  data() {
    return {};
    // items: [
    //   {
    //     color: "#1F7087",
    //     title: "Supermodel"
    //   },
    //   {
    //     color: "#952175",
    //     title: "Halcyon Days"
    //   }
    // ];
  }
};
</script>
