<template>
  <div class="teach-top">
    <span class="back" @click="backPre">
      <!-- <img src="../../images/left-icon.png"> -->
      <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
    </span>
    <div class="tc title">{{parmObj}}</div>
    <div class="tc count" v-if="isShowCount">{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
  </div>
</template>

<script>

export default {
  data () {
      return {
        parmObj:''
      }
  },
  props:{
      isShowCount: {
        default:false,
        type:Boolean
      },
      followCount: {
         type:Number,
        default:0
      },
      studyCount: {
        type:Number,
        default:0
      },
      statusBarHeight: {   
        type:Number,
        default:0
      },
      backMethod: {
        type: String,
        default: 'native'   
      }
  },
  mounted(){
    this.parmObj = this.isShowCount ? '讲师集' : '云鹊医讲师'
  },
 
  methods: {
    backPre(){
      if(this.backMethod === 'inner') {
        this.$router.go(-1)
      } else {
        rocNative.goBack()
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.teach-top{
  width: 100%;
  height: px2rem(185px);
  position: relative;
  @include bis('../../images/headerTop.png');
  .tc{
    text-align: center;
  }
  .back{
    position: fixed;
    z-index: 110;
    left:px2rem(18px);
    top: px2rem(25px);
    display: inline-block;
    width: px2rem(50px);
    height: px2rem(50px);
    img{
      width: px2rem(25px);
      height: px2rem(25px);
    }
  }
  .title{
    font-size: px2rem(25px);
    color: #fff;
    padding: px2rem(55px) 0 px2rem(8px) 0;
    font-weight: 500
  }
  .count{
    font-size: px2rem(15px);
    line-height: px2rem(21px);
    color: #fff;
  }
}



</style>
