<template>
  <div class="lanaya-date-picker">
    <div class="lanaya-date-picker__year-month">
      <span class="lanaya-date-picker__year-month__change" @click="minusOneYear()">
        <i class="icon icon-more-left"></i>
      </span>
      <span class="lanaya-date-picker__year-month__change" @click="minusOneMonth()">
        <i class="icon icon-left"></i>
      </span>
      <span class="lanaya-date-picker__year-month__year">{{pickDateYear}}</span>
      <span class="lanaya-date-picker__year-month__month">{{pickDateMonth}}</span>
      <span class="lanaya-date-picker__year-month__change" @click="addOneMonth()">
        <i class="icon icon-right"></i>
      </span>
      <span class="lanaya-date-picker__year-month__change" @click="addOneYear()">
        <i class="icon icon-more-right"></i>
      </span>
    </div>
    <table class="lanaya-date-picker__day">
      <tr class="lanaya-date-picker__day__row">
        <td class="lanaya-date-picker__day__row__cell">一</td>
        <td class="lanaya-date-picker__day__row__cell">二</td>
        <td class="lanaya-date-picker__day__row__cell">三</td>
        <td class="lanaya-date-picker__day__row__cell">四</td>
        <td class="lanaya-date-picker__day__row__cell">五</td>
        <td class="lanaya-date-picker__day__row__cell">六</td>
        <td class="lanaya-date-picker__day__row__cell">日</td>
      </tr>
      <tr class="lanaya-date-picker__day__row" v-for="(row,outerIndex) in loopDate()" :key="outerIndex">
        <td class="lanaya-date-picker__day__row__cell" v-for="(date,innerIndex) in row"
            @click="clickDate(date)"
            :class="isActive(date)"
            :key="innerIndex">
          {{loopDateItem(date)}}
        </td>
      </tr>
    </table>
    <div class="lanaya-date-picker__time" v-if="withTime">
      <div class="lanaya-date-picker__time__hour">
        <l-input v-model="hour" type="number" width="100%" min="0" max="23"></l-input>
      </div>
      <span class="lanaya-date-picker__time__split">:</span>
      <div class="lanaya-date-picker__time__minute">
        <l-input v-model="minute" type="number" width="100%" min="0" max="59"></l-input>
      </div>
      <span class="lanaya-date-picker__time__split">:</span>
      <div class="lanaya-date-picker__time__second">
        <l-input v-model="second" type="number" width="100%" min="0" max="59"></l-input>
      </div>
    </div>
    <div class="lanaya-date-picker__btn-box">
      <l-button @click="confirmPickDate()" style="margin-right: 10px;">确定</l-button>
      <l-button @click="cancelPickDate()" color="grey">取消</l-button>
    </div>
  </div>
</template>

<script>
import LButton from './../button/Button';
import LInput from './../input/Input';

const getCurrentMonthFirstDate = (date) => {
  let year = date.getFullYear();
  let month = date.getMonth();
  return new Date(year, month, 1);
};
const getCurrentMonthLastDate = (date) => {
  let year = date.getFullYear();
  let month = date.getMonth();
  return new Date(new Date(year, month + 1) - 1000 * 60 * 60 * 24);
};
export default {
  name: 'LDatePicker',
  props: ['date', 'withTime'],
  components: {
    LButton,
    LInput
  },
  methods: {
    cancelPickDate () {
      this.$parent.$emit('destroyPicker');
    },
    confirmPickDate () {
      this.pickDate.setHours(this.hour);
      this.pickDate.setMinutes(this.minute);
      this.pickDate.setSeconds(this.second);
      this.$parent.$emit('pickDate', new Date(this.pickDate));
    },
    minusOneYear () {
      this.pickDate = new Date(this.pickDate.setFullYear(this.pickDate.getFullYear() - 1));
    },
    minusOneMonth () {
      this.pickDate = new Date(this.pickDate.setMonth(this.pickDate.getMonth() - 1));
    },
    addOneMonth () {
      this.pickDate = new Date(this.pickDate.setMonth(this.pickDate.getMonth() + 1));
    },
    addOneYear () {
      this.pickDate = new Date(this.pickDate.setFullYear(this.pickDate.getFullYear() + 1));
    },
    clickDate (date) {
      this.pickDate = new Date(this.pickDate.setDate(date.getDate()));
    },
    isActive (date) {
      if (!date) {
        return '';
      }
      if (this.pickDate.getDate() === date.getDate()) {
        return 'is-active is-enable-select';
      }
      return 'is-enable-select';
    },
    loopDate () {
      if (!this.pickDate) {
        return;
      }
      let allDate = [...new Array(getCurrentMonthLastDate(this.pickDate).getDate() - getCurrentMonthFirstDate(this.pickDate).getDate() + 1).keys()]
        .map((item) => {
          return new Date(getCurrentMonthFirstDate(this.pickDate).getTime() + item * 1000 * 60 * 60 * 24);
        });
      let firstWeekDay = allDate[0].getDay();
      firstWeekDay = firstWeekDay === 0 ? 7 : firstWeekDay;
      let insertCells = [...new Array(firstWeekDay - 1).keys()].map(item => {
        return null;
      });
      allDate = [...insertCells, ...allDate];
      return allDate.reduce((prev, curr, index) => {
        if (index % 7 === 0) {
          prev.push([]);
        }
        prev[prev.length - 1].push(curr);
        return prev;
      }, []);
    }
  },
  computed: {
    pickDateMonth () {
      return this.pickDate && this.pickDate.getMonth() + 1 + '月';
    },
    pickDateYear () {
      return this.pickDate && this.pickDate.getFullYear() + '年';
    },
    loopDateItem () {
      return function (date) {
        return date ? new Date(date).getDate() : '';
      };
    }
  },
  data () {
    return {
      hour: 0,
      minute: 0,
      second: 0,
      pickDate: null
    };
  },
  mounted () {
    this.pickDate = this.date;
    this.hour = this.pickDate.getHours();
    this.minute = this.pickDate.getMinutes();
    this.second = this.pickDate.getSeconds();
  },
  destroyed () {
    this.$parent.$emit('datePickerHasDestroyed');
  }
};
</script>
