<template>
  <popper ref="popper" :class="classes" transition="form-drop" v-model="visible" :placement="placement"
          :transfer="transfer" :disabled="disabled" :modifiers="modifiers" :width="width">
    <template v-slot:reference>
      <u-input readonly :disabled="disabled" :value="pickerValue" :focus="visible" :name="name" :size="size" :border="border" :placeholder="placeholder" ellipsis></u-input>
    </template>
    <template v-slot:popper>
      <div class="uif-date-picker-options clearfix" v-if="visible">
        <u-calendar v-model="date" :min="min" :max="max" @u-change="handleChangeDate"></u-calendar>
        <u-time-picker v-if="type !== 'date'" :hour.sync="hour" :minute.sync="minute" :second.sync="second"
                       :has-second="type === 'time'" @u-change="handleChangeTime"></u-time-picker>
      </div>
    </template>
  </popper>
</template>

<script>
import Popper from '@uif/hq/src/components/popper'
import {oneOf} from '@uif/hq/src/utils/assist'
import {dayjs} from '@uif/hq/src/utils/day'
import UInput from '@uif/hq/src/components/input'
import UCalendar from '@uif/hq/src/components/calendar'
import UTimePicker from './time-picker'

export default {
  inheritAttrs: false,
  name: 'u-date-picker',
  components: {
    Popper,
    UInput,
    UCalendar,
    UTimePicker
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      validator (value) {
        return oneOf(value, ['date', 'minute', 'time'])
      },
      default: 'date'
    },
    name: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请选择时间'
    },
    size: {
      validator (value) {
        return oneOf(value, ['small', 'default', 'large'])
      },
      default: 'default'
    },
    transfer: {
      type: Boolean,
      default: false
    },
    placement: {
      type: String,
      default: 'bottom-start'
    },
    border: {
      validator (value) {
        return oneOf(value, ['none', 'line', 'rect'])
      },
      default: 'rect'
    },
    format: {
      type: String,
      default: ''
    },
    min: {
      type: [String, Number],
      default: '1700-01-01'
    },
    max: {
      type: [String, Number],
      default: '2700-01-01'
    },
    offset: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      // 下拉框可见
      visible: false,
      pickerFormat: this.getFormat(),
      pickerValue: '',
      date: null,
      hour: 0,
      minute: 0,
      second: 0,
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, this.offset]
          }
        }
      ]
    }
  },
  computed: {
    classes () {
      return [
        'uif-date-picker',
        'uif-date-picker-size-' + this.size,
        {
          'focus': this.visible,
          'available': !this.disabled,
          'disabled': this.disabled
        }
      ]
    },
    // 右侧图标
    bindIcon () {
      if (this.clearable && !this.disabled && this.date) {
        return {icon: 'circle-x', iconScene: 'action'}
      }
      return {icon: 'calendar', iconScene: 'none'}
    },
    width () {
      return this.type === 'date' ? 207 : 400
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (val) {
        this.syncValue()
      }
    },
    visible (visible) {
      this.$emit(visible ? 'focus' : 'blur')
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    focus () {
      this.visible = true
    },
    blur () {
      this.visible = false
    },
    // 同步value 到 date
    syncValue () {
      if (this.value) {
        const day = dayjs(this.value)
        if (day.isValid()) {
          this.setDataValue('date', day.format('YYYY-MM-DD'))
          this.setDataValue('hour', Number(day.format('H')))
          this.setDataValue('minute', Number(day.format('m')))
          this.setDataValue('second', Number(day.format('s')))
          this.setVisible()
          return
        }
      }
      this.empty()
    },
    handleChangeDate (date) {
      this.date = date
      this.handleChangeTime()
      if (this.type === 'date') {
        this.visible = false
      }
    },
    // 用户选择事件
    handleChangeTime () {
      this.setVisible()
      if (this.value !== this.pickerValue) {
        this.$emit('input', this.pickerValue)
        this.$emit('u-change', this.pickerValue)
      }
    },
    // 设置value
    setVisible () {
      const date = dayjs(this.date + ' ' + this.hour + ':' + this.minute + ':' + this.second)
      this.pickerValue = date.isValid() ? date.format(this.pickerFormat) : ''
    },
    handleIconClick (event) {
      if (this.clearable && this.value) {
        this.visible = false
        this.empty()
        this.$emit('input', '')
        this.$emit('u-change', '')
        event.stopPropagation()
        return false
      }
    },
    empty () {
      this.date = null
      this.hour = this.minute = this.second = 0
      this.pickerValue = ''
    },
    getFormat () {
      if (this.format) return this.format
      switch (this.type) {
        case 'date':
          return 'YYYY-MM-DD'
        case 'minute':
          return 'YYYY-MM-DD HH:mm'
        case 'time':
          return 'YYYY-MM-DD HH:mm:ss'
      }
    },
    setDataValue (name, value) {
      if (this[name] !== value) {
        this[name] = value
      }
    }
  }
}
</script>
