<template>
  <div class="ipub-date-time-picker"
       :ref="uuid+'ipub-date-time-picker'">
    <DatetimePicker :class="ipubClass"
                    :value="val"
                    style="width:100%"
                    :placeholder="placeholder"
                    :timeType="type"
                    :min="min"
                    :max="max"
                    :timeStr="['Hour', 'Minute', 'Second']"
                    :dayStr="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"
                    :btnStr="'Confirm'"
                    @input="handleChange" />
    <div class="ipub-date-time-picker-value"
         @click="handleClick">
      <font v-if="val">{{showVal}}</font>
      <font v-else
            class="ipub-date-time-picker-placeholder">{{placeholder}}</font>
    </div>
  </div>
</template>

<script>
import { DatetimePicker } from '@livelybone/vue-datepicker';
import moment from 'moment'
import { guid } from '../../../src/utils/utils'
export default {
  name: 'IpubDateTimePicker',
  components: {
    DatetimePicker
  },
  props: {
    value: {
      type: [String, Object],
      default: ''
    },
    placeholder: {
      type: String,
      default: 'Please Select Time'
    },
    format: {
      type: String,
      default: 'DD / MM / YYYY'
    },
    min: {
      type: String,
      default: ''
    },
    max: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'second',
      validator (val) {
        return ['second', 'minute', 'hour'].indexOf(val) !== -1
      }
    },
    disabled: Boolean
  },
  inject: {
    ipubFormItem: {
      default: false
    }
  },
  watch: {
    value: {
      handler (val) {
        if (!val) {
          return
        }
        switch (this.type) {
          case 'second':
            this.val = moment(val).format('YYYY-MM-DD HH:mm:ss')
            this.showVal = moment(val).format(this.format + ' HH:mm:ss')
            break
          case 'minute':
            this.val = moment(val).format('YYYY-MM-DD HH:mm')
            this.showVal = moment(val).format(this.format + ' HH:mm')
            break
          case 'hour':
            this.val = moment(val + ':00').format('YYYY-MM-DD HH')
            this.showVal = moment(val + ':00').format(this.format + ' HH')
            break
          default:
            this.val = ''
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      isFocus: false,
      val: '',
      uuid: ''
    }
  },
  computed: {
    ipubClass () {
      let newClass = ''
      if (this.disabled) {
        newClass += 'disabled'
      }
      if (this.isFocus) {
        newClass += 'isFocus'
      }
      if (this.ipubFormItem && this.ipubFormItem.validateStatus) {
        newClass += 'ipub--validateStatus '
      }
      return newClass
    }
  },
  mounted () {
    this.uuid = guid()
  },
  methods: {
    handleChange (val) {
      this.val = val
      if (this.type === 'second') {
        this.$emit('input', val ? moment(val) : '')
        this.$emit('change', val ? moment(val) : '')
      } else {
        this.$emit('input', val || '')
        this.$emit('change', val || '')
      }
    },
    handleFocus (e) {
      this.isFocus = true
      this.$emit('focus', e)
    },
    handleBlur (e) {
      this.isFocus = false
      this.$emit('blur', e)
      if (this.ipubFormItem) {
        this.ipubFormItem.validate('blur')
      }
    },
    handleClick () {
      if (this.disabled) {
        return
      }
      const dom = this.$refs[this.uuid + 'ipub-date-time-picker'].getElementsByClassName('datetime-picker')[0]
      this.$emit('click', dom)
      dom.click()
    }
  }
}
</script>

<style lang="scss">
@import '../../theme-chalk/date-picker.scss';
.ipub-icon.iconfont {
  font-size: 1em;
}
.ipub-date-time-picker {
  position: relative;
  border-radius: 2px;
  background: $content_color;
  &-value {
    position: absolute;
    left: 38px;
    top: 9px;
    line-height: 22px;
  }
  &-placeholder {
    color: $default_color;
  }
}
</style>
