<template>
  <view class="nav-bar_container">
    <view class="nav-bar" :style="[offsetStyle]">
      <view class="nav-bar--wrapper">
        <view v-if="leftBtns" class="nav-bar_left" :style="[leftStyle]">
          <view
            v-for="(item, index) in leftBtns"
            :key="index"
            class="nav-bar_left-item"
            @click="clickLeftBtn(index, item)"
          >
            <i :class="['iconfont', 'icon-' + item.icon]" />
          </view>
        </view>
        <view class="nav-bar_title">
          <text>{{ title }}</text>
        </view>
        <view class="nav-bar_cube" :style="[cubeStyle]" />
      </view>
    </view>
  </view>
</template>
<script>
/**
 * NavBar 自定义标题栏实现
 * @description 主要用户标题栏为custom时，效果实现，滚动显示，回退
 * ! 需要注意，在自定义组件模式下，组件不存在onPageScroll这个声明周期，此组件通过监听props实现
 */
const CLICK_LEFT_EVENT = "leftClick"; // 左侧按钮点击事件

export default {
  name: "NavBar",
  props: {
    // 标题栏背景色
    bgColor: {
      type: String,
      default: "#ffffff"
    },
    // 标题内容
    title: {
      type: String,
      default: "标题"
    },
    // 标题颜色
    titleColor: {
      type: String,
      default: "#000"
    },
    // 背景展示方式, none - 透明，solid - 不透明，scroll - 滚动显示
    bgStatus: {
      type: String,
      default: "scroll"
    },
    position: {
      type: String,
      default: "fixed"
    },
    // 顶部偏移量
    offset: {
      type: Number,
      default: 0
    },
    // 滚动条高度
    scrollTop: {
      type: Number,
      default: 0
    },
    // 状态栏是否占位
    statusBar: {
      type: Boolean,
      default: true
    },
    // 左侧按钮组，默认显示返回，false不展示，scroll状态下会添加圆形白色背景
    leftBtns: {
      type: [Array, Boolean],
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      statusBarHeight: 50,
      cubeInfo: {},
      navbarHeight: 70
    };
  },
  computed: {
    // 标题栏样式
    offsetStyle() {
      const {
        statusBarHeight,
        offset,
        bgStatus,
        bgColor,
        scrollTop,
        cubeInfo,
        navbarHeight,
        statusBar
      } = this;
      this.$emit("updatePadding", navbarHeight + (statusBar ? statusBarHeight : 0));
      return {
        boxSizing: "content-box",
        marginTop: offset + "px",
        padding: `${(statusBar ? statusBarHeight : 0) + "px"} ${cubeInfo.marginRight + "px"} 0`,
        height: navbarHeight + "px",
        // eslint-disable-next-line
        color: bgStatus == "scroll" && scrollTop <= 0 ? this.titleColor : '',
        backgroundColor: bgStatus == "scroll" && scrollTop <= 0 ? "transparent" : bgColor
      };
    },
    cubeStyle() {
      return {
        width: this.cubeInfo.width + "px"
      };
    },
    leftStyle() {
      return {
        height: this.cubeInfo.height + "px",
        lineHeight: this.cubeInfo.height + "px"
      };
    }
  },
  watch: {
    // !监听滚动条高度
    scrollTop: {
      immediate: true,
      handler() {
        if (this.bgStatus != "scroll") return;
      }
    }
  },
  mounted() {
    this.getNavBarHeight();
  },
  methods: {
    clickLeftBtn(index, item) {
      this.$emit(CLICK_LEFT_EVENT, { index, item });
    },
    getNavBarHeight() {
      const sysInfo = uni.getSystemInfoSync();
      const cubeInfo = uni.getMenuButtonBoundingClientRect();
      this.statusBarHeight = sysInfo.statusBarHeight;
      this.navbarHeight = (cubeInfo.top - sysInfo.statusBarHeight) * 2 + cubeInfo.height;
      cubeInfo.marginRight = sysInfo.windowWidth - cubeInfo.right;
      this.cubeInfo = cubeInfo;
    }
  }
};
</script>
<style lang="scss">
@mixin border-line {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border: 1rpx solid rgba(151, 151, 151, 0.2);
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
}
.nav-bar_container {
  width: 100%;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
}
.nav-bar {
  // transition: all 0.2s linear;
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  &_left {
    display: flex;
    align-items: center;
    border-radius: 100rpx;
    &-item {
      width: 86rpx;
      text-align: center;

      &:last-child {
        &::before {
          display: none;
        }
      }
    }
    i {
      font-size: 34rpx;
      position: relative;
      z-index: 2;
    }
  }
  &--wrapper {
    position: relative;
    flex: 1;
  }
  &_title {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    text-align: center;
    margin: 0 auto;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &_cube {
    background-color: rgba(251, 255, 0, 0.384);
  }
}
</style>
