<template>
  <div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
    <div class="search-menu" :style="{paddingTop:ptop}">
      <!-- <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="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="isShowMsg">{{count}}</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,
    }
  },
  props:{
    msgCount:{
      type:String,
      default:''
    },
    statusBarHeight:{
      type:Number,
      default:0
    },
    searchFix:{
      type:Boolean,
      default:false,
    }
  },

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

  },
  methods: {
    goToPage(){
      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-top:px2rem(5px);
 float: right;
  img{
    width: 100%;
    height: 100%;
    display: block;
  }
}
.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{
    background: #fff;
    position: fixed;
    z-index: 110;
    top:0;
    left: 0;
    padding:px2rem(10px) px2rem(25px) px2rem(13px) px2rem(15px); 
  }
  .search-transparent::-webkit-input-placeholder{ 
      color:#666;
  }
  .search{
    border-color:#ddd;
  }
  .info-count{
    background: #FB5B52;
    color: #fff
  }
}
.search-menu{
  padding: 0 px2rem(25px) 0 px2rem(15px);
 
  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{
  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>
