<template>
  <n-options-date-container wrap="n-options-date-range" type="dates" :visible="visible" :footer="footer" @click="$emit('option-click', $event)">
    <div class="n-options-date-main">
      <n-options-date-panel :date-ref="dateRef" :ranges="ranges" :threshold="threshold" :next-styles="{visibility: 'hidden'}"
                            @update-ref="onUpdatePrevDateRef" @hover="onHover" @click="onDateClick"></n-options-date-panel>
      <n-options-date-panel :date-ref="dateRef.add(1, 'month')" :ranges="ranges" :threshold="threshold" :prev-styles="{visibility: 'hidden'}"
                            @update-ref="onUpdateNextDateRef" @hover="onHover" @click="onDateClick"></n-options-date-panel>
    </div>
  </n-options-date-container>
</template>
<script>
import NOptionsDatePanel from './options-date-panel'
import NOptionsDateContainer from './options-date-container'
import {dayjs, prop, toDayjs, toNumber} from '@uif/next/lib/utils/tools'
import {getThreshold, sortDateList} from '_common/dateUtils'

export default {
  name: 'n-options-date-range-paster',
  components: {
    NOptionsDateContainer,
    NOptionsDatePanel
  },
  props: {
    // 时间范围值 => ['2022-01-02', '2022-03-02'] 能够使用dayjs序列化的时间格式数组
    activeValue: prop.array(),
    // 最小时间
    min: prop.stringNumber('1700-01-01'),
    // 最大时间
    max: prop.stringNumber('2700-01-01'),
    // 最大时间跨度
    maxlength: prop.stringNumber(),
    // 底部
    footer: prop.object()
  },
  data () {
    return {
      visible: false,
      dateRef: toDayjs(this.activeValue[0], dayjs()),
      point: null, // 第一个点
      hover: null // hover 的点
    }
  },
  computed: {
    // 最大最小
    threshold ({min, max, point, maxlength}) {
      return getThreshold(min, max, point, toNumber(maxlength), 'day')
    },
    ranges ({point, hover, activeValue}) {
      if (point) {
        return sortDateList([point, hover])
      }
      return activeValue.filter(value => value).map(value => toDayjs(value, null))
    }
  },
  onPasterShow () {
    this.setVisible(true)
  },
  onPasterHidden () {
    this.setVisible(false)
  },
  methods: {
    setVisible (value) {
      this.visible = value
    },
    // 更新时间参照
    onUpdatePrevDateRef (date) {
      this.dateRef = date
    },
    onUpdateNextDateRef (date) {
      this.dateRef = date.add(-1, 'month')
    },
    // 点击时间
    onDateClick (date) {
      this.$emit('click', date)
      if (this.point) {
        this.onUChange(sortDateList([this.point, date]))
      } else {
        // 自动翻页
        if (date.isBefore(this.dateRef, 'month')) {
          this.dateRef = date
        } else if (date.isAfter(this.dateRef.add(1, 'month'), 'month')) {
          this.dateRef = date.add(-1, 'month')
        }
        this.point = date
      }
    },
    // hover
    onHover (date) {
      this.hover = date
    },
    onUChange ([start, end]) {
      this.point = null
      this.hover = null
      const value = [start.startOf('date'), end.endOf('date')]
      this.$emit('u-change', value)
    }
  }
}
</script>
