<template>
    <div class="container fixed-wrap filter-wrap">
      <div class="filter-head"><i class="iconfont icon-shanchu" @click="closeFilter"></i><span class="float-r" @click="resetFilter">重置</span></div>
      <div class="filter-content flex-box">
        <div class="filter-left">
          <ul>
            <li @click="filterFun(1)" :class="{active:filterType==1}">人均预算</li>
            <li @click="filterFun(2)" :class="{active:filterType==2}">酒店星级</li>
            <li @click="filterFun(3)" :class="{active:filterType==3}">度假类型</li>
            <li @click="filterFun(4)" :class="{active:filterType==4}">酒店设施</li>
            <!--<li @click="filterFun(5)" :class="{active:filterType==5}">房间类型</li>-->
            <li @click="filterFun(6)" :class="{active:filterType==6}">距离搜索</li>
          </ul>
        </div>
        <div class="filter-right flex">
          <!--人均预算-->
          <div class="f-r-price" v-show="filterType==1">
            <p>价格范围 <br/><span>¥{{MinPrice || 0}} - {{(MaxPrice<8000 && MaxPrice) ? '￥'+MaxPrice : '无限制' }}</span></p>
            <div class="priceArea flex-box">
              <input type="text" value="0" id="priceArea" />
            </div>
            <!--<a href="javascript:void(0)" class='area-btn btn mBtn' @click="subSearchPrice">确定</a>-->
          </div>
          <!--酒店星级-->
          <div class="f-r-category" v-show="filterType==2">
            <ul>
              <li :class="{active:index==starLevel}" @click="chooseStarLevel(s,index)" v-for="(s,index) in stars">{{s.label}}</li>
            </ul>
          </div>
          <!--度假类型-->
          <div class="f-r-type" v-show="filterType==3">
            <ul>
              <li v-for="cate in Categories" @click="chooseCate(cate)" :class="{active:cate.chooseFlag,notAllow:cate.num<=0}">
                <p>{{cate.name}} <span>{{cate.num}}家</span></p>
                <i class="iconfont"></i>
              </li>
            </ul>
          </div>
          <!--酒店设施-->
          <div class="f-r-type" v-show="filterType==4">
            <ul>
              <li v-for="fac in facilities" @click="chooseFac(fac)" :class="{active:fac.chooseFlag,notAllow:fac.num<=0}">
                <p>{{fac.name}}<span>{{fac.num}}家</span></p>
              </li>
            </ul>
          </div>
          <!--房间类型-->
          <div class="f-r-type" v-show="filterType==5">
            <ul>
              <li v-for="r in roomTypes" @click="chooseRoom(r)" :class="{active:r.ischoose}">{{r.label}}</li>
            </ul>
          </div>
          <!--距离搜索-->
          <div class="f-r-area" v-show="filterType==6">
            <div class="input-text flex-box" id="myDiv">
              <i class="iconfont icon-sousuo"></i>
              <input type="text" class="flex" placeholder="地区/热门景点" v-model="areaSearch" v-on:input="searchAreaChange" @click="areaIsDrap=true">
              <div class="searchResult" v-show="areaIsDrap" >
                <ul v-show="areaSearchResult.length>0">
                  <li v-for="r in areaSearchResult" @click="chooseAddr(r)">{{r.areaName}}</li>
                </ul>

                <div class="hotAreaWrap" v-show="!areaSearch || areaSearchResult.length<=0">
                  <p class="p1">热门商圈</p>
                  <div class="hotArea">
                    <div class="city-hotInfo" v-for="city in cityHotArea" v-show="city.area.length>0">
                      <p v-html="city.cityName"></p>
                      <span v-for="area in city.area" @click="chooseAddr(area)">{{area.areaName}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <p class="selectDistance flex-box">距离
              <select class="flex" v-model="slide_tip">
                <option :value="a.val" v-for="a in areaList">{{a.label}}</option>
              </select>
              <i class="iconfont icon-jiantou1"></i>
            </p>
            <!--<div id="distance" class="wxSlider"><i class="slide_css" :style="{width:slide_css}"></i></div>-->
            <a href="javascript:void(0)" class='area-btn btn sBtn' @click="subSearchArea">确定</a>
          </div>
        </div>
      </div>
      <div class="filter-bottom">
        <a href="javascript:void(0)" class="btn" @click="closeFilter">查看{{totalNum}}个套餐</a>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        props:{
          people:'',
        },
        data () {
            return {
              totalNum:0,
              filterType:1, //1人均预算，2酒店星级,3度假类型,4酒店设施,5房间类型,6距离搜索
              slide:{
                currIndex:0,
                maxVal:8000,
                left_tip:0,
                left_css:"0",
                right_tip:'',
                right_css:"33.333%"
              },
              areaList:[{label:'距离选择',val:''},{label:'一公里内',val:'1000'},{label:'两公里内',val:'2000'},{label:'三公里内',val:'3000'},{label:'四公里内',val:'4000'},{label:'五公里内',val:'5000'}],
              stars:[{label:'一星',val:'1.0'},{label:'两星',val:'2.0'},{label:'三星',val:'3.0'},{label:'四星',val:'4.0'},{label:'五星',val:'5.0'}],
              roomTypes:[{label:'大床房',val:'ST04-SI',ischoose:false},{label:'双床房',val:'ST04-DO',ischoose:false},{label:'套房/家庭房',val:'ST04-FA',val2:'ST04-SU',ischoose:false}], //,{label:'多床房',val:'ST04-SH',ischoose:false}
              Categories:[],
              facilities:[{"name":"24小时接待","code":"GT03-24RE","num":0,"chooseFlag":false},
                {"name":"酒吧","code":"GT03-BARR","num":0,"chooseFlag":false},
                {"name":"幼儿保姆服务","code":"GT03-BASE","num":0,"chooseFlag":false},
                {"name":"沙滩","code":"GT03-BEAC","num":0,"chooseFlag":false},
                {"name":"租借自行车","code":"GT03-BIHI","num":0,"chooseFlag":false},
                {"name":"停车位","code":"GT03-CAPA","num":0,"chooseFlag":false},
                {"name":"儿童游乐场","code":"GT03-CHPL","num":0,"chooseFlag":false},
                {"name":"健身","code":"GT03-FITN","num":0,"chooseFlag":false},
                {"name":"泳池","code":"GT03-POOL","num":0,"chooseFlag":false}],
              starLevel:'',
              areaIsDrap:false,
              areaSearch:'',
              areaSearchResult:[],
              choosePoint:'',
              slide_css:'',
              slide_tip:'',
              MinPrice:'',
              MaxPrice:'',
              priceArea:'',
              filterObj:[0,0,0,0,0,0],
              cityHotArea:[],
            }
        },
        methods: {
          /*目的地城市热门区域信息*/
          getCityHotArea(cityList){
            let param=[];
            let obj = {};
            for(var i =0; i<cityList.length; i++){
              if(!obj[cityList[i].geoCode]){
                param.push({
                  geoCode:cityList[i].geoCode,
                  cityName:cityList[i].shortName
                });
                obj[cityList[i].geoCode] = true;
              }
            }
            getHotArea(param).then(data=>{
              if(data.returnCode==200){
                this.cityHotArea=data.data;
              }
            })
          },

          closeFilter(){
            var filterNum=0;
            this.filterObj.forEach(item=>{
              if(item==1){
                filterNum++;
              }
            });
            this.$emit("closeFilter",filterNum);
          },
          /*重置条件*/
          resetFilter(){
            this.filterType=1;
            this.starLevel='';
            this.areaSearch='';
            this.areaIsDrap=false;
            this.MinPrice='';
            this.MaxPrice='';
            this.priceArea.update({
              from: 0,
              to: 8000,
            });
            this.slide_tip='';
            this.clearCategory();
            this.clearfacility();
            this.clearRoomChoose();
            this.areaSearchResult=[];
            this.filterObj=[0,0,0,0,0,0];
            this.$emit("resetFilter");
          },
          /**切换筛选条件*/
          filterFun(type){
              this.filterType=type;
          },
          /**筛选*/
          filterSearch(param){
            this.$emit("filterSearch",param);
          },
          /**人均预算*/
          subSearchPrice(){
            var param={
              type:this.filterType,
              MinPrice:this.MinPrice * this.people + '',
              MaxPrice:this.MaxPrice<8000 ? (this.MaxPrice * this.people) + '' : ''
            };
            if(parseInt(this.MinPrice)==0 && parseInt(this.MaxPrice)==0){
              this.filterObj[this.filterType-1]=0;
            }else {
              this.filterObj[this.filterType-1]=1;
            }
            this.filterSearch(param);
          },
          priceChange(){
            let _this=this;
            $("#priceArea").ionRangeSlider({
              min: 0,
              max: 8000,
              from: 0, //默认从哪个值开始选
              to: 8000, //默认选到哪个值
              type: 'double', //设置类型
              onChange: function (data) {//数据变化时触发

              },
              onFinish:function (data) {
                _this.MinPrice=data.from;
                _this.MaxPrice=data.to;
                _this.subSearchPrice();
              }
            });
            _this.priceArea= $("#priceArea").data("ionRangeSlider");
          },
          /**星级*/
          chooseStarLevel(s,index){
            this.starLevel=index;
            var param={
                type:this.filterType,
                Category:s.val
            }
            if(s.val=='1.0'){
              this.filterObj[this.filterType-1]=0;
            }else {
              this.filterObj[this.filterType-1]=1;
            }
            this.filterSearch(param);
          },

          /**获取度假类型、酒店设施*/
          formatCategories(Facets){
            if(Facets==null||Facets.length<=0){
              return;
            }
            this.Categories.forEach(cate=>{
              Facets.forEach(facet=>{
                if(cate.objectType==facet.fieldValue){
                  cate.num=facet.value;
                  return;
                }
              })
            });

            this.facilities.forEach(facility=>{
              Facets.forEach(facet=>{
                if(facility.code==facet.fieldValue){
                  facility.num=facet.value;
                  return;
                }
              })
            });
          },
          /**选择度假类型*/
          chooseCate(cate){
              if(cate.num>0){
                cate.chooseFlag=!cate.chooseFlag;
                var param={
                  type:this.filterType,
                  code:cate.objectType
                }
                this.filterSearch(param);
                this.filterObj[this.filterType-1]=0;
                this.Categories.forEach(item=>{
                    if(item.chooseFlag){
                      this.filterObj[this.filterType-1]=1;
                    }
                });
              }
          },
          /**选择酒店设施*/
          chooseFac(fac){
            if(fac.num>0) {
              fac.chooseFlag = !fac.chooseFlag;
              var param = {
                type: this.filterType,
                code: fac.code
              }
              this.filterSearch(param);
              this.filterObj[this.filterType - 1] = 0;
              this.facilities.forEach(item => {
                if (item.chooseFlag) {
                  this.filterObj[this.filterType - 1] = 1;
                }
              });
            }
          },
          /**选择房型*/
          chooseRoom(room){
            room.ischoose=!room.ischoose;
            var roomL=[];
            this.filterObj[this.filterType-1]=0;
            this.roomTypes.forEach(item=>{
              if(item.ischoose){
                if(item.label=='套房/家庭房'){
                  roomL.push(item.val2);
                }
                roomL.push(item.val);
                this.filterObj[this.filterType-1]=1;
              }
            });
            var param={
              type:this.filterType,
              CodeList:roomL
            }
            this.filterSearch(param);
          },
          /**距离搜索*/
          subSearchArea(){
            var lng='',lat='';
            if(this.areaSearch && this.choosePoint){
              lng=this.choosePoint.lng;
              lat=this.choosePoint.lat;
            }else {
              this.choosePoint={};
              lng='';
              lat='';
            }
            var param={
              type:this.filterType,
              lng:lng+'',
              lat:lat+'',
              Radius:this.slide_tip+""
            };
            this.filterSearch(param);
            this.filterObj[this.filterType-1]=1;
          },
          /**检索周边*/
          searchAreaChange(){
            this.$emit("searchAreaChange",this.areaSearch);
          },
          chooseAddr(r){
            this.areaSearch=r.areaName;
            this.areaIsDrap=false;
            this.choosePoint={
              lng:r.lng,
              lat:r.lat,
            };
          },
          /**距离*/
          getDistance(){
            var _this=this;
            $( "#distance" ).slider({
              value:0,
              min: 0,
              max: 5,
              step:1,
              slide: function( event, ui ) {
                _this.slide_tip=ui.value;
                _this.slide_css=100/5*ui.value+'%';
              }
            });
          },
          /*清除度假类型*/
          clearCategory(){
            this.Categories.forEach(cate=>{
              cate.chooseFlag=false;
            });
          },
          /*清除酒店设施*/
          clearfacility(){
            this.facilities.forEach(cate=>{
              cate.chooseFlag=false;
            });
          },
          /*清除选中房型*/
          clearRoomChoose(){
            this.roomTypes.forEach(item=>{
              item.ischoose=false;
            })
          },
          divPropagation(){
            let _this=this;
            window.onload=function(){
              var myDiv = document.getElementById("myDiv");
              document.addEventListener("click",function(){
                _this.areaIsDrap=false;
              });
              myDiv.addEventListener("click",function(event){
                event=event||window.event;
                event.stopPropagation();
              });
            };
          }

        },
        mounted(){
          this.priceChange();
          this.divPropagation();
        },
    }
