<template>
  <section class="header-section" >
    <div class="navBar" :style="{height: `${barHeight}Px`,backgroundColor: barColor}"></div>
    <header class="header-container">
      <img @click="goBack" src="~/assets/img/icon-back.png" alt="">
      {{title}}
    </header>
  </section>
</template>

<script>
  export default {
    name: "normal-header",
    props: {
      title: {
        type: String,
        default: function () {
          return ''
        }
      },
      backType: {
        type: Number,
        default: function () {
          return 1
        }
      },
      barHeight: {
        type: Number,
        default:function () {
          return 0
        }
      },
      barColor: {
        type: String,
        default: function () {
          return '#ffffff'
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      goBack() {
        if (this.backType == 1) {
          this.$router.go(-1)
        } else if(this.backType == 2) {
          this.$emit('selfGoBack')
        }else {
          this.$rocNative.goBack()
        }
      }
    }
  }
</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;

      img {
        width: 25px;
        height: 25px;
        margin-left: 15px;
        margin-right: 111.5px;
      }
    }
  }

</style>