<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 16:46:09
-->
<template>
  <view>
    <view class="navBar"
          :style="{height: navBarHeight+ 'px',background: backColor}">
      <!-- 返回 -->
      <view class="left-btn"
            v-if="isBack"
            :style="{marginTop: jn.top + 3+'px',left:jnRight + 'px'}"
            @tap="toBack()">
        <view class="left_item"
              :style="{width: jn.height+ 'px',height: jn.height+ 'px'}">
          <u-icon name="arrow-left"
                  size="14"
                  color="#333"></u-icon>
        </view>
      </view>
      <view class="left-btn"
            v-else>

      </view>
      <!-- title -->
      <view class="title"
            :style="{marginTop: jn.top + 3+ 'px',lineHeight:jn.height+ 'px',}">
        {{title}}
      </view>
      <view class="right-btn">
        <slot name="rightBtn"></slot>
      </view>
    </view>
    <view v-if="isKong"
          :style="{height: navBarHeight+ 'px'}"></view>
  </view>
</template>

<script>
export default {
  name: 'navBar',
  props: {
    // 标题
    title: {
      type: String,
      default: 'title',
    },
    // 背景色
    backColor: {
      type: String,
      default: '#fcb71e',
    },
    // 是否显示返回
    isBack: {
      type: Boolean,
      default: false,
    },
    // 是否占文档流
    isKong: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      navBarHeight: 40,
      jn: {},
      jnRight: '',
    }
  },
  mounted() {
    // 胶囊位置
    let btnInfo = uni.getMenuButtonBoundingClientRect()
    // 手机信息
    let mobileInfo = uni.getSystemInfoSync()

    this.jn = btnInfo
    this.navBarHeight = btnInfo.top + btnInfo.height + 8
    this.jnRight = mobileInfo.windowWidth - btnInfo.right
  },
  methods: {
    toBack() {
      let pages = getCurrentPages()
      let prevPage = pages[pages.length - 1]
      // 分享进来
      if (prevPage.route == 'pages/index/goodsDetails/index') {
        uni.switchTab({ url: '/pages/index/index' })
      } else {
        uni.navigateBack()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.navBar {
  position: fixed;
  width: 100%;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  color: #333;
  z-index: 9999;
}
.left-btn {
  position: relative;
  .left_item {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.title {
  font-size: 28rpx;
  font-weight: 600;
}
</style>