<template>
  <view
    class="up-navigation-bar"
    :class="{
      'up-bar-line': opacity > 0.85 && splitLine,
      'up-navbar-fixed': isFixed,
      'up-backdrop__filter': backdropFilter && dropDownOpacity > 0
    }"
    :style="{
      height: height + 'px',
      background: isOpacity ? `rgba(${background},${opacity})` : background,
      opacity: dropDownOpacity,
      zIndex: isFixed ? zIndex : 'auto'
    }"
  >
    <view class="up-status-bar" :style="{ height: statusBarHeight + 'px' }" v-if="isImmersive"></view>
    <view
      class="up-navigation_bar-title"
      :style="{
        opacity: transparent || opacity >= maxOpacity ? 1 : opacity,
        color: color,
        paddingTop: top - statusBarHeight + 'px'
      }"
      v-if="title && !isCustom"
    >
      {{ title }}
    </view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'tuiNavigationBar',
  emits: ['init', 'change'],
  props: {
    //NavigationBar标题
    title: {
      type: String,
      default: ''
    },
    //NavigationBar标题颜色
    color: {
      type: String,
      default: '#333'
    },
    //NavigationBar背景颜色,不支持rgb
    backgroundColor: {
      type: String,
      default: '#fff'
    },
    //是否需要分割线
    splitLine: {
      type: Boolean,
      default: false
    },
    //是否设置不透明度
    isOpacity: {
      type: Boolean,
      default: true
    },
    //不透明度最大值 0-1
    maxOpacity: {
      type: [Number, String],
      default: 1
    },
    //背景透明 【设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效】
    transparent: {
      type: Boolean,
      default: false
    },
    //滚动条滚动距离
    scrollTop: {
      type: [Number, String],
      default: 0
    },
    /*
				 isOpacity 为true时生效
				 opacity=scrollTop /windowWidth * scrollRatio
				*/
    scrollRatio: {
      type: [Number, String],
      default: 0.3
    },
    //是否自定义header内容
    isCustom: {
      type: Boolean,
      default: false
    },
    //是否沉浸式
    isImmersive: {
      type: Boolean,
      default: true
    },
    isFixed: {
      type: Boolean,
      default: true
    },
    //是否开启高斯模糊效果[仅在支持的浏览器有效果]
    backdropFilter: {
      type: Boolean,
      default: false
    },
    //下拉隐藏NavigationBar，主要针对有回弹效果ios端
    dropDownHide: {
      type: Boolean,
      default: false
    },
    //z-index设置
    zIndex: {
      type: [Number, String],
      default: 996
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      if (this.isOpacity && !this.transparent) {
        this.opacityChange();
      }
    },
    backgroundColor(val) {
      if (val) {
        if (this.isOpacity) {
          this.background = this.hexToRgb(val);
        } else {
          this.background = this.transparent ? 'rgba(0, 0, 0, 0)' : val;
        }
      }
    }
  },
  data() {
    return {
      width: 375, //header宽度
      left: 375, //小程序端 左侧距胶囊按钮距离
      height: 44, //header高度
      top: 0,
      scrollH: 1, //滚动总高度,计算opacity
      opacity: 1, //0-1
      statusBarHeight: 0, //状态栏高度
      background: '255,255,255', //header背景色
      dropDownOpacity: 1
    };
  },
  created() {
    this.dropDownOpacity = this.backdropFilter && 0;
    this.opacity = this.isOpacity || this.transparent ? 0 : this.maxOpacity;
    if (this.isOpacity) {
      this.background = this.hexToRgb(this.backgroundColor);
    } else {
      this.background = this.transparent ? 'rgba(0, 0, 0, 0)' : this.backgroundColor;
    }
    let obj = {};
    // #ifdef MP-WEIXIN
    obj = wx.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-BAIDU
    obj = swan.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-ALIPAY
    my.hideAddToDesktopMenu();
    // #endif
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight;
        this.width = res.windowWidth;
        this.left = obj.left || res.windowWidth;
        if (this.isImmersive) {
          this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
        }
        this.scrollH = res.windowWidth * this.scrollRatio;
        this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
        this.$emit('init', {
          width: this.width,
          height: this.height,
          left: this.left,
          top: this.top,
          statusBarHeight: this.statusBarHeight,
          opacity: this.opacity,
          windowHeight: res.windowHeight
        });
      }
    });
  },
  methods: {
    hexToRgb(hex) {
      let rgb = '255,255,255';
      if (hex && ~hex.indexOf('#')) {
        if (hex.length === 4) {
          let text = hex.substring(1, 4);
          hex = '#' + text + text;
        }
        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        if (result) {
          rgb = `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}`;
        }
      }
      return rgb;
    },
    opacityChange() {
      if (this.dropDownHide) {
        if (this.scrollTop < 0) {
          if (this.dropDownOpacity > 0) {
            this.dropDownOpacity = 1 - Math.abs(this.scrollTop) / 30;
          }
        } else {
          this.dropDownOpacity = 1;
        }
      }

      let scroll = this.scrollTop <= 1 ? 0 : this.scrollTop;
      let opacity = scroll / this.scrollH;
      if ((this.opacity >= this.maxOpacity && opacity >= this.maxOpacity) || (this.opacity == 0 && opacity == 0)) {
        return;
      }
      this.opacity = opacity > this.maxOpacity ? this.maxOpacity : opacity;
      if (this.backdropFilter) {
        this.dropDownOpacity = this.opacity >= this.maxOpacity ? 1 : this.opacity;
      }
      this.$emit('change', {
        opacity: this.opacity
      });
    }
  }
};
</script>

<style scoped>
.up-navigation-bar {
  width: 100%;
  transition: opacity 0.4s;
}

.up-backdrop__filter {
  /* Safari for macOS & iOS */
  -webkit-backdrop-filter: blur(15px);
  /* Google Chrome */
  backdrop-filter: blur(15px);
}

.up-navbar-fixed {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateZ(0);
}

.up-status-bar {
  width: 100%;
}

.up-navigation_bar-title {
  width: 100%;
  font-size: 17px;
  line-height: 17px;
  /* #ifndef APP-PLUS */
  font-weight: 500;
  /* #endif */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.up-bar-line::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}
</style>
