<template>
  <div class="container whitebg" :class="{scrollHidden:popupVisible}">
    <div class="head_wrap">
      <div class="top_head search_wrap" v-show="!isdrap">
        <div class="input_wrap flex-box">
          <div class="text_input flex" @click="openCondition"><i class="iconfont icon-sousuo"></i>试试哪便宜去哪</div>
        </div>
      </div>
      <!--搜索条件 start-->
      <transition name="fade">
        <div class="head_drap bgColor" v-show="isdrap">
          <div class="location flex-box">
            <div class="info_wrap" style="margin-right: 5px">
              <label for="">出发地</label>
              <select class="flex" @change="chooseDepart" v-model="departInfo">
                <option :value="d" v-for="d in departList">{{d.shortName}}</option>
              </select>
            </div>

            <div class="info_wrap" @click="filterSearch(0)">
              <label for="">目的地</label>
              <p>{{destinationInfo.destination || (goType ==0 ? '哪便宜去哪' : '请输入目的地')}}</p>
            </div>
            <!--<span class="float-r" @click="resetSearchInfo">重置</span>-->
          </div>

          <div class="info_wrap" @click="filterSearch(1)">
            <label for="">出行时间</label>
            <p v-show="dateType==0" :class="{color:!dateOfDeparture}">{{dateOfDeparture || '请选择出行日期'}}</p>
            <p v-show="dateType==1" :class="{color:!dateParams.checkedMonth}"><span v-show="isFixiable=='false'">{{(dateParams.checkedMonth + '月,' + dateParams.minduration +'天')|| '请选择出行日期'}}</span><span v-show="isFixiable=='true'">{{(dateParams.checkedMonth + '月,' + (( dateParams.minduration==2 ? '' : dateParams.minduration-1+'天、')+dateParams.minduration+'天、'+(dateParams.minduration+1)+'天'))|| '请选择出行日期'}}</span></p>
          </div>
          <div class="info_wrap" @click="filterSearch(2)">
            <label for="">出行人数</label>
            <p>{{peopleObj.adults}}成人，{{peopleObj.childNum}}儿童</p>
          </div>
          <div class="info_btn mColor" @click="search">确定</div>
          <div class="arrow_up" @click="isdrap=false"><i class="iconfont icon-arrow-up"></i></div>
        </div>
      </transition>
      <!--搜索条件 end-->
    </div>
    <div class="content">
      <p class="h_title">精品推荐</p>
      <div class="item-box recommend-box">
        <ul class="box-list-wrap">
          <recommendProduct v-for="(p,pindex) in recommendList" :key="pindex" :p="p" :depart="departInfo.shortName" :adultNum="recommendAdultNum" @toDetail="toDetail($event,1)">
               <span slot="tipSlot">
                  <span class="h_tip h_package">机+酒</span>
                  <span class="h_tip h_weekend">周末游</span>
               </span>
          </recommendProduct>
        </ul>
      </div>
    </div>

    <div class="content">
      <p class="h_title">今日特价
        <select class="hide" @change="chooseDepart" v-model="departInfo">
          <option :value="d.val" v-for="d in departList">{{d.name}}</option>
        </select>
      </p>
      <div class="item-box">
        <ul class="box-list-wrap">
          <recommendProduct v-for="(p,pindex) in lowPriceList" :key="pindex" :p="p" :depart="departInfo.shortName" :adultNum="todayAdultNum" @toDetail="toDetail($event,2)" v-show="pindex<maxShowNum">
              <span slot="tipSlot">
                  <span class="h_tip h_package">机+酒</span>
              </span>
          </recommendProduct>
        </ul>
      </div>
      <a href="javascript:void(0)" class="showAllProduct mborderBtn" v-show="lowPriceList.length>0 && maxShowNum==4" @click="maxShowNum=100">显示全部</a>
    </div>

    <div class="bottom-nav-bar border-top border-bottom">
      <div class="b-navBar-wrap flex-box">
        <div class="b-navBar-item flex">
          <h4 class="sColor">超值低价</h4>
          <p>机酒套餐比单买最高立省30%</p>
        </div>
        <div class="b-navBar-item flex">
          <h4 class="sColor">品质酒店</h4>
          <p>精心挑选，出游不用再费心找酒店；</p>
        </div>
        <div class="b-navBar-item flex">
          <h4 class="sColor">快速预订</h4>
          <p>机票酒店自由搭配，一键预订；</p>
        </div>
      </div>
    </div>
    <!--弹出框-->
    <mt-popup
      v-model="popupVisible"
      position="right">
      <div class="popupDiv">
        <!--搜索-->
        <searchBar  v-show="popupIndex==0" @cancelSearch="closePopup" :destCityParam="destCityParam" :hotCity="hotCity" :airProductType="airProductType" @chooseDestination="chooseDestination($event)"></searchBar>
        <!--日期-->
        <dateSet ref="dateSet" v-show="popupIndex==1" @closeDateFun="closePopup" :dType="dateType" @submitDate="submitDate($event)"></dateSet>
        <!--设置人数-->
        <peopleSet ref="peopleSet" v-show="popupIndex==2" :peopleObj="peopleObj" @setPeopleNum="setPeopleNum($event)"></peopleSet>
      </div>
    </mt-popup>
    <bottomBar activePage="home"></bottomBar>
  </div>
