<template>
    <div class="container">
      <!--日历-具体时间 start-->
      <div class="calendar flex-box">
        <i class="iconfont icon-zuojiantou icon_prev" :class="{noClick:start}" @click="prevMonth"></i>
        <i class="iconfont icon-arrow-right1 icon_next" :class="{noClick:last}" @click="nextMonth"></i>
        <div class="calender_wrap" :style="{transform:'translate3d('+css+'px, 0px, 0px)'}">
          <div class="slide" v-for="(group,gIndex) in dates">
            <div class="calendar_month">{{group.year}}年{{group.month}}月</div>
            <div class="calendar_head">
              <div class="week_title flex-box">
                <div class="flex" v-for="w in timeWeek">{{w.t}}</div>
              </div>
            </div>
            <div class="calendar_group">
              <div class="calendar_days_box">
                <div class="calendar_day" v-for="(d,index) in group.days">
                  <div class="calendar_day_cell past" v-for="i in d.weekIndex" v-if="index==0">
                  </div>
                  <div class="calendar_day_cell" :class="{past:!d.state,checkedDay:d.chooseFlag,b_checkedDay:d.isbegin,e_checkedDay:d.isend,borderRadius:chooseNum==1,todayStyl:d.istoday}" @click="chooseDates(group.year,group.month,d,gIndex)">{{d.istoday ? '今日' : d.day}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        props:{
          startDate:'',
          endDate:''
        },
        data () {
            return {
              currentIndex:0,
              css:'',
              today:'',
              dates:[],
              chooseNum:0,
              chooseDate:[],
              numDays:0,
              start:true,
              last:false,
              timeWeek:[
                {w:'周一',t:'日',isActive:false},
                {w:'周二',t:'一',isActive:false},
                {w:'周三',t:'二',isActive:false},
                {w:'周四',t:'三',isActive:false},
                {w:'周五',t:'四',isActive:false},
                {w:'周六',t:'五',isActive:false},
                {w:'周日',t:'六',isActive:false},
              ]
            }
        },
        methods: {
            getDateList(){
              var date = new Date();
              var curryear = date.getFullYear();
              var currmonth = date.getMonth()+1;
              var year = date.getFullYear();
              var month = date.getMonth()+1;
              this.today = date.getDate();
              var currNumber=0;
              for(var i = 0 ; i < 4 ; i++){
                if(month > 12){
                  year+=1;
                  month=1;
                }
                var _days = [];
                var curMonthDays = new Date(year,month, 0).getDate();
                for(var j = 0 ; j < curMonthDays ; j++){
                  currNumber++;
                  var state=(month == currmonth && j+1 < (this.today+1) || (currNumber-this.today)>=91) ? false :true;
                  var istoday=month == currmonth && j+1 == this.today;
                  _days.push({weekIndex : new Date(year,month-1, j+1).getDay(),day: (j+1),chooseFlag:false,state:state,istoday:istoday,isbegin:false,isend:false});
                }
                this.dates.push({
                  year : year,
                  month : month,
                  days : _days,
                  isActive:false
                });
                month+=1;
              }
              let currMonthDate = new Date(curryear,currmonth, 0).getDate();
//              if(currMonthDate-(this.today)<2){
//                for (var k=0;k<2-(currMonthDate-this.today);k++){
//                  this.dates[1].days[k].state=false;
//                }
//              }

            },

            checkedDate(){
              var startDate=new Date(this.$parent.startDate);
              var endDate=new Date(this.$parent.endDate);
              this.chooseDate[0]={
                  year:startDate.getFullYear(),
                  month:startDate.getMonth()+1,
                  day:startDate.getDate()
              }
              this.chooseDate[1]={
                  year:endDate.getFullYear(),
                  month:endDate.getMonth()+1,
                  day:endDate.getDate()
              }

              this.numDays = Math.abs((endDate.getTime() - startDate.getTime()))/(1000*60*60*24)+1;
              var numIndex=0;
              for (var i=0 ; i< this.dates.length ; i++){
                for (var j=0 ;j<this.dates[i].days.length ;j++){
                  if(numIndex>=this.numDays){
                    break;
                  }
                  if(this.dates[i].year==this.chooseDate[0].year){
                    if(this.dates[i].month==this.chooseDate[0].month){
                      if(this.dates[i].days[j].day>=this.chooseDate[0].day){
                        this.dates[i].days[this.chooseDate[0].day-1].isbegin=true;
                        this.dates[i].days[j].chooseFlag=true;
                        numIndex++;
                      }
                    }else if(this.dates[i].month>this.chooseDate[0].month){
                      this.dates[i].days[j].chooseFlag=true;
                      numIndex++;
                    }

                    if(this.dates[i].month==this.chooseDate[1].month){
                      this.dates[i].days[this.chooseDate[1].day-1].isend=true;
                    }
                  }else if(this.dates[i].year>this.chooseDate[0].year){
                    this.dates[i].days[j].chooseFlag=true;
                    numIndex++;
                  }
                }
              }
            },
            /*
            * 选择日期
            * */
            chooseDates(y,m,d,gIndex){
              if(!d.state){
                  return false;
              }

              this.chooseNum++;
              var d=d.day;
              var chooseList=[];
              if(this.chooseNum==1){
                this.clearChoose();
                this.chooseDate.push({year:y,month:m,day:d,mIndex:gIndex});
                this.dates[gIndex].days[d-1].chooseFlag=true;
                this.numDays=0;
              }else if(this.chooseNum>1){

                var startDate=new Date(this.chooseDate[0].year,this.chooseDate[0].month-1,this.chooseDate[0].day);
                var endDate=new Date(y,m-1,d);
                this.chooseDate.push({year:y,month:m,day:d,mIndex:gIndex});
                if(endDate - startDate<=0){
                  this.chooseNum=1;
                  this.clearChoose();
                  this.chooseDate.push({year:y,month:m,day:d,mIndex:gIndex});
                  this.dates[gIndex].days[d-1].chooseFlag=true;
                  this.numDays=0;
                  return;
                }
                this.dates[this.chooseDate[0].mIndex].days[this.chooseDate[0].day-1].isbegin=true;
                this.dates[gIndex].days[d-1].isend=true;
                this.numDays = Math.abs((endDate.getTime() - startDate.getTime()))/(1000*60*60*24)+1;
                var numIndex=0;
                for (var i=0 ; i< this.dates.length ; i++){
                    for (var j=0 ;j<this.dates[i].days.length ;j++){
                        if(numIndex>=this.numDays){
                            break;
                        }
                        if(this.dates[i].year==this.chooseDate[0].year){
                          if(this.dates[i].month==this.chooseDate[0].month){
                            if(this.dates[i].days[j].day>=this.chooseDate[0].day){
                              this.dates[i].days[j].chooseFlag=true;
                              numIndex++;
                            }
                          }else if(this.dates[i].month>=this.chooseDate[0].month){
                            this.dates[i].days[j].chooseFlag=true;
                            numIndex++;
                          }
                        }else if(this.dates[i].year>this.chooseDate[0].year){
                          this.dates[i].days[j].chooseFlag=true;
                          numIndex++;
                        }
                    }
                }
                this.chooseNum=0;
//                this.$parent.showIndex=-1;
                this.$parent.chooseDayNum=this.numDays;
                this.$parent.startDate=this.chooseDate[0].year+'-'+ spaceNum(this.chooseDate[0].month)+"-"+spaceNum(this.chooseDate[0].day);
                this.$parent.endDate=this.chooseDate[1].year+'-'+ spaceNum(this.chooseDate[1].month)+"-"+ spaceNum(this.chooseDate[1].day);
                this.$emit("chooseDateFun");
              }
            },
            /*
            * 清除选中样式
            * */
            clearChoose(){
              this.chooseDate.length=0;
              this.dates.forEach(item=>{
                  item.days.forEach(d=>{
                      d.chooseFlag=false;
                      d.isbegin=false;
                      d.isend=false;
                  });
              });
            },

            /**
             * 上一个月
             * */
            prevMonth(){
              this.start=false;
              this.last=false;
              if(this.currentIndex<=0){
                  this.start=true;
                  this.currentIndex=0;
                  return;
              }else {
                this.currentIndex--;
                this.css=-this.currentIndex*258;
              }
            },
            /**
             * 下一个月
             * */
            nextMonth(){
              this.start=false;
              this.last=false;
              if(this.currentIndex>=2){
                this.currentIndex=2;
                this.last=true;
                return;
              }else {
                this.currentIndex++;
                this.css=-this.currentIndex*258;
              }
            },
        },
        created(){
          this.getDateList();
        }
    }
