<template>
    <div
      class="el-calendar"
      :class="[{
        'has-sidebar': $slots.sidebar || shortcuts,
        'has-time': showTime
      }, popperClass]">
      <div class="el-calendar__body-wrapper">
        <div class="el-calendar__body">
          <div class="el-calendar__header" v-show="headerType === 'normal'">
            <button
              type="button"
              @click="prevMonth"
              v-show="currentView === 'date'"
              class="el-calendar__icon-btn el-calendar__prev-btn el-icon-arrow-left">
            </button>
            <button
              type="button"
              @click="prevYear"
              class="el-calendar__icon-btn el-calendar__prev-btn el-icon-d-arrow-left">
            </button>
      <!--  <span
              @click="showYearPicker"
              class="el-calendar__header-label">{{ yearLabel }}</span>-->

            <year-select
              ref="yearTable"
              :year="year"
              :date="date"
              v-model="year"
              @change="handleYearChange"
              :disabled-date="disabledDate">
            </year-select>
              <month-select
                :month="month"
                :date="date"
                v-model="month"
                @change="handleMonthChange"
                :disabled-date="disabledDate">
              </month-select>
       <!--     <el-form-grid>
              <el-radio-group v-model="currentView" size="small"  class="el-calendar__radio-group">
                <el-radio-button label="date">月</el-radio-button>
                <el-radio-button label="month">年</el-radio-button>
              </el-radio-group>
            </el-form-grid>-->
     <!--       <span
              @click="showMonthPicker"
              v-show="currentView === 'date'"
              class="el-calendar__header-label"
              :class="{ active: currentView === 'month' }">{{t(`el.datepicker.month${ month + 1 }`)}}</span>-->
            <button
              type="button"
              @click="nextMonth"
              v-show="currentView === 'date'"
              class="el-calendar__icon-btn el-calendar__next-btn el-icon-arrow-right">
            </button>
            <button
              type="button"
              @click="nextYear"
              class="el-calendar__icon-btn el-calendar__next-btn el-icon-d-arrow-right">
            </button>
          </div>
          <div class="el-calendar__header is-tab"  v-show="headerType !== 'normal'">
            <div class="el-calendar__header-year">
              <span
              @click="showYearPicker"
              class="el-calendar__header-label">{{ yearLabel }}</span>
            </div>
            <div class="el-calendar__header-month"
                 v-show="currentView === 'date'">
              <el-tooltip :content="'上一年 ' + (Number(this.year) - 1)" placement="top" effect="light">
                <button
                  type="button"
                  @click="prevYear"
                  class="el-calendar__icon-btn el-calendar__tab-prev el-icon-d-arrow-left">
                </button>
              </el-tooltip>
              <el-tooltip :content="'下一年 ' + (Number(this.year) + 1)" placement="top" effect="light">
                <button
                  type="button"
                  @click="nextYear"
                  class="el-calendar__icon-btn el-calendar__tab-next el-icon-d-arrow-right">
                </button>
              </el-tooltip>

              <month-tab
                :month="month"
                :date="date"
                v-model="month"
                @month-tab-click="handleMonthTabClick"
                :disabled-date="disabledDate">
              </month-tab>
            </div>

          </div>

          <div class="el-calendar__content">
            <date-table
              v-show="currentView === 'date'"
              @pick="handleDatePick"
              :year="year"
              :month="month"
              :date="date"
              :week="week"
              :selection-mode="selectionMode"
              :first-day-of-week="firstDayOfWeek"
              :disabled-date="disabledDate"
              :date-cell-content="dateCellContent"
              :almanac="almanac">
            </date-table>
            <year-table
              ref="yearTable"
              :year="year"
              :date="date"
              v-show="currentView === 'year'"
              @pick="handleYearPick"
              :disabled-date="disabledDate">
            </year-table>
            <month-table
              :month="month"
              :date="date"
              v-show="currentView === 'month'"
              @pick="handleMonthPick"
              :disabled-date="disabledDate">
            </month-table>
          </div>
        </div>
      </div>
<!--
      <div
        class="el-calendar__footer"
        v-show="footerVisible && currentView === 'date'">
        <a
          href="JavaScript:"
          class="el-calendar__link-btn"
          @click="changeToNow">{{ t('el.datepicker.now') }}</a>
        <button
          type="button"
          class="el-calendar__btn"
          @click="confirm">{{ t('el.datepicker.confirm') }}</button>
      </div> -->
    </div>
