<template>
  <section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
    <div
      class="nav-part"
      :style="'background:' + bgColor + ';'
      + 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
    >
      <div class="nav-title">
        <span class="nav-back" @click="goBack">
          <img v-show="isBlack" src="../../images/left-array-black.png" alt="">
          <img v-show="!isBlack" src="../../images/left-array-whiter.png" alt="">
        </span>
        <span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
        <span v-if="isShowShare" class="nav-share" @click="goShare">
          <img  v-show="isBlack"
            src="../../images/cme/share-icon-black.png"
          >
          <img v-show="!isBlack" src="../../images/cme/share-icon-white.png"/>
        </span>
      </div>
    </div>
  </section>
</template>
<script>
import { getWebPageUrl } from "@/utils/index";
import { mapGetters } from 'vuex';
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(),
      shareUrl: ''
    };
  },
  props: {
    isWeb: {
      type: Boolean,
      default: window.__isWeb
    },
    bgColor: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "暂无数据"
    },
      //是否fix定位
    isFixNavbar: {
      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"
    },
    isBlack: {
      type: Boolean,
      default: true
    },
    shareTitle: {
      type: String,
      default: ""
    },
    shareTitleInfo: {
      type: String,
      default: ""
    },
    projectId: {
      type: String | Number,
      default: ""
    },
    limitTimes: {
      type: String | Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    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() {
      rocNative.goBack();
    },

    // 生成分享的url
    goShare() {
      this.$sendBuriedData({
        component_tag: `882#88209`
      });
      let _this = this;
      let videoUrl = this.$route.query.videoUrl || '';
      let info = "";
      if(videoUrl) {
        info = JSON.stringify({
          projectId: this.projectId,
          videoUrl: videoUrl,
          limitTimes: this.limitTimes || 0
        })
      } else {
        info = JSON.stringify({
          projectId: this.projectId,
        })
      }
      let param = {
        channel: 1, // 分享渠道 1：APP
        info: info,
        type: 3,     // 业务类型 1：教培项目 2：继教项目 3：职称考项目
        token: _this.userInfo.userToken,
        setEntry: true
      };
      _this.NEW_POST("portal/shareParam/save", param).then(res => {
        if (res.code == "000000") {
          let url = getWebPageUrl(`profexam/#/sharecoop?uuid=${res.data}`);
          _this.shareUrl = url;
          _this.goShareAction();
        }
      }).catch( e => {
        console.error(e);;
      });
    },

    //分享
    goShareAction() {
      // let url = location.href,
      let _this = this;
      rocNative.shareWechat({
        type: 6,
        shareId: 0,
        shareUrl: _this.shareUrl,
        title1: _this.shareTitle,
        title2: _this.shareTitleInfo,
        shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
      });
    }
  }
};
</script>
<style lang="less" scoped>
.back {
  position: absolute;
  left: px;
  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: 0px;
    top: 0;
    height: 25px;
    width: 55px;
    padding-left: 15px;
    padding-right: 15px;
  }
  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: 700;
      color: rgba(51, 51, 51, 1);
      line-height: 26px;
      display: inline-block;
      max-width: 230px;
      height: 36px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .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>
