<template>
  <div class="n-options-month-panel">
    <div class="n-options-date-header">
      <n-icon size="16" type="chevrons-left" scene="gray" :style="prevStyles" @click="updateDateRef(-1, 'year')"></n-icon>
      <span class="n-options-date-title">{{dateRef.format('YYYY年')}}</span>
      <n-icon size="16" type="chevrons-right" scene="gray" :style="nextStyles" @click="updateDateRef(1, 'year')"></n-icon>
    </div>
    <div class="n-options-month-calendar">
      <template v-for="(a, i) in 12">
        <div :key="i" class="n-options-month-item" :class="getMonthRangesClasses(dateRef.add(i, 'month'), ranges)">
            <span class="n-options-month-item-value" :class="getMonthItemClasses(dateRef.add(i, 'month'), value, threshold)"
                  @click="onDateClick(i)" @mouseenter="onHover(i)">{{dateRef.add(i, 'month').format('M月')}}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {prop} from '@uif/next/lib/utils/tools'
import {getMonthItemClasses, getMonthRangesClasses, isDateAvailable} from '_common/dateUtils'

export default {
  name: 'n-options-month-panel',
  props: {
    // 参考时间
    dateRef: {
      required: true
    },
    // 当前选中
    value: {},
    // 当前选中范围
    ranges: prop.array(),
    // 时间范围
    threshold: prop.array(),
    // 向上翻页
    prevStyles: prop.object(),
    // 向下翻页
    nextStyles: prop.object()
  },
  data () {
    return {
      getMonthItemClasses,
      getMonthRangesClasses
    }
  },
  methods: {
    // 更新时间参照
    updateDateRef (step, unit) {
      this.$emit('update-ref', this.dateRef.add(step, unit))
    },
    // 点击时间
    onDateClick (offset) {
      const date = this.dateRef.add(offset, 'month')
      if (isDateAvailable(date, this.threshold, 'month')) {
        this.$emit('click', date)
      }
    },
    onHover (offset) {
      const date = this.dateRef.add(offset, 'month')
      this.$emit('hover', date)
    }
  }
}
</script>
