<template>
  <div class="filterSlide-inner">
    <div class="slide-cell">
      <div class="s-title">人均预算<span>¥{{MinPrice}} - {{MaxPrice<8000 ? '￥'+ MaxPrice  : '无限制'}}</span></div>
      <div id="slider" class="slider">
        <input type="text" value="0" id="priceArea" />
      </div>
    </div>
    <div class="slide-cell">
      <div class="s-title">酒店星级<span v-if="starLevel>0">{{stars[starLevel-1].text}}</span></div>
      <div class="s-star">
        <i class="iconfont icon-xingxing star" v-for="(i,star) in 5" :class="{active:i<=starLevel}" @click="chooseStarLevel(i)"></i>
      </div>
    </div>
    <div class="slide-cell hide">
      <div class="s-title">评分<span>{{(grade-1)*2}}分+</span></div>
      <div class="s-star">
        <i class="iconfont icon-quanzi star" v-for="(i,star) in 5" :class="{active:i<=grade}"  @click="grade=i"></i>
      </div>
    </div>
    <div class="slide-cell">
      <div class="s-title">热门区域位置<a @click="clearArea">清空</a></div>
      <div class="s-search" id="myDiv">
        <i class="iconfont icon-sousuo i-search"></i>
        <input type="text" v-model="areaSearch" v-on:input="searchAreaChange" @click="areaIsDrap=true" placeholder="地区/热门景点">
        <div class="searchResult" v-if="areaIsDrap">
          <ul v-if="areaSearchResult.length>0" >
            <li v-for="r in areaSearchResult" @click="chooseAddr(r)"><i class="iconfont icon-coordinates_fill"></i>{{r.areaName}}</li>
          </ul>
          <div class="hotAreaWrap" v-if="!areaSearch || areaSearchResult.length<=0">
            <p class="p1">热门商圈</p>
            <div class="hotArea">
              <div class="city-hotInfo" v-for="city in cityHotArea" v-if="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>
      <div class="input-border s-search s-select">
        <el-select  v-model="chooseArea">
          <el-option v-for="a in areaList" :value="a.val"  :key="a.val" :label="a.label"></el-option>
        </el-select>
      </div>
      <a href="javascript:void(0)" class="searchBtn" @click="subSearchArea">搜索</a>
    </div>
    <div class="slide-cell">
      <div class="s-title">度假类型<a @click="clearCategory">清空</a></div>
      <div class="s-heading">
        <div class="heading-cell" v-for="cate in Categories" @click="categorieClick(cate)" :class="{active:cate.chooseFlag,'notAllowed':cate.num<=0}" >
          <i class="iconfont" :class="cate.img" ></i>
          <p class="title">{{cate.name}}</p>
          <span class="num">{{cate.num}}</span>
        </div>
      </div>
    </div>
    <div class="slide-cell">
      <div class="s-title">酒店设施<a @click="clearfacility">清空</a></div>
      <div class="s-hotel">
        <div class="hotel-cell" v-for="facility in facilities" @click="chooseFac(facility)">
          {{facility.name}} <span class="float-r">{{facility.num}}家 <i class="iconfont icon-duoxuankuang1 i-checkbox" :class="{active:facility.chooseFlag}"></i></span>
        </div>
        <!--<a class="showMore" @click="showNum=(showNum==3 ? 1000 : 3)">{{showNum==3 ? '显示更多' : '收起'}}</a>-->
      </div>
    </div>
    <!--<div class="slide-cell">-->
      <!--<div class="s-title">房间类型<a @click="clearRoomChoose">清空</a></div>-->
      <!--<div class="s-hotel">-->
        <!--<div class="hotel-cell" v-for="room in roomTypes" @click="chooseRoom(room)">-->
          <!--{{room.label}} <span class="float-r"><i class="iconfont icon-duoxuankuang1 i-checkbox" :class="{active:room.ischoose}" ></i></span>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <div id="l-map"></div>
  </div>
