<template>
  <div class="container">
      <div class="m-body">
        <section class="head">
          <div class="flex-box">
            <i class="iconfont icon-zuojiantou icon-zuojiantou f-l" @click="closeModal"></i>
            <p class="flex text-c">{{flightNum}}个替代航班 <span class="float-r" @click="popupVisible=true">筛选</span></p>
          </div>
        </section>
        <div class="flight-box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="2">
          <div class="flight-cell" v-for="flight in oterFlights">
            <div class="cell-item dep">
              <p class="t"><span class="">去程</span><img :src="flight.outFlight.airlineLogo" alt="">{{flight.outFlight.airlineName}}{{flight.outFlight.flightNo}} | {{flight.depTime | getMonthDate}}（{{flight.depTime | getWeek}}）</p>
              <div class="f-box flex-box">
                <div class="o_dateTime flex">
                  <h4>{{flight.outFlight.depTime | formatTime}}</h4>
                  <p class="pSize">{{flight.outFlight.depAirportName + (flight.depTg || '')}}</p>
                </div>
                <div class="h_connect">
                  <span class="l_text">{{flight.depTermTime}}</span>
                  <p class="h_line"></p>
                </div>
                <div class="o_dateTime flex text-r">
                  <h4>{{flight.outFlight.arrTime | formatTime}}<span style="font-size: 13px;color: #2894f2" v-show="flight.depTermDay>1">+{{flight.depTermDay-1}}天</span></h4>
                  <p class="pSize">{{flight.outFlight.arrAirportName + (flight.depArrTg || '')}}</p>
                </div>
              </div>
            </div>
            <div class="cell-item back">
              <p class="t"><span class="">返程</span><img :src="flight.inFlight.airlineLogo" alt="">{{flight.inFlight.airlineName}}{{flight.inFlight.flightNo}} | {{flight.returnTime | getMonthDate}}（{{flight.returnTime | getWeek}}）</p>
              <div class="f-box flex-box">
                <div class="o_dateTime flex">
                  <h4>{{flight.inFlight.depTime | formatTime}}</h4>
                  <p class="pSize">{{flight.inFlight.depAirportName + (flight.depTg || '')}}</p>
                </div>
                <div class="h_connect">
                  <span class="l_text">{{flight.backTermTime}}</span>
                  <p class="h_line"></p>
                </div>
                <div class="o_dateTime flex text-r">
                  <h4>{{flight.inFlight.arrTime | formatTime}}<span style="font-size: 13px;color: #2894f2" v-show="flight.backTermDay>1">+{{flight.backTermDay-1}}天</span></h4>
                  <p class="pSize">{{flight.inFlight.arrAirportName + (flight.depArrTg || '')}}</p>
                </div>
              </div>
            </div>
            <div class="btn-item flex-box">
              <p class="flex" :class="{green:flight.priceChange<0}">{{flight.priceChange>=0 ? ('+ ￥' + flight.priceChange)  : ('- ￥' + Math.abs(flight.priceChange))}}</p>
              <!--hasChange-->
              <a href="javascript:void(0)" class="btn changeBtn" @click="changeFlight(flight)" :class="{hasChange:flight.isChoose}">{{flight.isChoose ? '已选择' : '选择'}}</a>
            </div>
          </div>

          <div class="f-loading" v-show="isLoading">
            <i class="iconfont icon-loading"></i>加载中...
          </div>
          <div class="f-nodata" v-show="isLast && !isLoading">
            没有更多航班了
          </div>
          <div class="f-nodata" v-show="parseInt(flightNum)<=0 && !isLoading">
            没有搜索到这个时间段的航班哦！
          </div>

        </div>
    </div>
    <mt-popup
      v-model="popupVisible"
      position="bottom" style="height: 310px">
      <div class="m-bar">
        <div class="b-slide">
          <p>去程出发时间</p>
          <label>{{leftNum1}} 点-{{rightNum1}} 点</label>
          <input type="text" value="0" id="range_1" />
        </div>
        <div class="b-slide">
          <p>返程出发时间</p>
          <label>{{leftNum2}} 点-{{rightNum2}} 点</label>
          <input type="text" value="0" id="range_2" />
        </div>

        <a href="javascript:void(0)" class="btn" @click="changeFlightTime">确定</a>

      </div>
    </mt-popup>
  </div>
