<template>
  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
    <div
      v-show="visible"
      class="el-picker-panel el-date-range-picker el-popper"
      :class="[{
        'has-sidebar': $slots.sidebar || shortcuts,
        'has-time': showTime
      }, popperClass]">
      <div class="el-picker-panel__body-wrapper">
        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
        <div class="el-picker-panel__sidebar" v-if="shortcuts">
          <button
            type="button"
            class="el-picker-panel__shortcut"
            v-for="(shortcut, key) in shortcuts"
            :key="key"
            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>

          <div class="el-picker-panel__footer" v-if="showTime" style="text-align:center;position:absolute;width:100%;bottom:12px;box-sizing:border-box;">
            <el-button
              plain
              size="mini"
              class="el-picker-panel__link-btn"
              :disabled="btnDisabled"
              @click="handleConfirm(false)">
              {{ t('el.datepicker.confirm') }}
            </el-button>
            <br>
            <el-button
              size="mini"
              class="el-picker-panel__link-btn"
              @click="handleClear">
              {{ t('el.datepicker.clear') }}
            </el-button>
          </div>
        </div>
        <div class="el-picker-panel__body">
          <div class="el-date-range-picker__time-header" v-if="showTime" v-show="false">
            <span class="el-date-range-picker__editors-wrap">
              <span class="el-date-range-picker__time-picker-wrap">
                <el-input
                  size="small"
                  :disabled="rangeState.selecting"
                  ref="minInput"
                  :placeholder="t('el.datepicker.startDate')"
                  class="el-date-range-picker__editor"
                  :value="minVisibleDate"
                  @input.native="handleDateInput($event, 'min')"
                  @change.native="handleDateChange($event, 'min')" />
              </span>
            </span>
            <span class="el-icon-arrow-right"></span>
            <span class="el-date-range-picker__editors-wrap is-right">
              <span class="el-date-range-picker__time-picker-wrap">
                <el-input
                  size="small"
                  :disabled="rangeState.selecting"
                  :placeholder="t('el.datepicker.endDate')"
                  class="el-date-range-picker__editor"
                  :value="maxVisibleDate"
                  :readonly="!minDate"
                  @input.native="handleDateInput($event, 'max')"
                  @change.native="handleDateChange($event, 'max')" />
              </span>
            </span>
          </div>
          <div class="el-picker-panel__content el-date-range-picker__content is-left">
            <!-- <div class="el-date-range-picker__header">
              <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> -->
            <div>
              <el-select v-model="dhLeftMonth"
                         ref="dhLeftMonth"
                         style="width: 90px;margin-right:5px;"
                         @change="dhLeftMonthChange">
                <el-option v-for="(month, index) in dhMonthList"
                        :key="month.key"
                        :value="month.key"
                        :label="month.value"></el-option>
              </el-select>
              <el-select v-model="dhLeftYear"
                         style="width: 90px"
                         @change="dhLeftYearChange">
                <el-option v-for="(year, index) in dhYearList"
                        :key="index"
                        :label="year.value"
                        :value="year.key"></el-option>
              </el-select>
              <div class="el-date-range-picker__time-picker-wrap-dh" v-clickoutside="handleMinTimeClose">
                <el-input
                  size="small"
                  :disabled="rangeState.selecting"
                  :placeholder="t('el.datepicker.startTime')"
                  class="el-date-range-picker__editor"
                  :value="minVisibleTime"
                  @focus="minTimePickerVisible = true"
                  @change.native="handleTimeChange($event, 'min')" />
                <time-picker
                  ref="minTimePicker"
                  @pick="handleMinTimePick"
                  :time-arrow-control="arrowControl"
                  :visible="minTimePickerVisible"
                  @mounted="$refs.minTimePicker.format=timeFormat">
                </time-picker>
              </div>
            </div>
            <date-table
              selection-mode="range"
              :date="leftDate"
              :default-value="defaultValue"
              :min-date="minDate"
              :max-date="maxDate"
              :range-state="rangeState"
              :disabled-date="disabledDate"
              @changerange="handleChangeRange"
              :first-day-of-week="firstDayOfWeek"
              @pick="handleRangePick">
            </date-table>
          </div>
          <div class="el-picker-panel__content el-date-range-picker__content is-right">
            <!--<div class="el-date-range-picker__header">-->
              <!--<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">11</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>-->
            <div>
              <el-select v-model="dhRightMonth"
                         ref="dhRightMonth"
                         style="width: 90px;margin-right:5px;"
                         @change="dhRightMonthChange">
                <el-option v-for="(month, index) in dhMonthList"
                           :key="month.key"
                           :value="month.key"
                           :label="month.value"></el-option>
              </el-select>
              <el-select v-model="dhRightYear"
                         style="width: 90px"
                         @change="dhRightYearChange">
                <el-option v-for="(year, index) in dhYearList"
                           :key="index"
                           :label="year.value"
                           :value="year.key"></el-option>
              </el-select>
              <span class="el-date-range-picker__time-picker-wrap-dh" v-clickoutside="handleMaxTime1">
                <el-input
                  size="small"
                  :disabled="rangeState.selecting"
                  ref="maxInput"
                  :placeholder="t('el.datepicker.endTime')"
                  class="el-date-range-picker__editor"
                  :value="maxVisibleTime"
                  @focus="minDate && (maxTimePickerVisible = true)"
                  :readonly="!minDate"
                  @change.native="handleTimeChange($event, 'max')" />
                <time-picker
                  ref="maxTimePicker"
                  @pick="handleMaxTimePick"
                  :time-arrow-control="arrowControl"
                  :visible="maxTimePickerVisible"
                  @mounted="$refs.maxTimePicker.format=timeFormat">
                </time-picker>
              </span>
            </div>
            <date-table
              selection-mode="range"
              :date="rightDate"
              :default-value="defaultValue"
              :min-date="minDate"
              :max-date="maxDate"
              :range-state="rangeState"
              :disabled-date="disabledDate"
              @changerange="handleChangeRange"
              :first-day-of-week="firstDayOfWeek"
              @pick="handleRangePick">
            </date-table>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  import {
    formatDate,
    parseDate,
    isDate,
    modifyDate,
    modifyTime,
    modifyWithTimeString,
    prevYear,
    nextYear,
    prevMonth,
    nextMonth,
    extractDateFormat,
    extractTimeFormat
  } from '../util';
  import Clickoutside from 'dh-element-ui/src/utils/clickoutside';
  import Locale from 'dh-element-ui/src/mixins/locale';
  import TimePicker from './time';
  import DateTable from '../basic/date-table';
  import ElInput from 'dh-element-ui/packages/input';
  import ElButton from 'dh-element-ui/packages/button';
  // import {dateRangeShortcutOptions} from '../util/plugin-config';

  const advanceDate = (date, amount) => {
    return new Date(new Date(date).getTime() + amount);
  };

  const calcDefaultValue = (defaultValue) => {
    if (Array.isArray(defaultValue)) {
      return [new Date(defaultValue[0]), new Date(defaultValue[1])];
    } else if (defaultValue) {
      return [new Date(defaultValue), advanceDate(defaultValue, 24 * 60 * 60 * 1000)];
    } else {
      return [new Date(), advanceDate(Date.now(), 24 * 60 * 60 * 1000)];
    }
  };
  let getDHYear = () => {
    var now = (new Date()).getFullYear();
    var start = now - 10;
    var end = now + 10;
    let a = [];
    for (let i = start; i <= end; i++) {
      a.push({
        key: i,
        value: i
      });
    }
    return a;
  };

  let calcRightYear = (leftDate) => {
    let month = leftDate.getMonth();
    let FullYear = leftDate.getFullYear();
    if (month >= 11) FullYear += 1;
    return FullYear;
  };
  let calcRightMonth = (leftDate) => {
    let month = leftDate.getMonth();
    if (month >= 11) {
      month = 0;
    } else {
      month += 1;
    }
    return month;
  };

 let calcLeftYear = (rightDate) => {
   let month = rightDate.getMonth();
   let FullYear = rightDate.getFullYear();
   if (month <= 0) FullYear -= 1;
   return FullYear;
 };
  let calcLeftMonth = (rightDate) => {
    let month = rightDate.getMonth();
    if (month <= 0) {
      month = 11;
    } else {
      month -= 1;
    }
    return month;
  };
  export default {
    mixins: [Locale],

    directives: { Clickoutside },

    computed: {
      btnDisabled() {
        return !(this.minDate && this.maxDate && !this.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();
      },

      leftMonthDate() {
        return this.leftDate.getDate();
      },

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

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

      rightMonthDate() {
        return this.rightDate.getDate();
      },

      minVisibleDate() {
        return this.minDate ? formatDate(this.minDate, this.dateFormat) : '';
      },

      maxVisibleDate() {
        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.dateFormat) : '';
      },

      minVisibleTime() {
        return this.minDate ? formatDate(this.minDate, this.timeFormat) : '';
      },

      maxVisibleTime() {
        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.timeFormat) : '';
      },

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

      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;
      }
    },

    data() {
      return {
        dhMonthList: [
          {
            key: 0,
            value: '一月'
          },
          {
            key: 1,
            value: '二月'
          },
          {
            key: 2,
            value: '三月'
          },
          {
            key: 3,
            value: '四月'
          },
          {
            key: 4,
            value: '五月'
          },
          {
            key: 5,
            value: '六月'
          },
          {
            key: 6,
            value: '七月'
          },
          {
            key: 7,
            value: '八月'
          },
          {
            key: 8,
            value: '九月'
          },
          {
            key: 9,
            value: '十月'
          },
          {
            key: 10,
            value: '十一月'
          },
          {
            key: 11,
            value: '十二月'
          }
        ],
        dhYearList: getDHYear(),
        dhLeftYear: (new Date()).getFullYear(),
        dhLeftMonth: (new Date()).getMonth(),
        dhRightYear: calcRightYear(new Date()),
        dhRightMonth: calcRightMonth(new Date()),
        popperClass: '',
        value: [],
        defaultValue: null,
        defaultTime: null,
        minDate: '',
        maxDate: '',
        leftDate: new Date(),
        rightDate: nextMonth(new Date()),
        rangeState: {
          endDate: null,
          selecting: false,
          row: null,
          column: null
        },
        showTime: false,
        shortcuts: '',
        visible: '',
        disabledDate: '',
        firstDayOfWeek: 7,
        minTimePickerVisible: false,
        maxTimePickerVisible: false,
        format: '',
        arrowControl: false,
        unlinkPanels: false
      };
    },

    watch: {
      minDate(val) {
        this.$nextTick(() => {
          if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
            const format = 'HH:mm:ss';
            this.$refs.maxTimePicker.selectableRange = [
              [
                parseDate(formatDate(this.minDate, format), format),
                parseDate('23:59:59', format)
              ]
            ];
          }
        });
        if (val && this.$refs.minTimePicker) {
          this.$refs.minTimePicker.date = val;
          this.$refs.minTimePicker.value = val;
        }
      },

      maxDate(val) {
        if (val && this.$refs.maxTimePicker) {
          this.$refs.maxTimePicker.date = val;
          this.$refs.maxTimePicker.value = val;
        }
      },

      leftDate(val) {
      	this.dhLeftMonth = val.getMonth();
        this.dhLeftYear = val.getFullYear();
      },

      rightDate(val) {
	      this.dhRightMonth = val.getMonth();
	      this.dhRightYear = val.getFullYear();
      },

      minTimePickerVisible(val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.minTimePicker.date = this.minDate;
            this.$refs.minTimePicker.value = this.minDate;
            this.$refs.minTimePicker.adjustSpinners();
          });
        }
      },

      maxTimePickerVisible(val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.maxTimePicker.date = this.maxDate;
            this.$refs.maxTimePicker.value = this.maxDate;
            this.$refs.maxTimePicker.adjustSpinners();
          });
        }
      },

      value(newVal) {
        if (!newVal) {
          this.minDate = null;
          this.maxDate = null;
        } 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.unlinkPanels && this.maxDate) {
              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) {
        if (!Array.isArray(this.value)) {
          const [left, right] = calcDefaultValue(val);
          this.leftDate = left;
          this.rightDate = val && val[1] && this.unlinkPanels
            ? right
            : nextMonth(this.leftDate);
        }
      },

      dhLeftMonth(val) {
        this.dhRightMonthChange('watching');
      },
      dhRightMonth(val) {
        this.dhLeftMonthChange('watching');
      },
      dhLeftYear(val) {
        this.dhLeftYearChange('watching');
      },
      dhRightYear(val) {
        this.dhRightYearChange('watching');
      }
    },

    methods: {
      dhLeftMonthChange(e) {
        var d = new Date();
        d.setMonth(this.dhLeftMonth, 1);
        d.setFullYear(this.dhLeftYear);
        this.leftDate = new Date(d);
        this.dhRightMonth = !this.unlinkPanels ? calcRightMonth(this.leftDate) : this.dhRightMonth;
        this.dhRightYear = !this.unlinkPanels ? calcRightYear(this.leftDate) : this.dhRightYear;
      },
      dhLeftYearChange(e) {
        let stamp = this.leftDate.getTime();
        let d = new Date(stamp);
        d.setFullYear(this.dhLeftYear);
        this.leftDate = new Date(d);
        this.dhRightYear = !this.unlinkPanels ? calcRightYear(this.leftDate) : this.dhRightYear;
      },
      dhRightMonthChange(e) {
        var d = new Date();
        d.setMonth(this.dhRightMonth, 1);
        d.setFullYear(this.dhRightYear);
        this.rightDate = new Date(d);
        this.dhLeftMonth = !this.unlinkPanels ? calcLeftMonth(this.rightDate) : this.dhLeftMonth;
      },
      dhRightYearChange(e) {
        let stamp = this.rightDate.getTime();
        let d = new Date(stamp);
        d.setFullYear(this.dhRightYear);
        this.rightDate = new Date(d);
        this.dhLeftYear = !this.unlinkPanels ? calcLeftYear(this.rightDate) : this.dhLeftYear;
      },
      handleClear() {
        this.minDate = null;
        this.maxDate = null;
        this.leftDate = calcDefaultValue(this.defaultValue)[0];
        this.rightDate = nextMonth(this.leftDate);
        this.dhLeftMonth = (new Date()).getMonth();
        this.dhRightMonth = calcRightMonth(new Date());
        this.dhLeftYear = (new Date()).getFullYear();
        this.dhRightYear = calcRightYear(new Date());
        this.$emit('pick', null);
      },

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

      handleDateInput(event, type) {
        const value = event.target.value;
        if (value.length !== this.dateFormat.length) return;
        const parsedValue = parseDate(value, this.dateFormat);

        if (parsedValue) {
          if (typeof this.disabledDate === 'function' &&
            this.disabledDate(new Date(parsedValue))) {
            return;
          }
          if (type === 'min') {
            this.minDate = new Date(parsedValue);
            this.leftDate = new Date(parsedValue);
            this.rightDate = nextMonth(this.leftDate);
          } else {
            this.maxDate = new Date(parsedValue);
            this.leftDate = prevMonth(parsedValue);
            this.rightDate = new Date(parsedValue);
          }
        }
      },

      handleDateChange(event, type) {
        const value = event.target.value;
        const parsedValue = parseDate(value, this.dateFormat);
        if (parsedValue) {
          if (type === 'min') {
            this.minDate = modifyDate(this.minDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
            if (this.minDate > this.maxDate) {
              this.maxDate = this.minDate;
            }
          } else {
            this.maxDate = modifyDate(this.maxDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
            if (this.maxDate < this.minDate) {
              this.minDate = this.maxDate;
            }
          }
        }
      },

      handleTimeChange(event, type) {
        const value = event.target.value;
        const parsedValue = parseDate(value, this.timeFormat);
        if (parsedValue) {
          if (type === 'min') {
            this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
            if (this.minDate > this.maxDate) {
              this.maxDate = this.minDate;
            }
            this.$refs.minTimePicker.value = this.minDate;
            this.minTimePickerVisible = false;
          } else {
            this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
            if (this.maxDate < this.minDate) {
              this.minDate = this.maxDate;
            }
            this.$refs.maxTimePicker.value = this.minDate;
            this.maxTimePickerVisible = false;
          }
        }
      },

      handleRangePick(val, close = true) {
        const defaultTime = this.defaultTime || [];
        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
        const 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 (!close || this.showTime) return;
        this.handleConfirm();
      },

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

      handleMinTimePick(value, visible, first) {
        this.minDate = this.minDate || new Date();
        if (value) {
          this.minDate = modifyTime(this.minDate, value.getHours(), value.getMinutes(), value.getSeconds());
        }

        if (!first) {
          this.minTimePickerVisible = visible;
        }

        if (!this.maxDate || this.maxDate && this.maxDate.getTime() < this.minDate.getTime()) {
          this.maxDate = new Date(this.minDate);
        }
      },

      handleMinTimeClose() {
        this.minTimePickerVisible = false;
      },

      handleMaxTimePick(value, visible, first) {
        if (this.maxDate && value) {
          this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds());
        }

        if (!first) {
          this.maxTimePickerVisible = visible;
        }

        if (this.maxDate && this.minDate && this.minDate.getTime() > this.maxDate.getTime()) {
          this.minDate = new Date(this.maxDate);
        }
      },

      handleMaxTimeClose() {
        this.maxTimePickerVisible = false;
      },

      // 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
        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;
      }
    },

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