<template>
  <n-options-date-container wrap="n-options-month" type="month" :visible="visible" :footer="footer" @click="$emit('option-click', $event)">
    <n-options-month-panel :date-ref="dateRef" :value="nValue" :threshold="threshold"
                           @update-ref="onUpdateDateRef" @click="onMonthClick"></n-options-month-panel>
  </n-options-date-container>
</template>
<script>
import NOptionsDateContainer from './options-date-container'
import NOptionsMonthPanel from './options-month-panel'
import {dayjs, prop, toDayjs} from '@uif/next/lib/utils/tools'
import {getThreshold} from '_common/dateUtils'

export default {
  name: 'n-options-month-paster',
  components: {
    NOptionsDateContainer,
    NOptionsMonthPanel
  },
  props: {
    // 初始值
    activeValue: {},
    // 最小时间
    min: prop.stringNumber('1700-01-01'),
    // 最大时间
    max: prop.stringNumber('2700-01-01'),
    // 底部
    footer: prop.object()
  },
  data () {
    return {
      visible: false,
      dateRef: toDayjs(this.activeValue, dayjs()).startOf('year')
    }
  },
  computed: {
    // 当前值
    nValue ({activeValue}) {
      return activeValue ? toDayjs(activeValue, null) : null
    },
    // 最大最小
    threshold ({min, max}) {
      return getThreshold(min, max)
    }
  },
  onPasterShow () {
    this.setVisible(true)
  },
  onPasterHidden () {
    this.setVisible(false)
  },
  methods: {
    setVisible (value) {
      this.visible = value
    },
    // 更新时间参照
    onUpdateDateRef (date) {
      this.dateRef = date
    },
    // 点击时间
    onMonthClick (date) {
      this.$emit('click', date)
      this.$emit('u-change', date)
    }
  }
}
</script>
