<template>
  <section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
    <!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
    <div
      class="nav-part"
      :style="'background:' + bgColor + ';'
      + 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
    >
      <div class="nav-title">
        <span class="nav-back" @click="goBack">
          <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
          <!-- <img class="nav-back" src="../../images//grey-throw.png"/> -->
        </span>
        <span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
        <span v-show="isShowShare" class="nav-share" @click="goShare">
          <img
            src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png"
          >
          <!-- <img src="../../images/share-icon.png"/> -->
        </span>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: "common-navbar",
  data() {
    return {
      isWeb: window.__isWeb,
      navbarHeight: 28,
      contentHeight: 35,
      fontSize: 37.5,
      content: "",
      shareImageUrl:
        "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
    };
  },
  props: {
    bgColor: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "暂无数据"
    },
    isFixNavbar: {
      //是否fix定位
      type: Boolean,
      default: false
    },
    burialPoint: {
      default: "",
      type: String
    },
    backMethod: {
      type: String,
      default: "native" // inner native
    },
    isShowShare: {
      type: Boolean,
      default: false
    },
    borderStyle: {
      type: String,
      default: "1px solid #e7e7e7"
    }
  },
  computed: {
    // bgColor2() {
    //   return this.bgColor
    // },
    // borderStyle() {
    //   return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
    // },
    navHeight() {
      if (this.isFixNavbar) {
        return 0;
        // return (this.contentHeight) / this.fontSize + 'rem';
      } else {
        return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem";
      }
    },
    paddingTop() {
      // return this.isWeb ? 0 : this.navbarHeight / this.fontSize + 'rem'
      return this.navbarHeight / this.fontSize + "rem";
    }
  },
  mounted() {
    let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
    this.fontSize = htmlDom;
  },
  methods: {
    //返回
    goBack() {
      // if (this.burialPoint == "activity") {
      //   this.pageBurialPoin(this.objPoint);
      // }
      if (this.backMethod === "inner") {
        this.$router.back(-1);
      } else {
        rocNative.goBack();
      }
      //rocNative.backPreviousPage();
    },
    //分享
    goShare() {
      let url = location.href,
        _this = this;
      rocNative.shareWechat({
        // url: url,
        // title: '_this.title',
        // content: '_this.content',
        // shareImageUrl: '_this.shareImageUrl'
        type: 6,
        shareId: 0,
        shareUrl: 'shareUrl',
        title1: "this.shareTitle1",
        title2: "this.shareTitle2",
        shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
      });
    }
  }
};
</script>
<style lang="less" scoped>
.back {
  position: absolute;
  left: 8px;
  top: 15px;
  display: inline-block;
  width: 50px;
  height: 50px;
  img {
    padding: 10px;
    width: 25px;
    height: 25px;
  }
}
.nav-top {
  // height: 65px;
  background: #fff;
  color: #333;
  position: relative;
  z-index: 109;
  .nav-back {
    display: inline-block;
    position: absolute;
    left: 16px;
    top: 0;
    height: 25px;
    width: 25px;
    // -ms-transform: translate(180deg);
    // -webkit-transform: (180deg);
    // transform: rotate(180deg);
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .nav-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    svg {
      stroke: #000;
      fill: #0000ff;
    }
  }
  .nav-share {
    position: absolute;
    right: 16px;
    top: 0;
    height: 25px;
    width: 25px;
  }
  .nav-title {
    position: relative;
    top: 10px;
    left: 0;
    display: inline-block;
    width: 100%;
    /* padding:0 33px;*/
    height: 36px;
    &-title {
      height: 18px;
      font-size: 18px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 26px;
    }
  }
  .nav-part {
    width: 100%;
    font-size: 18px;
    text-align: center;
    padding: 0 0 10px 0;
    /* height: 25px;*/
  }
}

.nav-part {
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid #e7e7e7;
  /* height: 25px;*/
}
</style>
