<template>
  <div class="container">
    <div class="padd"><!-- v-if="hotCity.length>0"-->
      <input type="text" class="search_text" v-model="destinationSearch" placeholder="请输入城市、省份">
      <div class="searchResult" v-show="destinationSearch">
        <ul>
          <li v-for="d in destinationList">
            <div class="cityWrap">
              <p class="cityName" @click="chooseDestination(d,'city')">{{d.shortName}}<i class="iconfont icon-coordinates_fill float-r"></i></p>
              <b v-for="c in d.flightCode" @click="chooseDestination(c,'airport',d)">{{c.airportName}}{{c.threeCode}}</b>
            </div>
          </li>
        </ul>
        <div class="loading-div" v-show="loading"><i class="iconfont icon-loading"></i></div>
        <div class="noData" v-show="!loading && destinationList.length<=0">{{msgTip}}</div>
      </div>
    </div>
    <div class="hotPlace">
      <b class="hot-tab">
        目的地：
        <span class="btnt" :class="{active:type==0}" @click="type=0">热门</span>
        <span class="btnt" :class="{active:type==1}" @click="type=1" v-if="airProductType=='TSDF' || airProductType=='ALL'">国内城市</span>
        <span class="btnt" :class="{active:type==2}" @click="type=2" v-if="airProductType=='TSIF' || airProductType=='ALL'">国际 · 港澳台</span>
      </b>

      <div class="hot-list">
        <!--热门-->
        <cityInfo :cityList="hotCity" v-show="type==0" @chooseCity="chooseDestination($event,'city')"></cityInfo>
        <!--国内-->
        <div class="hot-cell" v-for="(list,key) in hotCityInfo.inlandCity" v-show="type==1">
          <span class="hot_py">{{key}}</span>
          <cityInfo :cityList="list" @chooseCity="chooseDestination($event,'city')"></cityInfo>
        </div>
        <!--国际-->
        <div class="hot-cell" v-for="(list,key) in hotCityInfo.interCity" v-show="type==2">
          <span class="hot_py">{{key}}</span>
          <cityInfo :cityList="list"  @chooseCity="chooseDestination($event,'city')"></cityInfo>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import cityInfo from './cityInfo.vue'
  export default {
    name: '',
    data () {
      return {
        loading:false,
        type:0,//0热门 ，1国内所有，2国际 · 港澳台
        hotCity:'',
        destination:'',
        destinationList:[],
        destinationSearch:'',
        msgTip:'无搜索结果',
        hotCityInfo:{
          inlandCity:{},
          interCity:{}
        },
        hasVal:0,
        airProductType:'', //是否有国际
      }
    },
    methods: {
      /**
       * 选择目的地
       * type:0出发地，1目的地
       * state:0不可以,1可用
       * */
      chooseDestination(d,type,city){
        this.destinationSearch='';
        d.airportType=type;
        d.cityInfo=city;

        if(d.airportType=='airport'){
          d.shortName= d.airportName;
          d.geoCode=city.geoCode;
        }

        this.$emit("chooseDistination",d);
      },
      /**查询目的地*/
      searchCity(){
        this.loading = true;
        this.destinationList = [];
        this.getHotCity(1);
      },
      getCitys(arrCode){
        this.hotCity=[];
        this.destinationSearch='';
        this.getHotCity(arrCode);
      },

      /**热门目的地*/
      getHotCity(type){
        let _this=this;
        var param={
          "page":1,
          "size":50,
          "param":{
            "type":1,  //0出发地，1目的地
            "isHot":'', //0非热门，1热门
            "state":1,
            depCode:this.$parent.departInfo.departCode,
            shortName:this.destinationSearch,
//            isInternational:0
          }
        };
        this.hasVal=0;
        getInterCitys(param).then(data=>{
          if(type==1){
            this.loading = false;
            this.destinationList=[];
            if(data.returnCode == 200) {
              formartList(this.destinationList,data.data.map.international_0);
              formartList(this.destinationList,data.data.map.international_1);
            }else{
              this.destinationList = [];
              this.msgTip=data.returnMsg;
            }
          }else {
            this.airProductType=data.data.productType;
            this.hotCity=[];
            let hotList=[];
            this.hotCityInfo.inlandCity={};
            this.hotCityInfo.interCity={};
            if(data.returnCode == 200) {
              formartList(hotList,data.data.map.international_0);
              formartList(hotList,data.data.map.international_1);
              formartObj(this.hotCityInfo.inlandCity,data.data.map.international_0);
              formartObj(this.hotCityInfo.interCity,data.data.map.international_1);
              var finalList=[];
              hotList.forEach(item=>{
                if(item.isHot==1){
                  this.hotCity.push(item);
                }

                if(this.$route.name=='productList'　&& type){
                  var codeList=this.$parent.chooseDesArr[0].threeCode.split(",");
                  for (var i=0;i<codeList.length;i++){
                    if(item.threeCode.indexOf(codeList[i])>=0){
                      var obj={};
                      Object.assign(obj,item);
                      obj.threeCode=codeList[i];
                      finalList.push(obj);
                    }
                  }
                }
              });

              this.$nextTick(function () {
                if(this.$route.name=='productList'){
                  this.$parent.chooseDesArr=finalList;
                  this.$parent.cityAreaFun();
                }
              });

            }
          }
        });
      },
    },
    mounted(){
    },
    watch:{
      destinationSearch:function (newVal,oldVal) {
        if(newVal){
          this.searchCity();
        }else {
          this.destinationSearch = '';
        }
      },
    },
    components:{
      cityInfo
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../assets/stylus/colorConfig"
  .hot-list{
    padding-top 10px
    height 145px
    overflow-y auto
    .hot-cell{
      position relative
      padding-left 20px
      .hot_py{
        position absolute
        left 10px
        top 2px
        font-size 14px
        color mainColor
      }
    }
  }

  .padd{
    position relative
    padding 14px 20px 0 16px
    .search_text{
      width 360px
      height 40px
      padding-left 20px
      border-radius 4px
      border 1px solid #e5e5e5
      box-sizing border-box
      font-size 14px
    }
    .loading-div{
      text-align center
      i{
        display inline-block
        position relative
        font-size 32px
        color #fe7065
        animation: 0.8s rotate  linear infinite;
      }
    }
    .noData{
      line-height 34px
      padding-left 20px
      font-size 14px
      color subheadColor
    }
  }
  .searchResult{
    position absolute
    box-sizing border-box
    width 360px
    max-height 168px
    overflow-y auto
    border 1px solid border_color
    border-top none
    background #fff;
    z-index 1
    ul{
      li{
        width 100%
        min-height 40px
        line-height 40px
        box-sizing border-box
        font-size 13px
        color mainTitleColor
        cursor pointer
        p.cityName{
          line-height 40px
          padding 0px 15px
        }
        b{
          display block
          padding 0px 30px
          &:hover{
            background subColor
            color #fff
            i{
              color inherit
            }
          }
          i{
            font-size 12px
            color subheadColor
          }
        }

        &.active{
          background #f1f9ff
        }
        i{
          font-size 14px
          left auto
          right 20px
          color #bfbfbf
        }
      }
    }
  }
  .hotPlace{
    .hot-bar{
      margin 20px 20px 0
      padding 0 0 12px 0
      border-bottom 2px solid #e5e5e5
      .btnt{
        margin-right 40px
        padding-bottom 10px
        font-size 14px
        cursor cursor
        &.active{
          color #3095ef
          border-bottom 2px solid #3095ef
        }
      }
    }
    ul{
      display inline-block
      width 100%
      height 136px
      padding 15px 20px 8px
      box-sizing border-box
      overflow-y auto
      li{
        float left
        width 20%
        line-height 15px
        padding-bottom 12px
        font-size 14px
        color #484848
        cursor pointer
        box-sizing border-box
        &.active{
          color #fe7065
        }
        span{
          padding 4px 6px
        }
        &:hover{
          span{
            background #ffede9
          }
        }
      }
    }
  }
</style>