</template>

<script type="text/babel">
  import { formatDate, parseDate, getWeekNumber } from '../util';
  import Locale from 'nui-v2/src/mixins/locale';
  import ElInput from 'nui-v2/packages/input';
  import TimePicker from './time';
  import YearTable from '../basic/year-table';
  import MonthTable from '../basic/month-table';
  import DateTable from '../basic/date-table';
  import MonthSelect from '../basic/month-select';
  import MonthTab from '../basic/month-tab';
  import YearSelect from '../basic/year-select';

  export default {
    mixins: [Locale],

    name: 'ElCalendar',
    watch: {
      showTime(val) {
        /* istanbul ignore if */
        if (!val) return;
        this.$nextTick(_ => {
          const inputElm = this.$refs.input.$el;
          if (inputElm) {
            this.pickerWidth = inputElm.getBoundingClientRect().width + 10;
          }
        });
      },

      value(newVal) {
        if (!newVal) return;
        newVal = new Date(newVal);
        if (!isNaN(newVal)) {
          if (typeof this.disabledDate === 'function' &&
            this.disabledDate(new Date(newVal))) {
            return;
          }
          this.date = newVal;
          this.year = newVal.getFullYear();
          this.month = newVal.getMonth();
          this.$emit('pick', newVal, true);
        }
      },

      timePickerVisible(val) {
        if (val) this.$nextTick(() => this.$refs.timepicker.ajustScrollTop());
      },

      selectionMode(newVal) {
        if (newVal === 'month') {
          /* istanbul ignore next */
          if (this.currentView !== 'year' || this.currentView !== 'month') {
            this.currentView = 'month';
          }
        } else if (newVal === 'week') {
          this.week = getWeekNumber(this.date);
        }
      },

      date(newVal) {
        this.year = newVal.getFullYear();
        this.month = newVal.getMonth();
        if (this.selectionMode === 'week') this.week = getWeekNumber(newVal);
      }
    },

    methods: {
      handleClear() {
        this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date();
        this.$emit('pick');
      },

      resetDate() {
        this.date = new Date(this.date);
      },

      showMonthPicker() {
        this.currentView = 'month';
      },

      showYearPicker() {
        this.currentView = 'year';
      },

      prevMonth() {
        this.month--;
        if (this.month < 0) {
          this.month = 11;
          this.year--;
        }
      },

      nextMonth() {
        this.month++;
        if (this.month > 11) {
          this.month = 0;
          this.year++;
          this.date.setMonth(this.month);
          this.date.setFullYear(this.year);
          this.resetDate();
        }
      },

      nextYear() {
        if (this.currentView === 'year') {
          this.$refs.yearTable.nextTenYear();
        } else {
          this.year++;
          this.$emit('year-change', this.year);
          this.date.setFullYear(this.year);
          this.date.setMonth(this.month);
          this.resetDate();
        }
      },

      prevYear() {
        if (this.currentView === 'year') {
          this.$refs.yearTable.prevTenYear();
        } else {
          this.year--;
          this.$emit('year-change', this.year);
          this.date.setFullYear(this.year);
          this.date.setMonth(this.month);
          this.resetDate();
        }
      },

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

      handleTimePick(picker, visible, first) {
        if (picker) {
          let oldDate = new Date(this.date.getTime());
          let hour = picker.getHours();
          let minute = picker.getMinutes();
          let second = picker.getSeconds();
          oldDate.setHours(hour);
          oldDate.setMinutes(minute);
          oldDate.setSeconds(second);
          this.date = new Date(oldDate.getTime());
        }

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

      handleMonthPick(month) {
        this.month = month;
        const selectionMode = this.selectionMode;
        if (selectionMode !== 'month') {
          this.date.setMonth(month);
          this.currentView = 'date';
          this.resetDate();
        } else {
          this.date.setMonth(month);
          this.year && this.date.setFullYear(this.year);
          this.resetDate();
          const value = new Date(this.date.getFullYear(), month, 1);
          this.$emit('pick', value);
        }
      },
      handleMonthChange(month) {
        this.month = month;
        this.$emit('month-change', month);
      },
      handleMonthTabClick(month) {
        this.$emit('month-tab-click', month);
      },
      handleDatePick(value) {
        if (this.selectionMode === 'day') {
          if (!this.showTime) {
            this.$emit('pick', new Date(value.getTime()));
          }
          this.date.setFullYear(value.getFullYear());
          this.date.setMonth(value.getMonth(), value.getDate());
        } else if (this.selectionMode === 'week') {
          this.week = value.week;
          this.$emit('pick', value.date);
        }

        this.resetDate();
      },

      handleYearPick(year, close = true) {
        this.year = year;
        if (!close) return;

        this.date.setFullYear(year);
        if (this.selectionMode === 'year') {
          this.$emit('pick', new Date(year));
        } else {
          this.currentView = 'month';
        }

        this.resetDate();
      },

      handleYearChange(year, close = true) {
        this.year = year;
        if (!close) return;

        this.date.setFullYear(year);
        //        if (this.selectionMode === 'year') {
        //          this.$emit('pick', new Date(year));
        //        } else {
        //          this.currentView = 'month';
        //        }

        this.resetDate();
        this.$emit('year-change', year);
      },

      changeToNow() {
        this.date.setTime(+new Date());
        this.$emit('pick', new Date(this.date.getTime()));
        this.resetDate();
      },

      confirm() {
        this.$emit('pick', this.date);
      },

      resetView() {
        if (this.selectionMode === 'month') {
          this.currentView = 'month';
        } else if (this.selectionMode === 'year') {
          this.currentView = 'year';
        } else {
          this.currentView = 'date';
        }

        if (this.selectionMode !== 'week') {
          this.year = this.date.getFullYear();
          this.month = this.date.getMonth();
        }
      }
    },

    components: {
      TimePicker, YearTable, MonthTable, DateTable, ElInput, MonthSelect, MonthTab, YearSelect
    },

    mounted() {
      if (this.date && !this.year) {
        this.year = this.date.getFullYear();
        this.month = this.date.getMonth();
      }
    },
    props: {
      // 头部显示内容，默认年月下拉框模式，否则为tab模式
      headerType: {
        type: String,
        default: 'normal'
      },
      // 天显示的自定义结构
      dateCellContent: Function,
      // 配置显示节日或者农历
      almanac: Array
    },

    data() {
      return {
        popperClass: '',
        pickerWidth: 0,
        date: this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date(),
        value: '',
        showTime: false,
        selectionMode: 'day',
        shortcuts: '',
        visible: false,
        currentView: 'date',
        disabledDate: '',
        almanacDate: '',
        firstDayOfWeek: 7,
        year: null,
        month: null,
        week: null,
        showWeekNumber: false,
        timePickerVisible: false,
        width: 0,
        format: ''
      };
    },

    computed: {
    /*      footerVisible() {
        return this.showTime;
      },*/
    /*
      visibleTime: {
        get() {
          return formatDate(this.date, this.timeFormat);
        },

        set(val) {
          if (val) {
            const date = parseDate(val, this.timeFormat);
            if (date) {
              date.setFullYear(this.date.getFullYear());
              date.setMonth(this.date.getMonth());
              date.setDate(this.date.getDate());
              this.date = date;
              this.$refs.timepicker.value = date;
              this.timePickerVisible = false;
            }
          }
        }
      }, */

      visibleDate: {
        get() {
          return formatDate(this.date);
        },

        set(val) {
          const date = parseDate(val, 'yyyy-MM-dd');
          if (!date) {
            return;
          }
          if (typeof this.disabledDate === 'function' && this.disabledDate(date)) {
            return;
          }
          date.setHours(this.date.getHours());
          date.setMinutes(this.date.getMinutes());
          date.setSeconds(this.date.getSeconds());
          this.date = date;
          this.resetView();
        }
      },

      yearLabel() {
        const year = this.year;
        if (!year) return '';
        const yearTranslation = this.t('el.datepicker.year');
        if (this.currentView === 'year') {
          const startYear = Math.floor(year / 10) * 10;
          if (yearTranslation) {
            return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation;
          }
          return startYear + ' - ' + (startYear + 9);
        }
        return this.year + ' ' + yearTranslation;
      },

      timeFormat() {
        if (this.format && this.format.indexOf('ss') === -1) {
          return 'HH:mm';
        } else {
          return 'HH:mm:ss';
        }
      }
    }
  };
</script>
