<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="">
      <div class="head-btn">
        <div
          class="btn left"
          :class="{'active-btn':activeBtnType}"
          @click="headBtnClick(true)">
          {{headBtn.leftName}}
        </div>
        <div class="line"></div>
        <div
          class="btn right"
          :class="{'active-btn':!activeBtnType}"
          @click="headBtnClick(false)">
          {{headBtn.rightName}}
        </div>
      </div>
      <div class="right-btn" v-if="rightBtn" @click="rightBtnClick">{{rightBtn}}</div>
    </header>
  </section>
</template>

<script>
  export default {
    name: "normal-header",
    props: {
      title: {
        type: String,
        default: function () {
          return ''
        }
      },
      rightBtn: {
        type: String,
        default: function () {
          return ''
        }
      },
      backType: {
        type: Number,
        default: function () {
          return 1
        }
      },
      headBtn: {
        type: Object,
        default: function () {
          return {
            leftName: '',
            rightName: ''
          }
        }
      },
      activeBtnType: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      goBack() {
        if (this.backType == 1) {
          this.$router.go(-1)
        } else if(this.backType == 2) {
          this.$emit('selfGoBack')
        }else {
          this.$rocNative.goBack()
        }
      },
      headBtnClick(val) {
        this.$emit('handleBtn', val)
      },
      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;
      position: relative;
      img {
        width: 25px;
        height: 25px;
        position: absolute;
        left: 13px;
      }
      .head-btn {
        width: 193px;
        height: 30px;
        display: flex;
        margin: 0 auto;
        .btn {
          padding: 0 15px;
          font-size: 13px;
          font-weight: 700;
          height: 30px;
          text-align: center;
          line-height: 31px;
          color: #373839;
          position: relative;
        }
        .btn:after {
          position: absolute;
          content: " ";
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          width: 200%;
          height:200%;
          border: 1PX solid #C7C8C9;
          //border-radius: 40px;
          color: #C7C8C9;
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: scale(.5, .5);
          transform: scale(.5, .5);
        }
        .left {
          border-bottom-left-radius: 15px;
          border-top-left-radius: 15px;
        }
        .right {
          border-bottom-right-radius: 15px;
          border-top-right-radius: 15px;
        }
        .left:after {
          border-bottom-left-radius: 40px;
          border-top-left-radius: 40px;
          border-right: none;
        }
        .right:after{
          border-bottom-right-radius: 40px;
          border-top-right-radius: 40px;
          border-left: none;
        }
        .active-btn {
          background: #F8F9FA;
        }
        .line {
          width: 0.5px;
          height: 31px;
          background: #C7C8C9;
        }
      }
      .right-btn {
        color: #373839;
        font-size: 13px;
        position: absolute;
        right: 14.5px;
      }
    }
  }

</style>