<template>
  <section class="header-section" >
    <div class="navBar" :style="{height: `${statusBarHeight}Px`,backgroundColor: statusBarColor}"></div>
    <header class="header-container">
      <img @click="goBack" src="~/assets/img/icon-back.png" alt="">
      {{title}}
      <div class="btn-right" v-if="rightText" @click="rightBtnClick">{{rightText}}</div>
    </header>
  </section>
</template>

<script>
  export default {
    name: "normal-header",
    props: {
      title: {
        type: String,
        default: function () {
          return ''
        }
      },
      rightText: {
        type: String,
        default: function () {
          return ''
        }
      },
      backType: {
        type: Number,
        default: function () {
          return 1
        }
      },
    },
    data() {
      return {}
    },
    methods: {
      goBack() {
        if (this.backType == 1) {
          this.$router.go(-1)
        } else if(this.backType == 2) {
          this.$emit('selfGoBack')
        }else {
          this.$rocNative.goBack()
        }
      },
      rightBtnClick() {
        this.$emit('handleRightBtn')
      }
    }
  }
</script>

<style lang="less" scoped>
  .header-section {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 2;
    .navBar {
      background: #CCCCCC;
    }
    .header-container {
      width: 100%;
      height: 44Px;
      background: #ffffff;
      color: #333333;
      font-size: 18px;
      /*display: flex;
      align-items: center;*/
      line-height: 44Px;
      text-align: center;
      position: relative;
      img {
        display: block;
        width: 25px;
        height: 25px;
        position: absolute;
        left: 13px;
        top: 9px
      }
     /* .title {
        margin: 0 auto;
      }*/
      .btn-right {
        position: absolute;
        right: 14.5px;
        bottom: 13px;
        font-size: 13px;
        line-height: 14px;
        color: #373839;
      }
    }
  }

</style>