<template>
  <div class="kole-calendar">
    <div class="kole-calendar-head">
      <button class="kole-calendar-nav" @click="prev">‹</button>
      <span class="kole-calendar-title">{{ viewY }} 年 {{ viewM + 1 }} 月</span>
      <button class="kole-calendar-nav" @click="next">›</button>
    </div>
    <div class="kole-calendar-week">
      <span class="kole-calendar-weekday" v-for="w in weeks" :key="w">{{ w }}</span>
    </div>
    <div class="kole-calendar-grid">
      <div v-for="(c, i) in cells" :key="i" class="kole-calendar-cell"
           :class="{ 'is-out': c.out, 'is-today': c.today, 'is-selected': c.key === selected }"
           @click="pick(c)">{{ c.day }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({ modelValue: { type: String, default: '' } });
const emit = defineEmits(['update:modelValue', 'change']);

const weeks = ['日', '一', '二', '三', '四', '五', '六'];
const n = new Date();
const viewY = ref(n.getFullYear());
const viewM = ref(n.getMonth());
const selected = ref(props.modelValue);
const today = fmt(n);

function fmt(dt) {
  const p = x => (x < 10 ? '0' + x : '' + x);
  return dt.getFullYear() + '-' + p(dt.getMonth() + 1) + '-' + p(dt.getDate());
}
const cells = computed(() => {
  const first = new Date(viewY.value, viewM.value, 1).getDay();
  const days = new Date(viewY.value, viewM.value + 1, 0).getDate();
  const prevDays = new Date(viewY.value, viewM.value, 0).getDate();
  const arr = [];
  for (let i = 0; i < first; i++) {
    let pd = prevDays - first + 1 + i, pm = viewM.value - 1, py = viewY.value;
    if (pm < 0) { pm = 11; py--; }
    arr.push({ day: pd, out: true, key: fmt(new Date(py, pm, pd)) });
  }
  for (let d = 1; d <= days; d++) {
    const k = fmt(new Date(viewY.value, viewM.value, d));
    arr.push({ day: d, out: false, today: k === today, key: k });
  }
  const tail = (7 - (arr.length % 7)) % 7;
  for (let t = 1; t <= tail; t++) {
    let nm = viewM.value + 1, ny = viewY.value; if (nm > 11) { nm = 0; ny++; }
    arr.push({ day: t, out: true, key: fmt(new Date(ny, nm, t)) });
  }
  return arr;
});
function prev() { viewM.value--; if (viewM.value < 0) { viewM.value = 11; viewY.value--; } }
function next() { viewM.value++; if (viewM.value > 11) { viewM.value = 0; viewY.value++; } }
function pick(c) {
  selected.value = c.key;
  viewY.value = parseInt(c.key.slice(0, 4), 10);
  viewM.value = parseInt(c.key.slice(5, 7), 10) - 1;
  emit('update:modelValue', c.key);
  emit('change', c.key);
}
</script>

<style src="./Calendar.css"></style>
