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

<script>
import { Datepicker } from '@livelybone/vue-datepicker';
import moment from 'moment'
import { guid } from '../../../src/utils/utils'
export default {
  name: 'IpubDatePicker',
  components: {
    Datepicker
  },
  props: {
    value: {
      type: [String, Object],
      default: ''
    },
    placeholder: {
      type: String,
      default: 'Please Select Time'
    },
    format: {
      type: String,
      default: 'DD / MM / YYYY'
      // default: 'YYYY-MM-DD'
    },
    min: {
      type: String,
      default: ''
    },
    max: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'date',
      validator (val) {
        return ['year', 'month', 'date'].indexOf(val) !== -1
      }
    },
    disabled: Boolean
  },
  inject: {
    ipubFormItem: {
      default: false
    }
  },
  watch: {
    value: {
      handler (val) {
        if (!val) {
          this.val = ''
          this.showVal = ''
          return
        }

        const time = moment().format('YYYY MMMM DD ') + val
        switch (this.type) {
          case 'year':
            this.val = moment(val).format('YYYY') || val.format('YYYY')
            this.showVal = this.val
            break
          case 'month':
            this.val = moment(val).format('YYYY-MM') || val.format('YYYY-MM')
            this.showVal = this.val
            break
          case 'date':
          default:
            this.val = moment(val).format('YYYY-MM-DD') || val.format('YYYY-MM-DD')
            this.showVal = moment(this.val).format(this.format)
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      isFocus: false,
      val: '',
      uuid: '',
      showVal: ''
    }
  },
  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) {
      switch (this.type) {
        case 'year':
          this.val = val
          this.$emit('input', val || '')
          this.$emit('change', val || '')
          break
        case 'month':
          this.val = val
          this.$emit('input', val || '')
          this.$emit('change', val || '')
          break
        case 'date':
        default:
          this.val = val ? moment(val).format('YYYY-MM-DD') : ''
          this.$emit('input', val ? moment(val).endOf('date') : '')
          this.$emit('change', val ? moment(val).endOf('date') : '')
      }
    },
    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-picker'].getElementsByClassName('datepicker')[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-picker {
  position: relative;
  border-radius: 2px;
  background: $content_color;
  &-value {
    position: absolute;
    left: 38px;
    top: 9px;
    line-height: 22px;
  }
  &-placeholder {
    color: $default_color;
  }
}
</style>
