<template>
      <div class="dateArea">
        <p class="d-title">出行天数</p>
        <div class="d-select input-border">
          <el-select  class="d-s" v-model="dayNum">
            <el-option v-for="i in 7" :value="i" :key="i" :label="i+'天'" v-show="i>1"></el-option>
          </el-select>
          <div class="d-fixiable">
            <span @click="checkFiliableDay"><i class="iconfont icon-duoxuankuang1 i-checkbox" :class="{active:isFixiable!='false'}"></i>可灵活调整天数 <font style="font-size: 12px">(前后多一天浮动天数)</font></span>
          </div>
        </div>
        <p class="d-title">出行月份</p>
        <ul class="d-month">
          <li v-for="m in months" @click="chooseMonth(m)" :class="{active:checkedMonth.month==m.month}">{{m.month}}月</li>
        </ul>
        <a class="subbtn btn sBtn" @click="commitFixiableDate">确定</a>
      </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:[],
              isFixiable:"false",
              checkedMonth:'',
              depWeek:'',
              returnWeek:'',
              containWeek:"false",
              msg:'这里是提示信息',
              tipShow:false,
              styleObj:{
                top:'130%',
                loca:'top'
              },
            }
        },
        methods: {
          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;
                }
              }
          },
          checkFiliableDay(){
            this.isFixiable = this.isFixiable== "false" ? 'true' : "false" ;
          },
          /**提交灵活时间*/
          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 depDate=this.checkedMonth.year+"-"+spaceNum(this.checkedMonth.month)+"-"+spaceNum(firstDay);
              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;
              }
              this.$emit("chooseFixiableDateFun",{dayNum:this.dayNum,isFixiable:this.isFixiable,depDayOfWeek:depDayOfWeek,depDate:depDate,returnDate:returnDate,containWeek:this.containWeek,checkedMonth:this.checkedMonth.month});
          },
          dealStr(val){
              return val<10 ? '0'+val : val ;
          },
          /*还原参数*/
          restoreDate(isFixiable,dnum){
            this.dayNum=parseInt(dnum)+1;
            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;
                  }
              }
            }
            this.isFixiable=isFixiable;
            this.checkedMonth={
                year:new Date(this.$parent.searchParam.depDate).getFullYear(),
                month:new Date(this.$parent.searchParam.depDate).getMonth() + 1,
            };
          }
        },
        mounted(){
          this.getDateList();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig.styl"
color=#92aaba
bColor=#e0e7ed
backColor=#2894f2
.dateArea{
  width 100%
  padding 15px 18px
  font-size 14px
  box-sizing border-box
  color color
  .d-select{
    position relative
    width 100%
    .d-s{
      width 200px
      height 38px
      line-height 38px
      box-sizing border-box
      border 1px solid border_color
      outline none
      i{
        margin-top -2px
        margin-right 10px
        color #92aaba
      }
    }
    .d-fixiable{
      display inline-block
      position relative
      margin-left 20px
      font-size 14px
      color mainTitleColor
      cursor pointer
      .i-checkbox{
        margin-right 5px
      }
      .i-tip{
        margin-left 5px
        color subolor
        cursor default
      }
      .tool-tip{
        width 200px
        margin-top 8px
        right -15px
        cursor text
        i{
          right 15px
        }
      }
    }
    .d-drop{
      position absolute
      width 200px
      max-height 170px
      overflow-y auto
      background #fff
      border 1px solid border_color
      box-sizing border-box
      z-index 1
      li{
        height 34px
        line-height 34px
        padding-left 12px
        font-size 14px
        color #92aaba
        cursor pointer
        &:hover{
          background #a7c7fb
          color #fff
        }
      }
    }
  }
  .d-title{
    margin-top 20px
    margin-bottom 14px
    color mainTitleColor
  }
  .d-week{
    li{
      display inline-block
      width 60px
      height 34px
      line-height 34px
      text-align center
      border 1px solid bColor
      border-right none
      cursor pointer
      &:last-child{
        border-right 1px solid bColor
      }
      &.active{
        background backColor
        border-color backColor
        color #fff
      }
      &.notAllowed{
        cursor not-allowed
        opacity .5
      }
    }
  }

  .d-month{
    margin-bottom 16px
    padding-bottom 15px
    border-bottom 1px solid #eeeeee
    li{
      display inline-block
      width 100px
      height 34px
      line-height 34px
      margin-right 8px
      text-align center
      border 1px solid bColor
      cursor pointer
      &.active{
        background backColor
        border-color backColor
        color #fff
      }
    }
  }
  .subbtn{
    height 34px
    line-height 34px
  }
}
</style>
