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

<script>
import { DateRangePicker } from '@livelybone/vue-datepicker';
import moment from 'moment'
import { guid } from '../../../src/utils/utils'
export default {
  name: 'IpubDateRangePicker',
  components: {
    DateRangePicker
  },
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    placeholder: {
      type: Array,
      default () {
        return ['Select Start Time', 'Select End 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
        }

        this.val = [
          val[0] ? moment(val[0]).format('YYYY-MM-DD') : '',
          val[1] ? moment(val[1]).format('YYYY-MM-DD') : ''
        ]

        this.showVal = [
          val[0] ? moment(val[0]).format(this.format) : '',
          val[1] ? moment(val[1]).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) {
      this.val = val
      const data = [
        val[0] ? moment(val[0]).startOf('date') || val[0].startOf('date') : '',
        val[0] ? moment(val[1]).endOf('date') || val[1].endOf('date') : '',
      ]
      this.$emit('input', data)
      this.$emit('change', data)
    },
    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-range-picker'].getElementsByClassName('range-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-range-picker {
  position: relative;
  border-radius: 2px;
  background: $content_color;
  &-value {
    position: absolute;
    left: 38px;
    top: 9px;
    line-height: 22px;
    display: flex;
    width: calc(100% - 68px);
    > div {
      width: calc(50% - 5px);
      &:last-child {
        box-sizing: border-box;
        width: calc(50% + 5px);
        padding-left: 10px;
        border-left: 1px solid $border_color;
      }
    }
  }
  &-placeholder {
    color: $default_color;
  }
}
</style>
