<template>
  <transition name="el-zoom-in-top" @after-leave="afterLeave">
    <div
      v-show="visible"
      class="el-picker-panel el-date-range-picker el-popper"
      :style="{'width':shortcuts ? '698px' : ''}"
      :class="[
        {'has-time': showTime},
        popperClass]">
      <div class="el-picker-panel__body-wrapper" :class="{'has-shortcuts': shortcuts }">
        <div class="el-picker-panel--fotterbtn" v-if="shortcuts" :class="{'footer-range':type === 'datetimerange'}">
          <el-button
            type="secondary"
            size="mini"
            class="el-picker-panel__shortcut"
            v-for="(shortcut, key) in shortcuts"
            :key="key"
            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</el-button>
        </div>
        <div class="el-picker-panel__body">
          <div
            class="el-picker-panel__content
            is-range el-date-range-picker__content is-left"
            v-if="checkType === 'date'">
            <div class="el-date-range-picker__header el-date-picker__header--bordered">
              <button
                type="button"
                @click="leftPrevYear"
                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
              <button
                type="button"
                @click="leftPrevMonth"
                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
              <button
                type="button"
                @click="leftNextYear"
                v-if="unlinkPanels"
                :disabled="!enableYearArrow"
                :class="{ 'is-disabled': !enableYearArrow }"
                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
              <button
                type="button"
                @click="leftNextMonth"
                v-if="unlinkPanels"
                :disabled="!enableMonthArrow"
                :class="{ 'is-disabled': !enableMonthArrow }"
                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
              <div>{{ leftLabel }}</div>
            </div>
            <date-table
              selection-mode="range"
              :date="leftDate"
              :default-value="defaultValue"
              :min-date="minDate"
              :max-date="maxDate"
              :range-state="rangeState"
              :disabled-date="disabledDate"
              :cell-class-name="cellClassName"
              @changerange="handleChangeRange"
              :first-day-of-week="firstDayOfWeek"
              @pick="handleRangePick">
            </date-table>
          </div>
          <div
            class="el-picker-panel__content is-range
            el-date-range-picker__content is-right"
            v-if="checkType === 'date'">
            <div class="el-date-range-picker__header el-date-picker__header--bordered">
              <button
                type="button"
                @click="rightPrevYear"
                v-if="unlinkPanels"
                :disabled="!enableYearArrow"
                :class="{ 'is-disabled': !enableYearArrow }"
                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
              <button
                type="button"
                @click="rightPrevMonth"
                v-if="unlinkPanels"
                :disabled="!enableMonthArrow"
                :class="{ 'is-disabled': !enableMonthArrow }"
                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
              <button
                type="button"
                @click="rightNextYear"
                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
              <button
                type="button"
                @click="rightNextMonth"
                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
              <div>{{ rightLabel }}</div>
            </div>
            <date-table
              selection-mode="range"
              :date="rightDate"
              :default-value="defaultValue"
              :min-date="minDate"
              :max-date="maxDate"
              :range-state="rangeState"
              :disabled-date="disabledDate"
              :cell-class-name="cellClassName"
              @changerange="handleChangeRange"
              :first-day-of-week="firstDayOfWeek"
              @pick="handleRangePick">
            </date-table>
          </div>

          <div
            class="el-date-range-picker__header-group el-date-picker__header--bordered"
            v-if="checkType === 'time'">
            <div>选择时间</div>
            <div>选择时间</div>
          </div>

          <div class="el-date-range-spinner__content" v-if="checkType === 'time'">
            <time-spinner
              ref="timespinnerleft"
              @change="handleTimeRangePick"
              :am-pm-mode="amPmMode"
              :timeType="'left'"
              :minDate="minDate"
              :maxDate="maxDate"
              :disabled="disabledStart"
              @select-range="setSelectionRange"
              :showSeconds="showSeconds"
              @mounted="proxyTimePickerDataProperties('timespinnerleft', leftDate)"
              :date="leftDate">
            </time-spinner>
            <time-spinner
              ref="timespinnerright"
              @change="handleTimeRangePick"
              :am-pm-mode="amPmMode"
              :timeType="'right'"
              :minDate="minDate"
              :maxDate="maxDate"
              :disabled="disabledEnd"
              @select-range="setSelectionRange"
              :showSeconds="showSeconds"
              @mounted="proxyTimePickerDataProperties('timespinnerright', rightDate)"
              :date="rightDate">
            </time-spinner>
          </div>

          <div class="el-date-range-picker__select-type" v-if="showTime">
            <span class="el-date-range-picker__picker-wrap"
              :class="{'el-date-range-picker__picker-wrap--checked': checkType === 'date'}"
              @click="openDateSpinner">
              <i class="el-icon-date el-input__icon"></i><span>{{ visibleMinDate }}{{rangeSeparator}}{{ visibleMaxDate }}</span>
            </span>
            <span class="el-date-range-picker__picker-wrap"
              :class="{'el-date-range-picker__picker-wrap--checked': checkType === 'time', 'el-date-range-picker__picker-wrap--disabled': !minDate && !maxDate}"
              @click="openTimeSpinner">
              <i class="el-icon-time el-input__icon"></i><span>{{ visibleMinTime }}{{rangeSeparator}}{{ visibleMaxTime }}</span>
            </span>
          </div>

        </div>
      </div>
      <div class="el-picker-panel__footer" v-if="footerVisible || type === 'datetimerange'">
        <el-button
          size="mini"
          type="secondary"
          class="el-picker-panel__link-btn"
          v-if="footerVisible"
          @click="handleClear">
          {{ t('el.datepicker.cancel') }}
        </el-button>
        <el-button
          size="mini"
          class="el-picker-panel__link-btn"
          :disabled="btnDisabled"
          @click="handleCheck">
          {{ t('el.datepicker.confirm') }}
        </el-button>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  import {
    formatDate,
    clearTime,
    isDate,
    modifyWithTimeString,
    modifyTime,
    prevYear,
    nextYear,
    prevMonth,
    nextMonth,
    nextDate,
    extractDateFormat,
    extractTimeFormat
  } from 'modesign-ui/src/utils/date-util';
  import Locale from 'modesign-ui/src/mixins/locale';
  import TimePicker from './time';
  import DateTable from '../basic/date-table';
  import TimeSpinner from '../basic/time-range-spinner';
  import ElInput from 'modesign-ui/packages/input';
  import ElButton from 'modesign-ui/packages/button';

  const calcDefaultValue = (defaultValue) => {
    if (Array.isArray(defaultValue)) {
      return [new Date(defaultValue[0]), new Date(defaultValue[1])];
    } else if (defaultValue) {
      return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)];
    } else {
      return [new Date(), nextMonth(new Date())];
    }
  };

  export default {
    mixins: [Locale],
    name: 'ElDateRange',
    provide() {
      return {
        elDateRange: this
      }
    },

    computed: {
      btnDisabled() {
        return !(this.minDate && this.maxDate && !this.rangeState.selecting && this.isValidValue([this.minDate, this.maxDate]));
      },

      leftLabel() {
        return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.leftDate.getMonth() + 1 }`);
      },

      rightLabel() {
        return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.rightDate.getMonth() + 1 }`);
      },

      leftYear() {
        return this.leftDate.getFullYear();
      },

      leftMonth() {
        return this.leftDate.getMonth();
      },

      rightYear() {
        return this.rightDate.getFullYear();
      },

      rightMonth() {
        return this.rightDate.getMonth();
      },

      timeFormat() {
        if (this.format) {
          return extractTimeFormat(this.format);
        } else {
          return 'HH:mm';
        }
      },

      showSeconds() {
        let nowFormat = this.timeFormat
        return nowFormat.indexOf('ss') > -1
      },

      dateFormat() {
        if (this.format) {
          return extractDateFormat(this.format);
        } else {
          return 'yyyy-MM-dd';
        }
      },

      enableMonthArrow() {
        const nextMonth = (this.leftMonth + 1) % 12;
        const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0;
        return this.unlinkPanels && new Date(this.leftYear + yearOffset, nextMonth) < new Date(this.rightYear, this.rightMonth);
      },

      enableYearArrow() {
        return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12;
      },

      footerVisible() {
        return this.showFooter || this.selectionMode === 'dates';
      },

      visibleMinTime() {
        if (this.timeUserInput.min !== null) {
          return this.timeUserInput.min;
        } else {
          return formatDate(this.leftDate, this.timeFormat);
        }
      },

      visibleMinDate() {
        if (this.dateUserInput.min !== null) {
          return this.dateUserInput.min;
        } else {
          return formatDate((this.value && this.value[0]) || (this.defaultValue && this.defaultValue[0]) || new Date(), this.dateFormat);
        }
      },

      visibleMaxTime() {
        if (this.timeUserInput.max !== null) {
          return this.timeUserInput.max;
        } else {
          return formatDate(this.rightDate, this.timeFormat);
        }
      },

      visibleMaxDate() {
        if (this.dateUserInput.max !== null) {
          return this.dateUserInput.max;
        } else {
          return formatDate((this.value && this.value[1]) || (this.defaultValue && this.defaultValue[1]) || nextMonth(new Date()), this.dateFormat);
        }
      },

      amPmMode() {
        if ((this.format || '').indexOf('A') !== -1) return 'A';
        if ((this.format || '').indexOf('a') !== -1) return 'a';
        return '';
      }
    },

    data() {
      return {
        popperClass: '',
        value: [],
        defaultValue: null,
        defaultTime: null,
        minDate: null,
        maxDate: null,
        leftDate: new Date(),
        rightDate: nextMonth(new Date()),
        rangeState: {
          endDate: null,
          selecting: false,
          row: null,
          column: null
        },
        showTime: false,
        shortcuts: '',
        visible: '',
        disabledDate: '',
        disabledStart: false,
        disabledEnd: false,
        cellClassName: '',
        firstDayOfWeek: 7,
        format: '',
        unlinkPanels: false,
        dateUserInput: {
          min: null,
          max: null
        },
        timeUserInput: {
          min: null,
          max: null
        },
        timeSpinnerVisible: false,
        selectableRange: [],
        checkType: 'date', // type为datetime时选择日期或时间
        type: '',
        firstPickDisabled: false,
        secondPickDisabled: false,
      };
    },

    watch: {
      minDate(val) {
        this.dateUserInput.min = null;
        this.timeUserInput.min = null;
      },

      maxDate(val) {
        this.dateUserInput.max = null;
        this.timeUserInput.max = null;
      },
      secondPickDisabled(val) {
        if (Array.isArray(val) && val.length > 1) {
          const start = val[0]
          const end = val[1]
          this.disabledStart = start
          this.disabledEnd = end
        }
      },
      value(newVal) {
        if (!newVal) {
          // fix：#3324、#3720 取消默认值
          // 没有默认值时，用前十五天到后十五天
          // const steps = 15 * 24 * 60 * 60 * 1000;
          // this.value = [new Date(Date.now() - steps), new Date(Date.now() + steps)];
          // this.minDate = this.value[0];
          // this.maxDate = this.value[1];
        } else if (Array.isArray(newVal)) {
          this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;
          this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;
          if (this.minDate) {
            this.leftDate = this.minDate;
            if (this.maxDate && (this.unlinkPanels || this.showTime)) {
              const minDateYear = this.minDate.getFullYear();
              const minDateMonth = this.minDate.getMonth();
              const maxDateYear = this.maxDate.getFullYear();
              const maxDateMonth = this.maxDate.getMonth();
              this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth
                ? nextMonth(this.maxDate)
                : this.maxDate;
            } else {
              this.rightDate = nextMonth(this.leftDate);
            }
          } else {
            this.leftDate = calcDefaultValue(this.defaultValue)[0];
            this.rightDate = nextMonth(this.leftDate);
          }
        }
      },

      defaultValue(val) {
        // 增加判断val是否有值是为了保证第一次打开弹窗时minDate和maxDate是null
        if (val && !Array.isArray(this.value)) {
          const [left, right] = calcDefaultValue(val);
          this.leftDate = left;
          this.rightDate = val && val[1] && this.unlinkPanels
            ? right
            : nextMonth(this.leftDate);
        }
      },

      defaultTime(val) {
        if (this.defaultTime && !Array.isArray(this.value)) {
          const leftTime = val[0].split(":");
          const rightTime = val[1].split(":");
          this.$nextTick(() => {
            this.leftDate = modifyTime(this.leftDate, leftTime[0], leftTime[1], leftTime[2]);
            this.rightDate = modifyTime(this.rightDate, rightTime[0], rightTime[1], rightTime[2]);
          })
        }
      },

      timeSpinnerVisible(val) {
        if (val) {
          this.$nextTick(() => {
            this.getDisabledTime(this.secondPickDisabled)
            this.$refs.timespinnerleft.emitSelectRange('hours');
            this.$refs.timespinnerright.emitSelectRange('hours');
            this.$refs.timespinnerleft.adjustSpinners();
            this.$refs.timespinnerright.adjustSpinners();
          });
        }
      },
      visible(val) {
        if (this.checkType === 'time' && val) {
          this.$nextTick(() => {
            this.$refs.timespinnerleft.emitSelectRange('hours');
            this.$refs.timespinnerright.emitSelectRange('hours');
            this.$refs.timespinnerleft.adjustSpinners();
            this.$refs.timespinnerright.adjustSpinners();
          });
        } else {
          this.timeSpinnerVisible = false
        }
      }
    },

    methods: {
      getDisabledTime(val) {
        const minMaxFlag = new Date(formatDate(val.minDate, 'yyyy-MM-dd')).getTime() === new Date(formatDate(val.maxDate, 'yyyy-MM-dd')).getTime()
        if (Array.isArray(val) && val.length > 1) {
          
          const endHour = this.maxDate.getHours()
          const endMinute = this.maxDate.getMinutes()
          const startHour = this.minDate.getHours()
          const startMinute = this.minDate.getMinutes()
          const start = val[0]
          const end = val[1]
          const hours = []
          for (let i = 0; i < 24; i++) {
            if (minMaxFlag) {
              if (start) {
                // 开始时间禁用，结束时间小时数>开始时间小时数
                hours[i] = i <= startHour
              }
              if (end) {
                // 结束时间禁用，开始时间小时数<=结束时间小时数
                hours[i] = i > endHour
              }
            } else {
              hours[i] = false
            }
            
          }
          const minutes = []
          for (let i = 0; i < 60; i++) {
            if (startHour === endHour && minMaxFlag) {
              if (start) {
                // 开始时间禁用，结束时间分钟数>开始时间分钟数
                minutes[i] = i <= startMinute
              }
              if (end && minMaxFlag) {
                // 结束时间禁用，开始时间分钟数<=结束时间分钟数
                minutes[i] = i > endMinute
              }
            } else {
              minutes[i] = false
            }
          }
          if (end) {
            this.$refs.timespinnerleft.disabledHours = hours
            this.$refs.timespinnerleft.disabledMinutes = minutes
          }
          if (start) {
            this.$refs.timespinnerright.disabledHours = hours
            this.$refs.timespinnerright.disabledMinutes = minutes
          }
        } else {
          this.$refs.timespinnerright.disabledHours = null
          this.$refs.timespinnerright.disabledMinutes = null
          this.$refs.timespinnerleft.disabledHours = null
          this.$refs.timespinnerleft.disabledMinutes = null
        }
      },
      proxyTimePickerDataProperties(refName, dateValue) {
        const date = date => {this.$refs[refName].date = date;};
        const selectableRange = selectableRange => {this.$refs[refName].selectableRange = selectableRange;};
        date(dateValue);
        selectableRange(this.selectableRange);
      },

      openDateSpinner() {
        this.checkType = 'date';
        this.timeSpinnerVisible = false;
        this.$emit('change-type');
      },
      openTimeSpinner() {
        if (this.minDate && this.maxDate) {
          this.checkType = 'time';
          this.timeSpinnerVisible = true;
          this.$emit('change-type');

        }
      },

      handleClear() {
        this.minDate = null;
        this.maxDate = null;
        this.leftDate = calcDefaultValue(this.defaultValue)[0];
        this.rightDate = nextMonth(this.leftDate);
        this.$emit('pick', null);
      },

      handleCheck(){
        this.handleConfirm(false)
        this.checkType = 'date'
      },

      handleChangeRange(val) {
        this.minDate = val.minDate;
        this.maxDate = val.maxDate;
        this.rangeState = val.rangeState;
      },

      setSelectionRange(start, end) {
        // 时间选择器会focus时、分、秒，前面有日期，所以要加11
        this.$emit('select-range', start + 11, end + 11);
      },

      handleRangePick(val, close = true) {
        const defaultTime = this.defaultTime || [];
        let minDate, maxDate;
        if (this.showTime) {
          if (!this.defaultTime) {
            // minDate = clearSeconds(new Date(val.minDate));
            minDate = new Date(val.minDate);
            this.leftDate = clearTime(this.leftDate);
          } else {
            const time = defaultTime[0].split(":")
            // minDate = clearSeconds(modifyTime(new Date(val.minDate), time[0], time[1], time[2]));
            minDate = modifyTime(new Date(val.minDate), time[0], time[1], time[2]);
            val.minDate = minDate;
          }
          if (!this.value || (this.value && this.value.length === 0)) {
            this.value = ['', ''];
          }
          if (new Date(this.value[1]).getTime() - new Date(val.minDate).getTime() < 0) {
            this.$set(this.value, 0, this.value[1]);
            this.$set(this.value, 1, val.minDate);
          } else {
            this.$set(this.value, 0, val.minDate);
            this.$set(this.value, 1, this.value[1]);
          }
          if (val.maxDate) {
            if (!this.defaultTime) {
              // maxDate = clearSeconds(new Date(val.maxDate));
              maxDate = new Date(val.maxDate);
              this.rightDate = clearTime(this.rightDate);
            } else {
              const time = defaultTime[1].split(":")
              // maxDate = clearSeconds(modifyTime(new Date(val.maxDate), time[0], time[1], time[2]));
              maxDate = modifyTime(new Date(val.maxDate), time[0], time[1], time[2]);
              val.maxDate = maxDate;
            }
            this.$set(this.value, 1, val.maxDate);
          }
        } else {
          minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
          maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
        }

        if (this.maxDate === maxDate && this.minDate === minDate) {
          return;
        }
        this.onPick && this.onPick(val);
        this.maxDate = maxDate;
        this.minDate = minDate;

        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
        setTimeout(() => {
          this.maxDate = maxDate;
          this.minDate = minDate;
        }, 10);

        if(this.showTime) {
          this.handleConfirm(true)
          return
        }
        
        if (!close || this.showTime) return;
        this.handleConfirm();
      },

      handleTimeRangePick(val) {
        if (this.visible) {
          // const minDate = clearSeconds(new Date(val.minDate));
          // const maxDate = clearSeconds(new Date(val.maxDate));
          const minDate = new Date(val.minDate);
          const maxDate = new Date(val.maxDate);
          const minMaxFlag = new Date(formatDate(val.minDate, 'yyyy-MM-dd')).getTime() === new Date(formatDate(val.maxDate, 'yyyy-MM-dd')).getTime()
          
          const minutes = []
          const hours = []
          const rightHours = []
          const startHour = minDate.getHours()
          const startMinute = minDate.getMinutes()
          const endHour = maxDate.getHours()
          const endMinute = maxDate.getMinutes()
          for (let j = 0; j < 24; j++) {
            if (minMaxFlag) {
              hours[j] = j > endHour
              rightHours[j] = j < startHour
            }
          }
          if (minMaxFlag) {
            this.$refs.timespinnerleft.disabledHours = hours
            this.$refs.timespinnerright.disabledHours = rightHours
          }
          for (let i = 0; i < 60; i++) {
            if ((startHour === endHour) && minMaxFlag) {
              if (this.disabledStart) {
                // 开始时间禁用，结束时间分钟数>开始时间分钟数
                minutes[i] = i < startMinute
              } else if (this.disabledEnd) {
                // 结束时间禁用，开始时间分钟数<=结束时间分钟数
                minutes[i] = i > endMinute
              } else {
                if (this.showSeconds) {
                  minutes[i] = i > endMinute
                } else {
                  minutes[i] = i >= endMinute
                }
                
              }
            } else {
              minutes[i] = false
            }
          }
          // 秒数判断
          const seconds = []
          const rightSeconds = []
          if (this.showSeconds) {
            const startSeconds = minDate.getSeconds()
            const endSeconds = maxDate.getSeconds()
            for (let k = 0; k < 60; k++) {
              if (minMaxFlag && (startHour === endHour) &&  (startMinute === endMinute)) {
                seconds[k] = k > endSeconds
                rightSeconds[k] = k < startSeconds
              } else {
                seconds[k] = false
                rightSeconds[k] = false
              }
            }
            this.$refs.timespinnerleft.disabledSeconds = seconds
            this.$refs.timespinnerright.disabledSeconds = rightSeconds
          }
          
          if (this.disabledEnd) {
            this.$refs.timespinnerleft.disabledMinutes = minutes
          } else if (this.disabledStart) {
            this.$refs.timespinnerright.disabledMinutes = minutes
          } 
          if (minMaxFlag) {
            this.$refs.timespinnerleft.disabledMinutes = minutes
            // this.$refs.timespinnerright.disabledMinutes = minutes.map(item => !item)
          }
          if (this.maxDate === maxDate && this.minDate === minDate) {
            return;
          }
          if (!this.disabledEnd) {
            this.maxDate = maxDate;
          }
          if (!this.disabledStart) {
            this.minDate = minDate
          }
          this.handleConfirm(true);
        }
      },

      handleShortcutClick(shortcut) {
        if (shortcut.onClick) {
          shortcut.onClick(this);
        }
      },

      // leftPrev*, rightNext* need to take care of `unlinkPanels`
      leftPrevYear() {
        this.leftDate = prevYear(this.leftDate);
        if (!this.unlinkPanels) {
          this.rightDate = nextMonth(this.leftDate);
        }
      },

      leftPrevMonth() {
        this.leftDate = prevMonth(this.leftDate);
        if (!this.unlinkPanels) {
          this.rightDate = nextMonth(this.leftDate);
        }
      },

      rightNextYear() {
        if (!this.unlinkPanels) {
          this.leftDate = nextYear(this.leftDate);
          this.rightDate = nextMonth(this.leftDate);
        } else {
          this.rightDate = nextYear(this.rightDate);
        }
      },

      rightNextMonth() {
        if (!this.unlinkPanels) {
          this.leftDate = nextMonth(this.leftDate);
          this.rightDate = nextMonth(this.leftDate);
        } else {
          this.rightDate = nextMonth(this.rightDate);
        }
      },

      // leftNext*, rightPrev* are called when `unlinkPanels` is true
      leftNextYear() {
        this.leftDate = nextYear(this.leftDate);
      },

      leftNextMonth() {
        this.leftDate = nextMonth(this.leftDate);
      },

      rightPrevYear() {
        this.rightDate = prevYear(this.rightDate);
      },

      rightPrevMonth() {
        this.rightDate = prevMonth(this.rightDate);
      },

      handleConfirm(visible = false) {
        if (this.isValidValue([this.minDate, this.maxDate])) {
          this.$emit('pick', [this.minDate, this.maxDate], visible);
        }
      },

      isValidValue(value) {
        return Array.isArray(value) &&
          value && value[0] && value[1] &&
          isDate(value[0]) && isDate(value[1]) &&
          value[0].getTime() <= value[1].getTime() && (
          typeof this.disabledDate === 'function'
            ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
            : true
        );
      },

      resetView() {
        // NOTE: this is a hack to reset {min, max}Date on picker open.
        // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
        //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
        if (this.minDate && this.maxDate == null) this.rangeState.selecting = false;
        this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
        this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
      },

      afterLeave() {
        this.checkType = 'date';
        this.timeSpinnerVisible = false;
        this.$emit('dodestroy');
      }
    },

    components: { TimePicker, TimeSpinner, DateTable, ElInput, ElButton }
  };
</script>