</template>
<script>
    import {Map} from '../../assets/js/map.js'
    export default {
        name: '',
        props:{
          Facets:'',
          people:''
        },
        data () {
            return {
              MinPrice:'0',
              MaxPrice:'8000',
              stars:[{label:'一星',val:'1.0',text:'一星以上，含一星'},{label:'两星',val:'2.0',text:'两星以上，含两星'},{label:'三星',val:'3.0',text:'三星以上，含三星'},{label:'四星',val:'4.0',text:'四星以上，含四星'},{label:'五星',val:'5.0',text:'五星'}],
              starLevel:0,
              grade:3,
              showNum:3,
              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}
              areaSearch:'',
              areaSearchResult:[],
              areaList:[{label:'距离选择',val:''},{label:'一公里内',val:'1000'},{label:'两公里内',val:'2000'},{label:'三公里内',val:'3000'},{label:'四公里内',val:'4000'},{label:'五公里内',val:'5000'}],
              areaIsDrap:false,
              choosePoint:{},
              chooseArea:'',
              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}],
              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;
              }
            })
          },

          /**筛选*/
          filterSearch(param){
            this.$emit("filterSearch",param);
          },
          /*重置*/
          resetSearch(param){
            this.$emit("resetSearch",param);
          },
          /**人均预算*/
          getTitle(){
            var _this=this;
            $("#priceArea").ionRangeSlider({
              min: 0,
              max: 8000,
              from: 0, //默认从哪个值开始选
              to: 8000, //默认选到哪个值
              type: 'double', //设置类型
              onFinish:function (data) {
                _this.MinPrice=data.from;
                _this.MaxPrice=data.to;
                var param={
                  type:1,
                  MinPrice:_this.MinPrice * _this.people + '',
                  MaxPrice:_this.MaxPrice<8000 ? (_this.MaxPrice * _this.people) + '' : ''
                };
                _this.filterSearch(param);
              }
            });
          },
          /**星级*/
          chooseStarLevel(i){
              this.starLevel=i;
              var param={
                type:2,
                category:this.stars[i-1].val
              }
              this.filterSearch(param);
          },
          /**选择房型*/
          chooseRoom(room){
            room.ischoose=!room.ischoose;
            var roomL=[];
            this.roomTypes.forEach(item=>{
              if(item.ischoose){
                if(item.label=='套房/家庭房'){
                  roomL.push(item.val2);
                }
                roomL.push(item.val);
              }
            });
            var param={
              type:5,
              codeList:roomL
            }
            this.filterSearch(param);
          },

          /*获取度假类型*/
          getGlobalTypes(){
            this.$parent.loading=true;
            getVacationLabel().then(data=>{
                if(data.returnCode==200 && data.data.length>0){
                  data.data.forEach(item=>{
                      for(var i=0;i<item.globalType.globalTypeTranslations.length;i++){
                          if(item.globalType.globalTypeTranslations[i].countryCode=='CN'){
                            item.name=item.globalType.globalTypeTranslations[i].content;
                          }
                      }
                      item.num=0;
                      item.chooseFlag=false;
                      item.objectType=item.globalType.objectType;
                  });
                  this.Categories=data.data;

                }
                this.$parent.dealUrlParams();
            })
          },
          resetLabelNum(){
            this.Categories.forEach(item=>{
                item.num=0;
//                item.chooseFlag=false;
            });
            this.facilities.forEach(item=>{
              item.num=0;
//              item.chooseFlag=false;
            });
          },
          matchGlobalTypes(globalTypes){
            let typeArr=[];
            if(globalTypes.length>0){
              for (var i=0;i<globalTypes.length;i++){
                for (var j=0;j<this.Categories.length;j++){
                  if(globalTypes[i]==this.Categories[j].objectType && typeArr.indexOf(this.Categories[j].name)==-1){
                    typeArr.push(this.Categories[j].name);
                  }
                }
              }
            }
            return typeArr;

          },
          /**检索周边*/
          searchAreaChange(){
            var _this=this;
            _this.areaSearchResult=[];
            var options = {
              onSearchComplete: function (results) {
                // 判断状态是否正确
                if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                  for (var i = 0; i < results.getCurrentNumPois(); i ++){
                      let poiInfo=results.getPoi(i);
                      let obj={
                        areaName:poiInfo.title,
                        lat:poiInfo.lat,
                        lng:poiInfo.lng,
                        geoId:poiInfo.geoId
                      }
                    _this.areaSearchResult.push(obj);
                  }
                  _this.areaIsDrap=true;
                }
              }
            };
            var local = new BMap.LocalSearch(_this.$parent.map, options);
            local.search(_this.areaSearch);
          },
          chooseAddr(r){
            this.areaSearch=r.areaName;
            this.areaIsDrap=false;
            this.choosePoint={
              lng:r.lng,
              lat:r.lat,
            };
          },
          /**距离搜索*/
          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:6,
              lng:lng+'',
              lat:lat+'',
              radius:this.chooseArea+""
            };
            this.filterSearch(param);
          },
          /**获取度假类型、酒店设施*/
          formatCategories(Facets){
            if(Facets==null||Facets.length<=0){
              return;
            }

            this.Categories.forEach(cate=>{
              let code=cate.objectType;
              cate.num=0;
              Facets.forEach(facet=>{
                if(code==facet.fieldValue){
                  cate.num=facet.value;
                  return;
                }
              })
            });

            this.facilities.forEach(facility=>{
              let code=facility.code;
              facility.num=0;
              Facets.forEach(facet=>{
                if(code==facet.fieldValue){
                  facility.num=facet.value;
                  return;
                }
              })
            });
          },
          /**选择度假类型*/
          categorieClick(cate){
            if(cate.num>0){
              cate.chooseFlag=!cate.chooseFlag;
              var param={
                type:3,
                code:cate.objectType
              }
              this.filterSearch(param);
            }
          },
          /**选择酒店设施*/
          chooseFac(fac){
              if(fac.num>0){
                fac.chooseFlag=!fac.chooseFlag;
                var param={
                  type:4,
                  code:fac.code
                }
                this.filterSearch(param);
              }
          },
          /*清除距离搜索*/
          clearArea(){
            this.areaIsDrap=false;
            this.chooseArea='';
            this.areaSearch='';
            var param={
              type:6,
            };
            this.areaSearchResult=[];
            this.resetSearch(param);
          },
          /*清除度假类型*/
          clearCategory(){
            this.Categories.forEach(cate=>{
              cate.chooseFlag=false;
            });
            this.$parent.form.hotel.holidayType=[];
            var param={
              type:3,
            };
            this.resetSearch(param);
          },
          /*清除酒店设施*/
          clearfacility(){
            this.facilities.forEach(cate=>{
              cate.chooseFlag=false;
            });
            this.$parent.form.hotel.hotelAttributeCodeList=[];
            var param={
              type:4,
            };
            this.resetSearch(param);
          },
          /*清除房型选择*/
          clearRoomChoose(){
            this.roomTypes.forEach(item=>{
              item.ischoose=false;
            });
            var param={
              type:5,
              CodeList:[]
            };
            this.resetSearch(param);
          },
          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.getTitle();
          this.divPropagation();
        },
        created(){
          this.getGlobalTypes();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig.styl"
@import "productList.styl"
  .searchResult{
    position absolute
    width 100%
    max-height 280px
    overflow-y auto
    background #fff
    border 1px solid border_color
    border-top none
    z-index 10
    ul{
      li{
        height 32px
        line-height 32px
        padding-left 10px
        font-size 12px
        cursor pointer
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        color mainTitleColor
        &:hover{
          background blueColor
          color #fff
        }
        i{
          font-style 12px
          margin-right 5px
          color subheadColor
        }
      }
    }

    .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
          }
        }
      }
    }
  }
  .searchBtn{
    display inline-block
    width 100%
    height 34px
    line-height 34px
    margin-top 15px
    text-align center
    background blueColor
    font-size 13px
    color #fff
    &:hover{
      background blueHoverColor
    }

  }
</style>
