<template>
  <FixUniDatetimePicker :class="className" v-model="selectDates" type="datetimerange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clearable" />
</template>

<script>
import FixUniDatetimePicker from '../fix-uni-datetime-picker/fix-uni-datetime-picker.vue'

export default {
  name: 'MlDatetimeRangePicker',
  options: {
    virtualHost: true
  },
  components: {
    FixUniDatetimePicker
  },
  props: {
    value: Array,
    border: Boolean,
    startDate: String,
    endDate: String,
    minDate: [String, Number],
    maxDate: [String, Number],
    clearable: Boolean,
    className: String
  },
  data () {
    return {
      selectDates: []
    }
  },
  computed: {
    tmplVal () {
      return `${this.startDate || ''}${this.endDate || ''}`
    }
  },
  watch: {
    tmplVal () {
      setTimeout(() => {
        this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
      }, 10)
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (this.startDate) {
        this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
      } else if (this.value && this.value.length) {
        this.selectDates = this.value
      }
    })
  },
  methods: {
    changeEvent (value) {
      const [startDate, endDate] = value
      this.$emit('input', value)
      this.$emit('update:startDate', startDate)
      this.$emit('update:endDate', endDate)
      this.$emit('change', { startDate, endDate })
    }
  }
}
</script>
