<template>
  <table class="n-calendar">
    <thead>
      <tr class="n-calendar-tr">
        <th class="n-calendar-th">日</th>
        <th class="n-calendar-th">一</th>
        <th class="n-calendar-th">二</th>
        <th class="n-calendar-th">三</th>
        <th class="n-calendar-th">四</th>
        <th class="n-calendar-th">五</th>
        <th class="n-calendar-th">六</th>
      </tr>
    </thead>
    <tbody>
      <template v-for="(a, i) in 6">
        <tr :key="i" class="n-calendar-tr">
          <template v-for="(b, j) in 7">
            <!-- date.add(i * 7 + j, 'day') -->
            <td :key="i * 7 + j" class="n-calendar-td">
              <slot name="date" :date="start.add(i * 7 + j, 'day')"></slot>
            </td>
          </template>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'n-calendar',
  props: {
    date: {
      required: true
    }
  },
  computed: {
    // 日历开始
    start () {
      return this.date.startOf('month').startOf('week')
    }
  }
}
</script>
