<template>
  <gz-dash
    icon="$ayiTools"
    :addUrl="'widgets/0'"
    :updateFrequency="0"
    v-on:dash-refresh="loadData"
    v-on="$listeners"
    v-bind="$attrs"
  >
    <template slot="main">
      <v-calendar
        color="primary"
        type="day"
        hide-header
        interval-count="11"
        first-interval="7"
        interval-height="24"
        interval-width="45"
        :events="events"
        :event-color="getEventColor"
        @click:event="showEvent"
        :locale="languageName"
      ></v-calendar>
    </template>
  </gz-dash>
</template>
<script>
import GzDash from "../components/dash-base.vue";
export default {
  components: {
    GzDash
  },
  data() {
    return {
      events: [],
      languageName: window.$gz.locale.getBrowserFirstLanguage()
    };
  },
  props: {},
  created() {
    // this.loadData();
  },
  computed: {},
  methods: {
    loadData: function() {
      let events = [];
      let now = new Date();
      let yy = now.getFullYear();
      let mm = now.getMonth() + 1;
      let dd = now.getDate();
      events.push({
        id: 45,
        type: 34,
        name: "WO 45",
        start: getEventTimeStamp(yy, mm, dd, 8, "00"),
        end: getEventTimeStamp(yy, mm, dd, 8, 45),
        color: "orange"
      });

      events.push({
        id: 22,
        type: 34,
        name: "WO 22",
        start: getEventTimeStamp(yy, mm, dd, 9, "00"),
        end: getEventTimeStamp(yy, mm, dd, 10, 30),
        color: "blue"
      });

      events.push({
        id: 33,
        type: 34,
        name: "WO 33",
        start: getEventTimeStamp(yy, mm, dd, 11, "00"),
        end: getEventTimeStamp(yy, mm, dd, 11, 30),
        color: "green"
      });

      events.push({
        id: 44,
        type: 34,
        name: "WO 44",
        start: getEventTimeStamp(yy, mm, dd, 11, "00"),
        end: getEventTimeStamp(yy, mm, dd, 11, 30),
        color: "indigo"
      });

      events.push({
        id: 55,
        type: 34,
        name: "WO 55",
        start: getEventTimeStamp(yy, mm, dd, 11, "00"),
        end: getEventTimeStamp(yy, mm, dd, 11, 45),
        color: "purple"
      });

      events.push({
        id: 34,
        type: 34,
        name: "WO 66",
        start: getEventTimeStamp(yy, mm, dd, 13, "00"),
        end: getEventTimeStamp(yy, mm, dd, 16, 45),
        color: "teal"
      });

      this.events = events;
    },
    getEventColor(event) {
      return event.color;
    },
    showEvent({ nativeEvent, event }) {
      nativeEvent.stopPropagation();
      alert(`STUB: OPEN ITEM (data: ${JSON.stringify(event)})`);
    }
  }
};

function getEventTimeStamp(yy, mm, dd, hh, minutes) {
  return `${yy}-${mm}-${dd} ${hh}:${minutes}`;
}
</script>