</script>
<style>
  @-moz-document url-prefix() {
    .calendar .slide{
      width:210px!important;
      flex: 0 auto!important;
    }
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig"
@import "date.styl"

.calendar{
  position relative
  white-space:nowrap;
  height 256px
  width 100%
  overflow hidden
  .calender_wrap{
    display:inline-block
    display flex
    position relative
    width 100%
    height 256px
    white-space:nowrap
    box-sizing: content-box;
    color #18242c
  }
  .slide{
    display inline
    float left
    flex 0 0 210px
    /*-moz-box-flex 210px*/
    width 206px
    margin 0 24px
    font-size 14px
  }
  .calendar_head{
    height 30px
    line-height 30px
    .week_title{
      height 30px
      line-height 30px
      background transparent
      border none
      .flex{
        float left
        width 34.8px
      }
    }
  }
.calendar_group{
  margin-top 3px
}
.calendar_group .calendar_days_box .calendar_day_cell{
    width 30px
    height 30px
    line-height 30px
    margin-bottom 0px
    cursor pointer
    &.past{
      cursor not-allowed
      &:hover{
        background transparent
        color #d9d9d9
      }
    }
    &:hover{
      background #a7c7fb
      color #fff
      border-radius 100%
    }
    &.checkedDay:hover{
      border-radius 0
    }
    &.borderRadius:hover{
      border-radius 100%
    }
  /*  &.todayStyl{
      border-radius 100%
      background mainColor
      color #ffffff
      &:hover{
        background mainColor
        border-radius 100%
      }
    }*/
    &.checkedDay.e_checkedDay:hover{
      border-radius 100%
      border-top-left-radius 0
      border-bottom-left-radius 0
    }
    &.checkedDay.b_checkedDay:hover{
      border-radius 100%
      border-top-right-radius 0
      border-bottom-right-radius 0
    }
  }
  .calendar_month{
    height 40px
    line-height 40px
    font-size 15px
    text-align center
  }

  /*滚动条样式*/
  &::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
  }
  &::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }
}
.b_checkedDay{
  border-top-left-radius 24px;
  border-bottom-left-radius 24px;
}
.e_checkedDay{
  border-top-right-radius 24px;
  border-bottom-right-radius 24px;
}

.icon_prev,.icon_next{
  position absolute
  top 12px
  left 10px
  z-index 1
  cursor pointer
  color #2894f2
}
.icon_next{
  left auto
  right 10px
}
.noClick{
  color #d9d9d9
  cursor not-allowed
}
</style>
