<template>
  <div class="columns mx-0">
    <EventSummary />
    <div
      class="column is-narrow"
      v-if="1 < 0"
    ></div>
    <div class="column">
      <div class="mb-4">
        <span class="fsb-17 mr-4">{{ `T${vmonth}/${vyear}` }}</span>
        <a
          class="mr-2"
          @click="previous()"
        >
          <Icon
            name="material-symbols:arrow-back-ios-new-rounded"
            :size="18"
          />
        </a>
        <a
          class="mr-3"
          @click="next()"
        >
          <Icon
            name="material-symbols:arrow-forward-ios-rounded"
            :size="18"
          />
        </a>
        <a @click="refresh()">
          <Icon
            name="material-symbols:refresh-rounded"
            :size="18"
          />
        </a>
      </div>
      <EventDetail v-bind="{ events, vyear, vmonth }" />
    </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>