</script>

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

.filter-wrap{
  left 100%
  transition all 1s
  &.filterAll{
    animation fwidth .2s ease-in-out
    left 0
  }
  .filter-head{
    width 100%
    height 50px
    line-height 50px
    padding 0 20px
    box-sizing border-box
    border-bottom 1px solid border_color
    font-size 16px
    color mainTitleColor
  }
  .filter-content{
    position relative
    width 100%
    height calc(100% - 50px - 55px)
  }
  .filter-left{
    width 100px
    height 100%
    background #fafafa
    ul{
      li{
        position relative
        width 100%
        height 50px
        line-height 50px
        padding-left 20px
        box-sizing border-box
        font-size 14px
        color mainTitleColor
        &.active{
          position relative
          font-weight bold
          background #fff
          color mainColor
          &:before{
            content ''
            position absolute
            top 23px
            left 12px
            width 4px
            height 4px
            border-radius 4px
            background mainColor
          }
        }
      }
    }
  }
  .filter-right{
    position relative
    height 100%
    padding 0 20px
    overflow-y auto
    -webkit-overflow-scrolling touch
    #priceSlider{
      margin-top 45px
    }
    #distance{
      margin-top 45px
      .slide_css{
        position absolute
        width 0
        height 4px
        background subColor
        left 0px
        top 0
      }
    }
    .area-btn{
      display block
      width 100%
      height 36px
      line-height 36px
      margin 60px auto 0
    }
    .f-r-price,.f-r-area{
      margin-top 20px
      .priceArea{
        margin-top 20px
        line-height 30px
        span{
          margin 0 5px
        }
        input{
          display inline-block
          width 36%
          height 30px
          font-size 13px
          border 1px solid border_color
          padding-left 10px
        }
      }
      .selectDistance{
        position relative
        line-height 42px
        select{
          width 190px
          height 42px
          margin-left 10px
          padding-left .8rem
          border-color border_color
          box-sizing border-box
          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 2px
          color subColor
        }
      }
    }
    p{
      line-height 22px
      font-size 14px
      color mainTitleColor
      span{
        color mainColor
      }
    }
    ul{
      li{
        position relative
        height 50px
        line-height 50px
        overflow hidden
        font-size 13px
        p{
          line-height 16px
          padding-top 18px
          span{
            display block
            font-size 11px
            color subheadColor
          }
        }
        &.notAllow{
          opacity .5
          cursor not-allowed
        }
        &.active{
          p{
            color mainColor
          }
          &:after{
            content ''
            position absolute
            width 16px
            height 12px
            top 15px
            right 0
            background url("https://file.luckytrip.cn/IBE/img/gou.png") no-repeat center
            background-size cover
          }
        }
      }
    }
    .input-text{
      position relative
      width 100%
      height 40px
      line-height 40px
      border 1px solid border_color
      margin-bottom 15px
      i{
        margin 0 9px
      }
      input{
        height 100%
        font-size 14px
      }
    }
  }

  .filter-bottom{
    position absolute
    width 100%
    bottom 6px
    text-align center
    a{
      display inline-block
      width 90%
      height 45px
    }
  }
}
.f-r-area .searchResult{
  position absolute
  width 100%
  max-height 50vh
  top 40px
  padding-left 10px
  box-sizing border-box
  border 1px solid border_color
  border-top none
  background #ffffff
  overflow-y auto
  z-index 1000
  ul li {
    height 40px
    line-height 40px

  }
  .hotAreaWrap{
    padding 8px
    font-size 12px
    line-height 20px
    .p1{
      font-size 13px
      color subheadColor
    }
    .city-hotInfo{
      p{
        line-height 30px
        font-weight bold
      }
      span{
        display inline-block
        line-height 22px
        padding 0 6px
        margin-right 8px
        cursor pointer
        &:hover{
          background subColor
          color #ffffff
        }
      }
    }
  }
}
@keyframes fwidth{
  0%{
    left 100%
  }
  100%{
    left 0%
  }
}
</style>
