<template>
    <div class="container">
      <div class="date-container" :class="{owTrip:tripType=='ow'}">
        <div class="calendar_head">
          <div class="head_bar fixed">
            <div class="week_title flex-box ">
              <div class="flex" v-for="w in timeWeek">{{w.t}}</div>
            </div>
          </div>
        </div>
        <!--日历-具体时间 start-->
        <div class="calendar">
          <div class="calendar_group" v-for="(group,gIndex) in dates">
            <div class="calendar_month">{{group.year}}年{{group.month}}月</div>
            <div class="calendar_days_box">
              <div class="calendar_day" v-for="(d,index) in group.days">
                <div class="calendar_day_cell" 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>
        <!--日历 end-->

        <!--底部按钮-->
        <div class="bottom-section" v-if="tripType=='rt'">
          <div class="fixed_bottom">
            <div class="btn flex-box">
              <span>天数 <i>{{numDays}}天</i></span>
              <a href="JavaScript:void(0)" class="float-r" @click="subBtnFun">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        props:{
          dateOfDeparture:'',
          tripType:''
        },
        data () {
            return {
              timeType:0, // 0具体时间，1时间段
              today:'',
              dates:[],
              chooseNum:0,
              chooseDate:[],
              numDays:0,
              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;
//              }
//            }
          },
          /**
          * 选择日期
          * */
          chooseDates(y,m,d,gIndex){
            if(!d.state){
                return false;
            }
            if(this.tripType=='ow'){
              this.clearChoose();
              let depDate=y +'-'+spaceNum(m) +"-"+spaceNum(d.day);
              this.$emit("chooseDepDate",depDate);
            }else {
              this.chooseRtDate(y,m,d,gIndex);
            }
          },

          chooseRtDate(y,m,d,gIndex){
            this.chooseNum++;
            var d=d.day;
            var chooseList=[];
            if(this.chooseNum==1){
              this.chooseDate.length=0;
              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){
              this.chooseDate.push({year:y,month:m,day:d,mIndex:gIndex});
              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);
              if(endDate - startDate<=0){
                this.chooseDate.length=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;
                Toast('请选择返程时间');
                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 - startDate))/(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;
            }
          },
          /*
          * 清除选中样式
          * */
          clearChoose(){
              this.dates.forEach(item=>{
                  item.days.forEach(d=>{
                      d.chooseFlag = false;
                      d.isbegin = false;
                      d.isend = false;
                  });
              });
          },
          changeTimeType(type){
              this.timeType=type;
          },
          weekDayChoose(w){
              w.isActive=!w.isActive;
              var dayIndex=0;
              this.timeWeek.forEach(item=>{
                  if(item.isActive){
                    dayIndex+=1;
                  }
              })
              this.numDays=dayIndex;
          },
          subBtnFun(){
            if(this.chooseDate.length==1){
                Toast('请选择返程时间');
                return false;
            }
            if(this.chooseDate.length==2){
              var depDate=this.chooseDate[0].year+'-'+ spaceNum(this.chooseDate[0].month)+"-"+spaceNum(this.chooseDate[0].day);
              var returnDate=this.chooseDate[1].year+'-'+ spaceNum(this.chooseDate[1].month)+"-"+ spaceNum(this.chooseDate[1].day);
              var dateParams={
                dateType:0,
                depDate:depDate,
                returnDate:returnDate,
                chooseNum:this.numDays,
                minduration:this.numDays-1,
                DepartureDayOfWeekBitMask:'',
                containWeek:"false"
              }
              this.$emit("dateSubBtnFun",dateParams);
            }else {
              Toast('请选择出行时间') ;
              return false ;
            }

          },

        },
        created(){
          this.getDateList();
        },
        watch:{
          dateOfDeparture:function(newVal,oldVal){
              if(!newVal){
                this.numDays = 0;
                this.chooseDate = [];
                for (var i=0 ; i< this.dates.length ; i++){
                  for (var j = 0 ; j < this.dates[i].days.length ; j++){
                    this.dates[i].days[j].chooseFlag = false;
                  }
                }
              }
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "date.styl"

</style>
