<template>
  <n-options-date-container wrap="n-options-date" :type="type" :visible="visible" :footer="_footer"
                            @click="$emit('option-click', $event)" @on-confirm="onSubmit">
    <div class="n-options-date-main">
      <n-options-date-panel :date-ref="dateRef" :value="nValue" :threshold="threshold"
                            @update-ref="onUpdateDateRef" @click="onDateClick"></n-options-date-panel>
      <div class="n-options-date-times" v-if="type !== 'date'">
        <div class="n-options-date-header">
          <span class="n-options-date-title">选择时间</span>
        </div>
        <div class="n-options-date-times-main">
          <n-options-date-time :visible="visible" title="时" :length="24" :value="hour" @click="onHourClick"></n-options-date-time>
          <n-options-date-time :visible="visible" title="分" :length="60" :value="minute" @click="onMinuteClick"></n-options-date-time>
          <n-options-date-time :visible="visible" v-if="type === 'time'" title="秒" :length="60" :value="second" @click="onSecondClick"></n-options-date-time>
        </div>
      </div>
    </div>
  </n-options-date-container>
</template>
<script>
import NOptionsDateContainer from './options-date-container'
import NOptionsDatePanel from './options-date-panel'
import NOptionsDateTime from './options-date-time'
import {dayjs, prop, toDayjs} from '@uif/next/lib/utils/tools'
import {closeDateType, getThreshold} from '_common/dateUtils'

export default {
  name: 'n-options-date-paster',
  components: {
    NOptionsDateContainer,
    NOptionsDatePanel,
    NOptionsDateTime
  },
  props: {
    // 初始值
    activeValue: {},
    // 类型
    type: prop.inArray(['date', 'minute', 'time'], 'date'),
    // 最小时间
    min: prop.stringNumber('1700-01-01'),
    // 最大时间
    max: prop.stringNumber('2700-01-01'),
    // 底部
    footer: prop.object()
  },
  data () {
    const nValue = this.activeValue ? toDayjs(this.activeValue, null) : null
    return {
      visible: false,
      dateRef: toDayjs(this.activeValue, dayjs()),
      nValue,
      hour: nValue ? nValue.hour() : 0, // 时
      minute: nValue ? nValue.minute() : 0, // 分
      second: nValue ? nValue.second() : 0 // 秒
    }
  },
  computed: {
    // 最大最小
    threshold ({min, max}) {
      return getThreshold(min, max)
    },
    _footer ({footer, nValue, type}) {
      return {hasConfirm: !closeDateType(type), value: nValue, ...footer}
    }
  },
  onPasterShow () {
    this.setVisible(true)
  },
  onPasterHidden () {
    this.setVisible(false)
  },
  methods: {
    setVisible (value) {
      this.visible = value
    },
    // 更新时间参照
    onUpdateDateRef (date) {
      this.dateRef = date
    },
    // 更新nValue
    updateNValue (date) {
      this.nValue = date ? date.hour(this.hour).minute(this.minute).second(this.second) : null
      if (closeDateType(this.type)) {
        this.onSubmit()
      }
    },
    // 点击时间
    onDateClick (date) {
      this.dateRef = date
      this.updateNValue(date)
    },
    // 小时点击
    onHourClick (value) {
      this.hour = value
      this.updateNValue(this.nValue)
    },
    // 分钟点击
    onMinuteClick (value) {
      this.minute = value
      this.updateNValue(this.nValue)
    },
    // 秒点击
    onSecondClick (value) {
      this.second = value
      this.updateNValue(this.nValue)
    },
    // 确认
    onSubmit () {
      this.$emit('click', this.nValue)
      this.$emit('u-change', this.nValue)
    }
  }
}
</script>
