<template>
  <view class="nav-bar_container">
    <view class="nav-bar_statusBar" :style="[statusBarStyle]" />
    <view class="nav-bar_tween" :style="[tweenStyle]" />
    <view class="nav-bar" :style="[offsetStyle]">
      <view v-if="leftBtns" class="nav-bar_left" :style="[leftStyle]">
        <slot name="left">
          <view
            v-for="(item, index) in leftBtns"
            :key="index"
            class="nav-bar_left-item"
            @click="clickLeftBtn(index, item)"
          >
            <i :class="['iconfont', 'icon-' + item.icon]" />
            <text v-if="item.title">{{ item.title }}</text>
          </view>
        </slot>
      </view>
      <view class="nav-bar_title" :style="{ color: titleColor }">
        <view v-if="scrollTop > 0 || topShowTitle || bgStatus === 'solid'">
          <slot name="title">
            <text v-if="!searchBar">{{ title }}</text>
            <view v-else class="search-header" :style="[leftStyle]" @click="navToSearch">
              <text class="iconfont icon-search Sh-icon" />
              <view class="Sh-placeholder">搜索商品</view>
            </view>
          </slot>
        </view>
      </view>
      <view class="nav-bar_cube" :style="[cubeStyle]" />
    </view>
  </view>
</template>
<script>
import { saTrackEvent } from "@/utils/sa.js";
/**
 * 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
    },
    // 滚动状态下，顶部是否显示title
    topShowTitle: {
      type: Boolean,
      default: false
    },
    // 滚动条高度
    scrollTop: {
      type: Number,
      default: 0
    },
    // 状态栏是否占位
    statusBar: {
      type: Boolean,
      default: false
    },
    // 搜索框
    searchBar: {
      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
      } = this;
      let mgRight = cubeInfo.marginRight;
      // #ifdef MP-BAIDU
      mgRight -= 5;
      // #endif
      return {
        marginTop: statusBarHeight + offset + "px",
        padding: `0 ${mgRight + "px"}`,
        height: navbarHeight + "px",
        // eslint-disable-next-line
        backgroundColor: bgStatus == 'solid' ? bgColor : bgStatus == "none" ? "transparent" : bgStatus == "scroll" && scrollTop == 0 ? "transparent" : bgColor
      };
    },
    // 页面顶部补间样式，防止跳动
    tweenStyle() {
      const {
        statusBarHeight,
        offset,
        bgStatus,
        bgColor,
        scrollTop,
        statusBar,
        navbarHeight
      } = this;
      // eslint-disable-next-line
      let _height = offset + (bgStatus == "none" ? 0 : bgStatus == "scroll" && scrollTop == 0 ? 0 : navbarHeight + (!statusBar ? statusBarHeight : 0));
      return {
        height: _height + "px",
        backgroundColor: bgStatus !== "scroll" ? bgColor : "transparent",
        // eslint-disable-next-line
        position: bgStatus == "none" ? "fixed" : bgStatus == "scroll" && scrollTop > 0 ? "fixed" : "relative"
      };
    },
    // 状态栏样式
    statusBarStyle() {
      const { statusBarHeight, bgColor, statusBar } = this;
      return {
        height: (statusBar ? statusBarHeight : 0) + "px",
        backgroundColor: 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;
      }
    }
  },
  created() {
    this.getNavBarHeight();
  },
  // onPageScroll(e) {
  //   this.scrollTop = e.scrollTop;
  //   console.log(e);
  // },
  methods: {
    clickLeftBtn(index, item) {
      this.$emit(CLICK_LEFT_EVENT, { index, item });
    },
    navToSearch() {
      saTrackEvent("PD_YXMMAEC_UserClickSearchTrigger", {});
      uni.navigateTo({
        url: `/pages/search/index?keyWords=`
      });
    },
    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;
      this.$emit("getHeight", this.statusBarHeight + this.navbarHeight);
    }
  }
};
</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 {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  // transition: all 0.2s linear;
  display: flex;
  align-items: center;
  &_tween {
    width: 100%;
    z-index: 999999;
  }
  &_left {
    display: flex;
    align-items: center;
    border: 1rpx solid rgba(151, 151, 151, 0.2);
    border-radius: 100rpx;
    &-item {
      width: 86rpx;
      text-align: center;
      position: relative;
      text-align: center;
      &::before {
        content: " ";
        display: block;
        position: absolute;
        top: 12rpx;
        right: 0;
        height: 37rpx;
        width: 1rpx;
        background-color: rgba(0, 0, 0, 0.2);
      }

      &:last-child {
        &::before {
          display: none;
        }
      }
      /* #ifdef MP-BAIDU */
      .icon-arrow-left {
        color: #fff;
      }
      &:first-child {
        width: 70rpx;
      }
      /* #endif */
    }
    i {
      font-size: 34rpx;
      position: relative;
      z-index: 2;
    }
  }
  &_title {
    flex: 1;
    text-align: center;
    padding: 4rpx 16rpx;
    margin: 0 auto;
    font-size: 32rpx;
    font-weight: 600;
    /* #ifdef MP-ALIPAY */
    padding-right: 45px;
    /* #endif */
  }
  &_cube {
    background-color: rgba(251, 255, 0, 0.384);
  }
}
.search-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12rpx;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 100rpx;
  border: 1rpx solid rgba(151, 151, 151, 0.2);
  .Sh {
    &-icon {
      font-size: 32rpx;
      color: #c8c9cc;
      margin-right: 10rpx;
    }
    &-placeholder {
      font-size: 28rpx;
      font-weight: 400;
      line-height: 40rpx;
      color: #c8c9cc;
    }
  }
}
</style>
