<template>
  <div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
    <div class="search-menu">
      <!-- <div :class="isTransparent?'search-transparent':'bgWhite'" class="search">
        <input type="search" :class="isTransparent?'search-transparent':''" class="input" v-model="searchVal" :placeholder="placeholder" :disabled="disabled" />
        <img v-if="searchFix" class="search-img" src='../../images/search-grey.png'>
        <img v-else class="search-img" src='../../images/search-white.png'>
      </div> -->
      <div class="bgFill" :style="{height:ptop}"></div>
      <div class="fixBox">
         <div class="header-right" @click="goToPage">
          <img v-if="searchFix" class="info" src='../../images/msg2.png'>
          <img v-else class="info" src='../../images/msg1.png'>
          <div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="msgCount>0">{{msgCount>99?'99+':msgCount}}</div>
        </div>
      </div>
     
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        placeholder: '即将上线，敬请期待',   
        disabled:'disabled',
        searchVal:'',
        isTransparent: true, //更改颜色 背景
        isMax:false,//消息数量是否大于99
        count:'',
        isShowMsg:true,
        ptop:0,
        menuptop:0,
        popHeight:0
    }
  },
  props:{
    msgCount:{
      type:String,
      default:''
    },
    statusBarHeight:{
      type:Number,
      default:0
    },
    searchFix:{
      type:Boolean,
      default:false,
    }
  },
  watch:{
    // searchFix:function(n){
    //   if(n){
    //     alert(this.searchFix)
    //   }
    // }
  },
  created(){
    let _this = this;
    window.__getStatusBarHeight = function(parm){
           
      if(window.__isAndroid){
        _this.popHeight = parm.statusBarHeight/2
      }else{
        _this.popHeight = parm.statusBarHeight
      }
      _this.ptop = _this.popHeight+7+'px';

      _this.menuptop = _this.popHeight+7+'px'
     // alert(parm.statusBarHeight);
       
    }
    this.getStatusHight()
  },

  mounted(){
    
   // this.getStatusHight();
    // if(window.__isAndroid){
    //   this.popHeight = this.statusBarHeight/2
    // }else{
    //   this.popHeight = this.statusBarHeight
    // }
    // this.count =  this.msgCount;
    // this.ptop = this.popHeight+7+'px';
    // this.menuptop = this.popHeight+7+'px'
   // console.log(this.statusBarHeight);
    // if(this.msgCount == ''){
    //   this.isShowMsg = false
    // }
    // if(this.count>=99){
    //   this.count += '+';
    //   this.isMax = true
    // }

  },
  methods: {
    getStatusHight(){
        rocNative.getStatusBarHeight({
            __funcName: '__getStatusBarHeight'
        })
        
    },

    goToPage(){
     // alert("000");
      this.$emit('setAppMsg',false)
      this.pageBurialPoin({
        menuLevel:1,
        menuCode:'m_home',
        functionCode:'f_notification',
        actionCode:'c_notification',
      })
      rocNative.readMessage();
    }
  },

  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
  width: px2rem(375px);
  height: 100%;
  background-color: #F8F8F8;
}

.search-transparent{
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.search-transparent::-webkit-input-placeholder{ 
    color:#fff;
}
.white{
  color: #fff;
}
.header-right{
  width: px2rem(20px);
  height: px2rem(20px);
  position: relative;
  margin:px2rem(5px) 0;
 float: right;
  img{
    width: 100%;
    height: 100%;
    display: block;
  }
}
.bgFill{
  background: inherit;
  height: 20px;
}
.fs30{
  font-size: px2rem(15px);
}
.gxy-study{
  margin-right: px2rem(19px);
}
.gxy{
  font-size: px2rem(25px);
  margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
  width: 100%;
  /*//height: px2rem(50px);*/
  
  position: relative;
}
.fixed {
  .search-menu{
    
    position: fixed;
    z-index: 110;
    top:0;
    left: 0;
     
  }
  .fixBox{
    background: #fff;
    height:px2rem(40px);
    padding:0 px2rem(25px);
    padding-top: px2rem(7px)

  }
  .bgFill{
    background: #ddd;
  }
  .search-transparent::-webkit-input-placeholder{ 
      color:#666;
  }
  .search{
    border-color:#ddd;
  }
  .info-count{
    background: #FB5B52;
    color: #fff
  }
}
.fixBox{
    padding:0 px2rem(25px);
    height: px2rem(40px);
    padding-top: px2rem(7px)

}
.search-menu{
 
 
  width: 100%;
  position: absolute;
}
.search{
  width: px2rem(290px);
  height: px2rem(30px);
  border-radius: px2rem(19px);
  float: left;
}
.input{
  outline: none;
  border: none;
  float: left;
  font-size: px2rem(13px);
  margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
  line-height: px2rem(18px);
  width: 80%;
}
.search-img{
  width: px2rem(16px);
  height: px2rem(16px);
  margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
  float: right;
}

.info-count{
  position:absolute;
  top: -(px2rem(5px));
  left:  (px2rem(10px));
  /*max-width: px2rem(25px);*/
  
  padding:0 px2rem(3px);
  height: px2rem(15px);
  line-height: px2rem(15px);
  border-radius: px2rem(15px);
  text-align: center;
  font-size:px2rem(12px);
  font-weight: bold;
  background-color: #fff;
  color: RGBA(53, 134, 126, 1);
}
.num-min{
  max-width: px2rem(25px);
  min-width: px2rem(15px);
  /*padding:0;*/
}
.num-max{
  width: auto;
 /* background-color: RGBA(251, 91, 82, 1);
  color: #fff;*/
}
.hot-tag{
  width: 100%;
  height: px2rem(150px);
}
.hotTagTitle{
  font-size: px2rem(18px);
  padding: px2rem(73px) px2rem(15px);
  float: left;
  background-color: #fff;
}
.cource{
  width: 100%;
  height: px2rem(350px);
}
.font-title{
  font-size: px2rem(18px);
  padding: 0 0 px2rem(21px) px2rem(15px);
  float: left;
  width: 100%;
  text-align: left;
}
.title{
  font-size: px2rem(16px);
}
.cource-left{
  float: left;
  padding-left: px2rem(15px);
}
.need-left{
  float: left;
  padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
  float: left;
}
.cource-img{
  width: px2rem(170px);
  height: px2rem(96px);
  margin-bottom: px2rem(10px);
}
.cource-more{
  font-size: px2rem(15px);
  color: #999999;
}
.need{
  width: 100%;
  height: px2rem(325px);
  margin-top: px2rem(35px);
}
</style>