</template>
<script>
  import modal from '../../components/common/modal.vue'

  export default {
    name: '',
    data () {
      return {
        isLoading:false,
        isLast:false,
        oterFlights:[],
        flightNum:'',
        isStop:'',
        leftNum1:'0',
        rightNum1:'24',
        leftNum2:'0',
        rightNum2:'24',
        isChange:false,
        range1:'',
        range2:'',
        popupVisible:false,
        flightParam:{
          page:'1',
          size:10,
          param:{
            stopOver:'0',
            depMaxTime:"",
            depMinTime:"",
            returnMaxTime:"",
            returnMinTime:"",
          }
        },
        cachOutFlightId:'',
        cachInFlightId:'',
        cookieVals:{
          leftNum1:'0',
          rightNum1:'24',
          leftNum2:'0',
          rightNum2:'24'
        }
      }
    },
    methods: {
      /**获取更多航班*/
      showMoreFlight(){
        this.isLoading=true;
        loadMoreFlights(this.flightParam).then(data=>{
          this.isLoading = false;
          if(data.returnCode==200){
            this.flightNum=data.data.total;
            if(data.data.total>0){
              data.data.list.forEach(fInfo=>{
//                Object.assign(fInfo,this.initBackResults(fInfo));
//                fInfo.priceChange=Math.ceil(parseFloat(fInfo.price.amount)-parseFloat(this.productDetail.price.amount));
                fInfo.isChoose=false;
                if(fInfo.inFlight.flightId==this.cachInFlightId && fInfo.outFlight.flightId==this.cachOutFlightId){
                  fInfo.isChoose=true;
                }
                this.oterFlights.push(fInfo);
              });
              if(parseInt(data.data.page) >= Math.ceil(parseInt(data.data.total) / parseInt(data.data.size)) ){
                this.isLast=true;
              }
            }else {
              this.isLast=true;
            }
          }else if(data.returnCode==202) {
            this.flightNum=0;
          }else {
            Toast(data.returnMsg);
          }
        });
      },
      /**选择其他航班*/
      changeOtherFlight(f){
        this.showFlightModal=false;
        this.detailParam.outFlightId=f.outFlight.flightId;
        this.detailParam.inFlightId=f.inFlight.flightId;
        this.flightParam.page='1';
        this.$nextTick(function () {
          this.packageDetail();
        });
      },

      /**关闭模态框*/
      closeModal(){
        this.isLoading=false;
        this.isLast=false;
        this.range1.update({//
          from: 0,
          to: 24,
        });
        this.range2.update({
          from: 0,
          to: 24,
        });
        this.leftNum1=0;
        this.rightNum1=24;
        this.leftNum2=0;
        this.rightNum2=24;
        this.$parent.flightParam.param.depMinTime='';
        this.$parent.flightParam.param.depMaxTime='';
        this.$parent.flightParam.param.returnMinTime='';
        this.$parent.flightParam.param.returnMaxTime='';

        this.$emit("close");
      },
      changeFlight(f){
        if(!f.isChoose){
          this.$emit("changeOtherFlight",f);
        }
      },
      loadMore(){
        if(this.$parent.showFlightModal && !this.isLast && !this.isLoading){
          this.$parent.flightParam.page++;
          this.$parent.showMoreFlight();
        }
      },
      /*直飞*/
      isStopOver(){
        this.isStop = this.isStop=="0" ? "" : "0";
        this.$parent.flightParam.param.stopOver = this.isStop ;
        this.$parent.showMoreFlight();
      },

      closePopup(){
        this.leftNum1=this.cookieVals.leftNum1;
        this.rightNum1=this.cookieVals.rightNum1;
        this.leftNum2=this.cookieVals.leftNum2;
        this.rightNum2=this.cookieVals.rightNum2;
        this.range1.update({
          from: this.leftNum1,
          to: this.rightNum1,
        });
        this.range2.update({
          from: this.leftNum2,
          to: this.rightNum2,
        });
        this.popupVisible=false;
      },

      changeFlightTime(){
        let _this=this;
        _this.cookieVals={
          leftNum1:_this.leftNum1,
          rightNum1:_this.rightNum1,
          leftNum2:_this.leftNum2,
          rightNum2:_this.rightNum2
        }
        _this.flightParam.param.depMinTime=spaceNum(_this.leftNum1) + ':00:00';
        _this.flightParam.param.depMaxTime=spaceNum(_this.rightNum1) + ':00:00';
        _this.flightParam.param.returnMinTime=spaceNum(_this.leftNum2) + ':00:00';
        _this.flightParam.param.returnMaxTime=spaceNum(_this.rightNum2) + ':00:00';
        _this.flightParam.param.ShowingResultsFrom="0";
        _this.isLast=false;
        _this.oterFlights=[];
        _this.isLoading=true;
        _this.popupVisible=false;
        _this.showMoreFlight();
      },
      /**处理地址栏参数*/
      dealUrlParams(){
        this.params=urlParse("?"+this.$route.params.productParams);
        if(Object.keys(this.params).length>0){
          let peoList=[];
          if(this.params.child){
            peoList=getPeopleList(this.params.adult,this.params.child.split(","));
          }else {
            peoList=getPeopleList(this.params.adult,this.params.child);
          }
          this.cachOutFlightId=this.params.outFlightId;
          this.cachInFlightId=this.params.inFlightId;
          let detailParam={
            pDetailKey:'',
            hotelId:this.params.hotelId,
            depCode:this.params.depCode,
            arrCode:this.params.arrCode,
            depTime:this.params.depDate,
            returnTime:this.params.returnDate,
            minduration:this.params.minduration,
            maxduration:'',
            productCode:this.params.ProductCode,
            bookingCode:this.params.BookingCodeList,
            outFlightId:'',
            inFlightId:'',
            people:peoList
          };
          Object.assign(this.flightParam.param,detailParam);
          this.showMoreFlight();

        }

      },
    },
    components:{
      modal,
    },
    watch:{
      popupVisible:function (newval, oldVal) {
        if(!newval){
          this.closePopup();
        }
      }
    },
    mounted(){
      this.dealUrlParams();
      let _this=this;
      $("#range_1").ionRangeSlider({
        min: 0,
        max: 24,
        from: 0, //默认从哪个值开始选
        to: 24, //默认选到哪个值
        type: 'double', //设置类型
        onChange: function (data) {//数据变化时触发
          _this.leftNum1=data.from;
          _this.rightNum1=data.to;
        },
      });
      _this.range1= $("#range_1").data("ionRangeSlider");
      $("#range_2").ionRangeSlider({
        min: 0,
        max: 24,
        from: 0, //默认从哪个值开始选
        to: 24, //默认选到哪个值
        type: 'double', //设置类型
        onChange: function (data) {//数据变化时触发
          _this.leftNum2=data.from;
          _this.rightNum2=data.to;
        },
      });
      _this.range2= $("#range_2").data("ionRangeSlider");

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

  .m-body{
    /*height 100%
    overflow hidden*/
    background #f8f8f8
    .head{
      height 50px
      line-height 50px
      text-align center
      background #f3f3f3
      font-size 16px
      color color
      i{
        position absolute
        left 20px
        font-size 18px
        cursor pointer
      }
      span{
        position absolute
        right 20px
        color #26a2ff
      }
    }


    .flight-box{
      position absolute
      width 100%
      height calc(100% - 50px)
      padding 16px
      box-sizing border-box
      font-size 14px
      color color
      overflow-y auto
      -webkit-overflow-scrolling touch
      .f-title{
        display inline-block
        width 100%
        span{
          float left
          padding-bottom 25px
          box-sizing border-box
        }
      }
      .flight-cell{
        display inline-block
        width 100%
        margin-bottom 20px
        background #fff
        box-shadow 0 0 16px #f1f1f1
        border-radius 5px
        .cell-item{
          width 100%
          /*height 140px*/
          padding 12px
          box-sizing border-box
          &.dep{
            border-bottom 1px dashed #dfdede
          }
          .t{
            img{
              position relative
              display inline-block
              width 16px
              height 16px
              top 2px
              margin-right 5px
            }
            span{
              display inline-block
              width 40px
              height 20px
              line-height 20px
              margin-right 7px
              text-align center
              background #bfbfbf
              border-radius 10px
              font-size 11px
              color #ffffff
            }
          }
          .f-box{
            border none
            margin-top 16px
            margin-bottom 0
            padding-bottom 0
          }
          .o_dateTime{
            min-width 90px
            font-size 11px
            color #999999
            h4{
              margin-bottom 5px
              font-size 21px
              font-weight bold
              color #2f302f
            }
          }
          .h_connect{
            margin 10px 5px 0
          }
        }
        .btn-item{
          padding 8px 20px
          border-top 1px solid #e5e5e5
          p{
            line-height 30px
            font-size 20px
            color #fe7065
            &.green{
              color #32a923
            }
          }
          .btn{
            width 100px
            height 30px
            line-height 30px
            border-radius 2px
            text-align center
            background: IEbg
            background bg
            &.hasChange{
              background #b5b5b5
            }
          }
        }
      }
    }
    .f-loading,.f-nodata{
      width 100%
      line-height 25px
      text-align center
      font-size 14px
      i{
        position relative
        top 3px
        margin-right 6px
        font-size 24px
      }
    }
    .f-nodata{
      color #aaaaaa
    }
  }
  .m-bar{
    padding  20px 30px 0
    background #fff
    font-size 14px
    .b-transit{
      display inline-block
      width 100%
      cursor pointer
      .icon-checked{
        color #fe7065
        &:before{
          content '\e674'
        }
      }
    }
    .b-slide{
      display inline-block
      width 100%
      margin-bottom 20px
      .slider{
        margin 18px 0 12px
      }
    }
    p{
      margin-bottom 10px
      font-size 15px
      color #383838
    }
    label{
      display block
      margin-bottom 15px
      color #383838
      i{
        margin-right 5px
      }
    }
    a.btn{
      width 100%
      margin-top 20px
    }

  }
</style>
