<template>
  <div class="columns mx-0">
    <div
      class="column is-narrow"
      v-if="1 < 0"
    >
      <EventSummary></EventSummary>
    </div>
    <div class="column">
      <div class="mb-4">
        <span class="fsb-17 mr-4">{{ `T${vmonth}/${vyear}` }}</span>
        <a
          class="mr-2"
          @click="previous()"
          ><SvgIcon v-bind="{ name: 'left1.svg', type: 'dark', size: 18 }"></SvgIcon
        ></a>
        <a
          class="mr-3"
          @click="next()"
          ><SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 18 }"></SvgIcon
        ></a>
        <a @click="refresh()"><SvgIcon v-bind="{ name: 'refresh.svg', type: 'dark', size: 18 }"></SvgIcon></a>
      </div>
      <EventDetail v-bind="{ events: events, vyear: vyear, vmonth: vmonth }"></EventDetail>
    </div>
  </div>
</template>
<script setup>
import EventSummary from "~/components/datepicker/EventSummary";
import EventDetail from "~/components/datepicker/EventDetail";
</script>
<script>
export default {
  props: ["events", "year", "month"],
  data() {
    return {
      vyear: this.year ? this.$copy(this.year) : undefined,
      vmonth: this.month ? this.$copy(this.month) : undefined,
    };
  },
  methods: {
    next() {
      let month = this.vmonth + 1;
      if (month > 12) {
        month = 1;
        this.vyear += 1;
      }
      this.vmonth = month;
    },
    previous() {
      let month = this.vmonth - 1;
      if (month === 0) {
        month = 12;
        this.vyear -= 1;
      }
      this.vmonth = month;
    },
    refresh() {
      this.$emit("refresh");
    },
  },
};
</script>
