<template>

    <div :class="b()">

        <div :class="b('header')" class="eye-flex-center">

            <div class="opt__button">
                <eye-button size="mini" @click="onPreDate">
                    <i class="eye-icon-back"/>
                </eye-button>
            </div>
            <div :class="b('label')">{{currentYear}}年{{currentMonth}}月</div>
            <div class="opt__button">
                <eye-button size="mini" @click="onNextDate">
                    <i class="eye-icon-right"/>
                </eye-button
            ></div>
        </div>
        <table>
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
            <tr v-for="rows in allDays">
                <td v-for="(col,index) in rows"
                    :class="col.class"
                    @click="onChooseDate(col)">
                    <div v-if="col.value" class="day-wrap eye-flex-center" :class="[{
                        isToday:col.isToday
                    },selectClass(col.date,index)]">
                        <span>{{col.label}}</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import { Component,Core,Field } from 'eye-core';


const WEEKS = ['日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']

export default Component({

  name: 'calendar',

  mixins:[ Field ],

  props: {
      format:{
          type:String,
          default:'yyyy-MM-dd'
      },
      isRange:{
          type:Boolean,
          default:true
      },

      isAfterToday: {
          type:Boolean,
          default:true
      },

      selectDayGaps: {
          type:Number,
          default:15
      }
  },

  onInit() {
      this.initData();
  },

  computed: {


      toDay() {
          let nowTime = new Date();
          return Core.date.toFormat(nowTime,this.format);
      },

      selected() {
          if(this.selects.length) {
              return this.isRange ? this.selects[0] : this.selects
          }
      }

  },

  data() {
      let nowTime = new Date();
      return {
          currentYear:nowTime.getFullYear(),
          currentMonth:nowTime.getMonth()+1,
          selects:[],
          daysCount:0,
          firstDay:0,
          allDays:[]
      }
  },

  methods: {


      initData() {
          this.refresh();
      },

      currentValueChange(val) {
          if(Core._.isString(val)) {
              this.selects = [val]
          }else {
              if(Core._.isArray(val) && this.isRange) {
                  this.selects = val
              }
          }
          let [ sDate ] = this.selectSort();
          sDate && this.refreshDate(Core.date.toDate(sDate));
      },


      refreshDate(date) {
          let year = date.getFullYear();
          let month = date.getMonth()+1;
          this.refresh(year,month);
      },


      refresh(year,month) {

          let nowTime = new Date();


          if(!year || !month) {
              year = nowTime.getFullYear();
              month = nowTime.getMonth()+1;
          }

          let m = month - 1;
          let daysCount = (new Date(year, month, 0)).getDate();
          let firstDay = (new Date(year, m, 1)).getDay();
          let maxDays = firstDay+daysCount;

          this.currentYear = year;
          this.currentMonth = month;
          this.firstDay = firstDay;
          this.daysCount = daysCount;

          let allDays = [];
          let day = 1;
          let weeks;
          let toDay = this.toDay;
          let endDay;
          if(this.isAfterToday && this.selectDayGaps) {
              endDay = Core.date.toUp(nowTime,'d',this.selectDayGaps)
          }

          for(let i = 0;i<42;i++) {
              if(i % 7 == 0) {
                  weeks = [];
                  allDays.push(weeks)
              }
              if(i >= firstDay && day <= daysCount) {


                  let d = new Date(year,m,day);
                  let date = Core.date.toFormat(d,this.format);

                  let isToday = toDay == date;
                  let label = isToday ? '今天' : day;
                  let disabled = false
                  let classes = ['eye-calendar__day']

                  if(this.isAfterToday) {
                      if(nowTime.getTime() > d.getTime()) {
                          classes.push('eye-calendar__disabled');
                          disabled = true;
                      }

                      if(endDay) {
                          if(d.getTime() > endDay.getTime()) {
                              classes.push('eye-calendar__disabled');
                              disabled = true;
                          }
                      }
                  }

                  weeks.push({
                      disabled,
                      isToday,
                      date,
                      class:classes.join(' '),
                      value:day,
                      label
                  })
                  day++;
              } else {
                  weeks.push({
                      class:'eye-calendar__empty'
                  })
              }
          }

          this.allDays = allDays;
      },


      selectClass(date,index) {

          let [ sDate, eDate ] = this.selectSort();
          let classes = [];
          if(sDate && eDate) {
              if(sDate == date) {
                  classes.push('select__start')
              }
              if(eDate == date) {
                  classes.push('select__end')
              }

              let sTime = Core.date.toDate(sDate).getTime();
              let eTime = Core.date.toDate(eDate).getTime();
              let cTime = Core.date.toDate(date).getTime();

              if(cTime > sTime && eTime > cTime) {
                  classes.push('select__middle')
              }

          } else {
              if(sDate == date) {
                  classes.push('select')
              }
          }
          return classes
      },




      onPreDate() {
          let { currentYear,currentMonth } = this;
          currentMonth = currentMonth - 1;
          if(currentMonth <= 0) {
              currentMonth = 12;
              currentYear--;
          }
          this.refresh(currentYear,currentMonth);
      },

      onNextDate() {
          let { currentYear,currentMonth } = this;
          currentMonth = currentMonth + 1;
          if(currentMonth > 12) {
              currentMonth = 1;
              currentYear++;
          }
          this.refresh(currentYear,currentMonth);
      },

      selectSort() {
          let [ sDate, eDate ] = this.selects || [];
          if(sDate && eDate) {
              let sTime = Core.date.toDate(sDate).getTime();
              let eTime = Core.date.toDate(eDate).getTime();
              return eTime > sTime ? [ sDate, eDate ] :  [ eDate, sDate ]
          } else {
              return sDate ? [ sDate ] : []
          }
      },

      onChooseDate(col) {

          if(col.disabled) return;

          let { currentYear,currentMonth,selects } = this;
          selects = !this.isRange || selects.length >= 2 ? [] : selects;

          let selectDate = Core.date.toFormat(new Date(currentYear,currentMonth-1,col.value),this.format)
          selects.push(selectDate);
          this.selects = selects;
          if(this.isRange) {
              let [sTime,eTime] = selects || [];
              if(sTime && eTime) {


                  this.onSelectChange(this.selectSort())
              }
          } else {
              this.onSelectChange(selectDate)
          }
      }

  }

})

</script>