</template>
<script>
  import searchBar from './search.vue'
  import dateSet from './dateSet.vue'
  import peopleSet from './peopleSet'
  import recommendProduct from './recommendProduct.vue'
  export default {
    name: '',
    data () {
      return {
        goType:-1,
        scrollTop:0,
        popupVisible:false,
        popupIndex:0, // -1 关闭，0目的地,1出行时间,2航班时间
        dateType:0,//0固定，1灵活
        isFixiable:'false',
        bottomPop:0, //0出发城市筛选,1排序筛选
        isdrap:true,
        destinationInfo:{
          destination:'',
          arrCode:'',
        },
        dateOfDeparture:'', //出行日期
        departList:[],
        departInfo:{},
        dateParams:'',
        peopleObj:{ //出行人数设置
          adults:2,
          childNum:0,
          children:[10,10,10]
        },
        hotCity:{
          inlandCity:[],
          interCity:[]
        },
        airProductType:'', //显示国内或者国际
        lowPriceList:[],
        params:'',
        timer:'',
        selectArrCityGeoId:'',
        recommendCitys:[],
        recommendList:[],
        maxShowNum:4,
        destCityParam:'',
        recommendAdultNum:2,
        todayAdultNum:2,
      }
    },
    methods: {
      /**
       * 选择筛选条件
       * */
      openCondition(){
        this.isdrap = true;
        document.documentElement.scrollTop = 0;
        this.scrollTop = 0;
      },
      /**
       * 搜索条件  0目的地 ，1出行时间 ，2出行人数 ，3筛选条件
       *  */
      filterSearch(index){
        this.popupVisible = true ;
        this.popupIndex = index ;
      },
      /**
       * 选择出发地
       * */
      chooseDepart(){
        this.destinationInfo.destination='';
        this.destinationInfo.arrCode='';
        this.getHotDestCity();
        this.getPageTodayLowest();
        this.getRecommendProduct();
      },
      /**选择目的地*/
      chooseDestination(d){
        this.popupVisible = false;
        if(d==0){
          this.goType = 0;
          this.destinationInfo.destination = '';
          this.destinationInfo.arrCode='';
          this.destinationInfo.geoCode='';
        }else {
          this.destinationInfo.destination = d.shortName;
          this.destinationInfo.arrCode = d.threeCode;
          this.destinationInfo.geoCode=d.geoCode;
          this.goType = 1;
        }
      },
      /**关闭popup弹窗*/
      closePopup(){
        this.popupVisible = false ;
      },
      /**选择日期*/
      submitDate(dateParams){
        this.dateParams = dateParams ;
        this.dateType=this.dateParams.dateType;
        this.popupVisible = false ;
        // 0固定，1灵活
        if(this.dateType==0){
          this.dateOfDeparture = getMonthDay(dateParams.depDate)+"-"+getMonthDay(dateParams.returnDate) +' ('+dateParams.minduration+'天)' ;
        }else {
          this.isFixiable=dateParams.isFixiable;
        }
      },
      /**出行人数---------设置*/
      setPeopleNum(obj){
        this.peopleObj = obj ;
        this.popupVisible = false ;
      },
      /**重置*/
      resetSearchInfo(){
        this.goType = 0 ;
        this.departInfo=this.departList[0];
        this.destinationInfo={
          destination:'',
          arrCode:'',
        };
        this.dateOfDeparture = '';
        this.dateParams = {} ;
        this.isFixiable='false';
        this.dateType=0;
        this.peopleObj={
          adults:2,
          childNum:0,
          children:[10,10,10]
        };
        this.getHotDestCity();
        this.getPageTodayLowest();
        this.getRecommendProduct();

      },
      /**
       * 搜索查询
       * */
      search(){
        if(!this.departInfo){
          Toast('请选择出发地') ;
          return false ;
        }
        if(!this.dateParams){
          Toast('请选择出行时间') ;
          return false ;
        }
        var arr=[];
        for (var i =0; i<this.peopleObj.childNum;i++){
          arr.push(this.peopleObj.children[i]);
        }
        let params={
          depCode:this.departInfo.threeCode,
          arrCode:this.destinationInfo.arrCode,
          dateType:this.dateType, //0固定，1灵活
          isFixiable:this.isFixiable,
          depDate:this.dateParams.depDate,
          returnDate:this.dateParams.returnDate,
          minduration:(this.dateParams.minduration-1),
          adults:this.peopleObj.adults,
          childages:arr.join(",")
        };
        this.$router.push({path: '/wx/productList?'+ urlEncode(params).substr(1)});
        this.$router.go(0);
      },
      /**出发地--------列表*/
      getDepCity(){
        var param={
          "page":1,
          "size":100,
          "param":{
            "type":0,  //0出发地，1目的地
            "isHot":'', //0非热门，1热门
            "state":1
          }
        };
        getInterCitys(param).then(data=>{
          if(data.returnCode == '200'){
            formartList(this.departList,data.data.map.international_0);
            this.departList.sort(sortUp("sort"));
            if(this.departList.length>0){
              if(this.params.depCode){
                this.departList.forEach(item=>{
                  if(this.params.depCode==item.threeCode || this.params.depCode.indexOf(item.threeCode)>-1){
                    this.departInfo=item;
                  }
                });
              }else {
                this.departInfo=this.departList[0];
              }
              this.getHotDestCity();
            }
            this.getPageTodayLowest();
            this.getRecommendProduct();
          }
        });
      },
      /**热门目的地-------列表*/
      getHotDestCity(){
        this.hotCity={
          inlandCity:[],
          interCity:[]
        };
        var param={
          "page":1,
          "size":100,
          "param":{
            "type":1,  //0出发地，1目的地
            "isHot":'',
            "state":1,
            depCode:this.departInfo.threeCode,
            shortName:''
          }
        };
        this.destCityParam = param;
        getInterCitys(param).then(data=>{
          if(data.returnCode == '200'){
            this.airProductType=data.data.productType;
            formartList(this.hotCity.inlandCity,data.data.map.international_0);
            formartList(this.hotCity.interCity,data.data.map.international_1);
          }
        });
      },
      /**首页今日特价*/
      getPageTodayLowest(){
        let param={
          "page":1,
          "size":18,
          "param":{
            "depCode":this.departInfo.threeCode
          }
        };
        getPageTodayLowest(param).then(res=>{
          if(res.returnCode==200) {
            var data=res.data.searchList;
            if(data.length>2){
              let maxNum=Math.floor(data.length/2)*2;
              this.lowPriceList=data.slice(0,maxNum);
            }else {
              this.lowPriceList=data;
            }
            this.todayAdultNum=res.data.people.length;

          }else {
            this.lowPriceList=[];
          }
        })
      },

      /**精品推荐*/
      getRecommendProduct(){
        let param={
          "page":1,
          "size":18,
          "param":{
            "depCode":this.departInfo.threeCode
          }
        };
        packageRecommend(param).then(data=>{
          if(data.returnCode==200){
            if(data.data.searchList.length>3){
              let maxNum=Math.floor(data.data.searchList.length/3)*3;
              this.recommendList=data.data.searchList.slice(0,maxNum);
            }else {
              this.recommendList=data.data.searchList;
            }
            this.recommendAdultNum=data.data.people.length;
          }else {
            this.recommendList=[];
          }
        })
      },
      /*附近景点*/
      getNearByInfo(p){
        let nearByList=[];
        if(!p) return nearByList;
        for (var i=0;i<p.length;i++){
          if(p[i].name=='景点'){
            nearByList=p[i].value;
          }
        }
        return nearByList;
      },

      /**跳转产品详情*/
      toDetail(h,type){
        let adultNum=2;
        type==1 ? adultNum=this.recommendAdultNum : adultNum=this.todayAdultNum;
        let productParam={
          hotelId:h.hotel.hotelId,
          ProductCode:h.productCode,
          BookingCodeList:h.hotel.rooms[0].bookingCode,
          roomKeys:h.hotel.rooms[0].roomKey,
          boardKeys:h.hotel.rooms[0].board.boardKey,
          depCode:h.outFlight.depCode,
          arrCode:h.outFlight.arrCode,
          depDate:getdate(h.outFlight.depTime),
          returnDate:getdate(h.inFlight.depTime),
          minduration:h.duration,
          adults:adultNum,
        };
        window.open("/wx/productDetail/"+urlEncode(productParam).substr(1));
      },

      /**处理地址栏参数*/
      dealUrlParams(){
        this.params=urlParse();
        if(Object.keys(this.params).length>0){
          if(!this.params.depDate && !this.params.returnDate)return;
          this.isFixiable=this.params.isFixiable || '';
          this.dateType=parseInt(this.params.dateType);
          this.destinationInfo.destination=this.params.arrCity || '';
          this.destinationInfo.arrCode=this.params.arrCode ;
          this.dateParams={
            dateType:parseInt(this.params.dateType),
            depDate:this.params.depDate,
            returnDate:this.params.returnDate,
            chooseNum:parseInt(this.params.minduration)+1,
            minduration:parseInt(this.params.minduration)+1,
            DepartureDayOfWeekBitMask:'',
            containWeek:"false"
          };
          // 0固定，1灵活
          if(this.dateType==0){
            this.dateOfDeparture = getMonthDay(this.params.depDate)+"-"+getMonthDay(this.params.returnDate) +' ('+(parseInt(this.params.minduration)+1)+'天)' ;
          }else {
            this.isFixiable=this.params.isFixiable;
            this.dateParams.checkedMonth=new Date(this.params.depDate).getMonth()+1;
          }
          this.peopleObj.adults=this.params.adults;

          if(this.params.childages){
            this.peopleObj.children=this.params.childages.split(",");
            this.peopleObj.childNum=this.params.childages.split(",").length;
          }else {
            this.peopleObj.childNum=0 ;
            this.peopleObj.children=[10,10,10]
          }
          this.$refs.peopleSet.resetPeople(this.peopleObj.adults,this.peopleObj.childNum,this.peopleObj.children);
        }

      }
    },
    components:{
      dateSet,
      searchBar,
      peopleSet,
      recommendProduct
    },
    mounted() {
      this.dealUrlParams();
      this.getDepCity();
//          this.timer=setInterval(this.getPageTodayLowest,1000*60*2);
      var _this=this;
      window.onscroll = function () {
        _this.scrollTop= document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if(_this.scrollTop>40 && _this.isdrap){
//              _this.isdrap=false;
        }
      }
    },
    created(){},
  }
</script>

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

  image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
  .fade-enter{
    opacity .4
  }
  .fade-enter-active{
    transition:all .3s;
  }
  .fade-leave-active{
    transition:transform .1s;
  }
  .fade-leave-to{
    opacity .1
  }
  .mint-popup,.mint-popup-right{
    position fixed
    width 100%
    height 100%
  }
  .mint-popup-bottom{
    height auto!important
  }
</style>
