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

<script>
import { Timepicker } from '@livelybone/vue-datepicker';
import moment from 'moment'
import { guid } from '../../../src/utils/utils'
export default {
  name: 'IpubTimePicker',
  components: {
    Timepicker
  },
  props: {
    value: {
      type: [String, Object],
      default: ''
    },
    placeholder: {
      type: String,
      default: 'Please Select Time'
    },
    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
        }
        const time = moment().format('YYYY MMMM DD ') + val
        switch (this.type) {
          case 'second':
            this.val = moment(time).format('HH:mm:ss')
            break
          case 'minute':
            this.val = moment(time).format('HH:mm')
            break
          case 'hour':
            this.val = moment(time + ':00').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
      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-time-picker'].getElementsByClassName('timepicker')[0]
      this.$emit('click', dom)
      dom.click()
    }
  }
}
</script>

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