<template>
  <div class="n-options-date-panel">
    <div class="n-options-date-header">
      <n-icon size="16" type="chevrons-left" scene="gray" :style="prevStyles" @click="updateDateRef(-1, 'year')"></n-icon>
      <n-icon size="16" type="chevron-left" scene="gray" :style="prevStyles" @click="updateDateRef(-1, 'month')"></n-icon>
      <span class="n-options-date-title">{{dateRef.format('YYYY年MM月')}}</span>
      <n-icon size="16" type="chevron-right" scene="gray" :style="nextStyles" @click="updateDateRef(1, 'month')"></n-icon>
      <n-icon size="16" type="chevrons-right" scene="gray" :style="nextStyles" @click="updateDateRef(1, 'year')"></n-icon>
    </div>
    <n-calendar :date="dateRef">
      <template #date="{date}">
        <div class="n-options-date-item" :class="getDateRangesClasses(date, ranges, dateRef)">
          <span class="n-options-date-item-value" :class="getDateItemClasses(date, value, dateRef, threshold)"
                @click="onDateClick(date)" @mouseenter="onHover(date)">{{date.format('D')}}</span>
        </div>
      </template>
    </n-calendar>
  </div>
</template>

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

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