<template>
  <div class="container">
      <div class="dateArea">
        <p class="d-title">出行月份</p>
        <ul class="d-month flex-box">
          <li v-for="m in months" @click="chooseMonth(m)" :class="{active:checkedMonth.month==m.month}">{{m.month}}月</li>
        </ul>
        <p class="d-title">出行天数  {{dayNum}} 天</p>
        <div class="d-select flex-box">
          <div class="flex">
            <input type="text" value="0" id="dayArea"/>
          </div>
        </div>

        <div class="d-fixiable">
          <span @click="checkFiliableDay"><i class="iconfont icon-duoxuankuang1 i-checkbox" :class="{active:isFixiable!='false'}"></i>可灵活调整天数(前后多一天浮动天数)</span>
        </div>
      </div>
      <!--底部按钮-->
      <div class="bottom-section" >
        <div class="fixed_bottom">
            <a class="btn subBtn" @click="commitFixiableDate">确定</a>
        </div>
      </div>
  </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
              isSelect:false,
              dayNum:2,
              weeks:[{val:1,label:'周一',ischeck:false},{val:2,label:'周二',ischeck:false},{val:3,label:'周三',ischeck:false},{val:4,label:'周四',ischeck:false},{val:5,label:'周五',ischeck:false},{val:6,label:'周六',ischeck:false},{val:7,label:'周日',ischeck:false}],
              checkedWeek:[],
              months:[],
              checkedMonth:'',
              depWeek:'',
              returnWeek:'',
              containWeek:"false",
              left_css:'',
              isFixiable:'false',
              tipShow:false,
              days:[2,3,4,5,6,7],
              dayArea:'',
            }
        },
        methods: {
          dayChange(){
            let _this=this;
            $("#dayArea").ionRangeSlider({
              type: "single",
              values: _this.days,//自定义刻度值
              from: 0, //默认从哪个值开始选
              to: 5, //默认选到哪个值
              grid:true,
              onChange: function (data) {//数据变化时触发

              },
              onFinish:function (data) {
                _this.dayNum=data.from_value;
              }
            });
            _this.dayArea= $("#dayArea").data("ionRangeSlider");
          },
          checkFiliableDay(){
            this.isFixiable = this.isFixiable== "false" ? 'true' : "false" ;
          },
          chooseDays(d){
            this.dayNum=d;
            this.isSelect=false;
            this.checkedWeek=[];
            this.depWeek='';
            this.returnWeek='';
            this.weeks.forEach(item=>{
                item.ischeck=false;
                item.notAllowed=false;
            })
          },
          chooseWeek(w){
            if(this.checkedWeek.length==0 || this.checkedWeek.length>1){
              this.checkedWeek=[];
              for(var i= 0;i<this.weeks.length;i++){
                this.weeks[i].ischeck=false;
              }
              w.ischeck=true;
              this.checkedWeek.push(w);
              this.depWeek=w.val;
              this.returnWeek='';
              this.containWeek="false";
              this.weekClick();
            }else if(this.checkedWeek.length==1){
              var cnum1=this.checkedWeek[0].val,max,min;
              var cnum2=w.val;
              if(Math.abs(cnum2-cnum1)<=this.dayNum && Math.abs(cnum2-cnum1)>0){
                this.containWeek="true";
                this.checkedWeek.push(w);
                this.weekClick();
                cnum2-cnum1>=0 ? (max=cnum2,min=cnum1) : (max=cnum1,min=cnum2);
                this.depWeek=min;
                this.returnWeek=max;
                for(var i= min;i<=max;i++){
                  this.weeks[i-1].ischeck=true;
                }
              }
            }
          },
          chooseMonth(m){
            this.checkedMonth=m;
          },
          getDateList(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            for(var i = 0 ; i < 4 ; i++){
              if(month > 12){
                year+=1;
                month=1;
              }
              this.months.push({
                year : year,
                month : month
              });
              if(i==0){
                  this.checkedMonth=this.months[0];
              }
              month+=1;
            }
          },
          /*选中周*/
          weekClick(){
              for (var i=0 ;i<this.weeks.length;i++){
                this.weeks[i].notAllowed=false;
                if(this.checkedWeek.length<=1 && Math.abs(this.checkedWeek[0].val-this.weeks[i].val)>this.dayNum){
                  this.weeks[i].notAllowed=true;
                }
              }
          },
          /**提交灵活时间*/
          commitFixiableDate(){
              var date=new Date(),month = date.getMonth()+1;
              var firstDay=this.checkedMonth.month==month ? date.getDate() : 1 ;
              var lastDay=new Date(this.checkedMonth.year,this.checkedMonth.month, 0).getDate();
              var returnDate=this.checkedMonth.year+"-"+spaceNum(this.checkedMonth.month)+"-"+spaceNum(lastDay);
              var depDayOfWeek='';
              if(this.dayNum>6){
                depDayOfWeek='' ;
              }else {
                depDayOfWeek= this.returnWeek ? (this.depWeek+','+ this.returnWeek) : this.depWeek;
              }
;
              var param={
                dateType:1,
                depDate:this.checkedMonth.year+"-"+spaceNum(this.checkedMonth.month)+"-"+spaceNum(firstDay),
                returnDate:this.checkedMonth.year+"-"+spaceNum(this.checkedMonth.month)+"-"+spaceNum(lastDay),
                minduration:this.dayNum-1,
                chooseNum:this.dayNum,
                isFixiable:this.isFixiable,
                DepartureDayOfWeekBitMask:'',
                checkedMonth:this.checkedMonth.month,
                containWeek:this.containWeek
              }
              this.$emit("chooseFixiableDateFun",param);
          },
          dealStr(val){
              return val<10 ? '0'+val : val ;
          },
          /*还原参数*/
          restoreDate(){
            this.dayNum=this.$parent.searchParam.minduration;
            if(this.$parent.searchParam.DepartureDayOfWeekBitMask){
              this.checkedWeek=this.$parent.searchParam.DepartureDayOfWeekBitMask.split(",");
              for (var i=0 ;i<this.weeks.length;i++){
                  if(this.checkedWeek[0]<=this.weeks[i].val && this.checkedWeek[1]>=this.weeks[i].val){
                    this.weeks[i].ischeck=true;
                  }
              }
            }
            var m=new Date(this.$parent.searchParam.depDate).getMonth() + 1;
            this.checkedMonth={
                month:m
            };
          }
        },
        mounted(){
          this.getDateList();
          this.dayChange();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig"
.dateArea{
  width 100%
  padding 15px 18px
  font-size 14px
  box-sizing border-box
  color color
  .d-select{
    position relative
    display inline-block
    width 100%
    margin 15px 0 40px
    padding 0 2%
    box-sizing border-box
    .daySelect{
      width 200px
      height 42px
      padding-left .5rem
      border-color border_color
      outline none
      font-size .8rem
      color mainTitleColor
      appearance none
      -moz-appearance none
      -webkit-appearance none
      background transparent
    }
    i{
      position absolute
      left auto
      right 14px
      top 15px
      color subColor
    }
    span{
      position absolute
      top 25px
    }
    .d-s{
      width 200px
      height 34px
      line-height 34px
      padding-left 12px
      box-sizing border-box
      border 1px solid bColor
      outline none
      i{
        margin-top -2px
        margin-right 10px
        color #92aaba
      }
    }
  }
  .d-fixiable{
    clear both
    display block
    position relative
    margin-top 15px
    font-size 14px
    color subheadColor
    cursor pointer
    .i-checkbox{
      margin-right 5px
    }

  }
  .d-title{
    margin-top 20px
    margin-bottom 14px
    font-weight bold
    font-size 16px
    color mainTitleColor
  }
  .d-month{
    margin-bottom 20px
    padding-bottom 20px
    border-bottom 1px solid border_color
    li{
      display inline-block
      min-width 4rem
      flex 1
      height 38px
      line-height 38px
      margin-right 8px
      text-align center
      border 1px solid border_color
      border-radius 19px
      cursor pointer
      color subheadColor
      &.active{
        background activeBg
        border-color subColor
        color mainTitleColor
      }
    }
  }
}
</style>
