<template>
  <view class="navigation-bar">
    <view
      class="navigation-bar-placeholder"
      :style="{ height: innerHeight + 'px', visibility: 'hidden', opacity: show ? 1 : 0 }"
    ></view>

    <view
      class="navigation-bar-inner"
      :style="{
        paddingTop: statusBarHeight + 'px',
        paddingRight: innerRight + 'px',
        paddingLeft: menuButtonRight + 'px',
        height: innerHeight + 'px',
        background: navBackgroundColor,
      }"
    >
      <view
        v-if="showLeft"
        class="navigation-bar-left"
        :style="{ width: leftContentWidth ? leftContentWidth : menuButtonWidth + 'px' }"
      >
        <!--    导航左侧slot名称    -->
        <slot name="left"></slot>
      </view>
      <view
        class="navigation-bar-center"
        :style="{
          marginLeft: !showLeft ? menuButtonWidth + 'px' : 0,
        }"
      >
        <!--    导航中间slot名称    -->
        <slot name="center"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavHeader',
  props: {
    navBackgroundColor: {
      //背景色
      type: String,
      default: 'rgba(255,255,255, 0)',
    },
    // 是否是横屏，横屏时实际没有状态栏高度，但计算得到的结果确实有，需要特殊处理
    landscape: {
      type: Boolean,
      default: false,
    },
    // 显示隐藏导航，隐藏的时候navigation的高度占位还在,默认true
    show: {
      type: Boolean,
      default: true,
    },
    //是否显示左侧内容
    showLeft: {
      type: Boolean,
      default: false,
    },
    // 左侧 slot 宽度 单位 px
    leftContentWidth: {
      type: Number,
      default: 84,
    },
  },
  data() {
    return {
      statusBarHeight: 0,
      gap: 0,
      menuButtonRight: 0,
      menuButtonWidth: 0,
      innerRight: 0,
      innerHeight: 0,
    };
  },
  methods: {
    getLayoutInfo() {
      try {
        const res = uni.getSystemInfoSync();
        // 窗口宽度
        const windowWidth = res.windowWidth;
        //获取菜单按钮（右上角胶囊按钮）的布局位置信息
        const rect = wx.getMenuButtonBoundingClientRect();
        // 状态栏高度 #横屏时实际没有状态栏高度，无须计算
        this.statusBarHeight = this.landscape ? 0 : res.statusBarHeight;
        console.log('%c [this.statusBarHeight]: ', 'color:#1989fa;', this.statusBarHeight);
        // 胶囊距离状态栏
        this.gap = rect.top - this.statusBarHeight;
        console.log('%c [this.gap]: ', 'color:#1989fa;', this.gap);
        // 导航栏高度，+2的容错高度
        this.innerHeight = this.statusBarHeight + this.gap * 2 + rect.height + 2;
        console.log('%c [this.innerHeight]: ', 'color:#1989fa;', this.innerHeight);
        // 导航栏右边距
        this.innerRight = windowWidth - rect.left;
        console.log('%c [this.innerRight]: ', 'color:#1989fa;', this.innerRight);
        // 胶囊距离右侧
        this.menuButtonRight = windowWidth - rect.right;
        console.log('%c [this.menuButtonRight]: ', 'color:#1989fa;', this.menuButtonRight);
        // 胶囊宽度
        this.menuButtonWidth = rect.width;
        console.log('%c [this.menuButtonWidth]: ', 'color:#1989fa;', this.menuButtonWidth);
      } catch (e) {
        console.log('%c [uni.getSystemInfoSync error]: ', 'color:#1989fa;', e);
        throw e;
      }
    },
  },
  created() {
    this.getLayoutInfo();
  },
};
</script>

<style lang="scss">
.navigation-bar {
  overflow: hidden;
}
.navigation-bar-placeholder {
  position: relative;
  box-sizing: border-box;
  transition: opacity 0.5s;
}

.navigation-bar-inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  //background-color: #dd524d;
}

.navigation-bar-inner .navigation-bar-left {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: none;
  //background-color: #999999;
}
.navigation-bar-inner .navigation-bar-center {
  position: relative;
  height: 100%;
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  //background-color: #4cd964;
}
</style>
