<template>
    <div class="container">
      <div class="bottom-section bottom-nav">
        <div class="fixed_bottom flex-box">
          <div class="flex" :class="{active:activePage == 'home'}"><router-link to="/wx"><i class="iconfont icon-shouye"></i><p>首页</p></router-link></div>
          <div class="flex" :class="{active:activePage == 'search'}"><a href="javascript:void(0)" @click="toProductList"><i class="iconfont icon-sousuo"></i><p>搜索</p></a></div>
          <div class="flex" :class="{active:activePage == 'itinerary'}"><router-link to="/wx/itinerary"><i class="iconfont icon-schedule"></i><p>行程单</p></router-link></div>
          <div class="flex" :class="{active:activePage == 'mine'}"><router-link to="/wx/mine"><i class="iconfont icon-profile icon_person"></i><p>我的</p></router-link></div>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
      name: '',
      props:{
        activePage:'',
        scrollTop:''
      },
      data () {
          return {
            departInfo:{}
          }
      },
      methods: {
          toProductList(){
            let params={
              depCode:this.departInfo.threeCode,
              arrCode:'',
              dateType:0, //0固定，1灵活
              isFixiable:false,
              depDate:'',
              returnDate:'',
              minduration:'1',
              adults:1,
              childages:''
            };
            this.$router.push({path: '/wx/productList?'+ urlEncode(params).substr(1)});
            this.$router.go(0);
          },
          /*获取出发地*/
          getDepCity(){
            var param={
              "page":1,
              "size":50,
              "param":{
                "type":0,  //0出发地，1目的地
                "isHot":'',
                "state":1
              }
            };
            queryHotCity(param).then(data=>{
              if(data.returnCode == '200'){
                if(data.data.list.length>0){
                    this.departInfo=data.data.list[0];
                }
              }
            });
          },
        },
      mounted(){
          this.getDepCity();
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.bottom-nav{
  height 3rem
  .fixed_bottom{
    height 3rem
    background #000000
    text-align center
    padding 6px 0
    color #919292
    .flex{
      a{
        display inline-block
      }
    }
    .active{
      color #fff
    }
    i{
      font-size 20px
      color inherit
    }
    p{
      margin-top 6px
      font-size .7rem
      color inherit
    }
  }
}
</style>
