<style lang="less">
.component-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  .page-top-bar {
    position: relative;
    .title {
      position: absolute;
      width: 100%;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      color: #ffffff;
    }
    .icon {
      position: absolute;
      left: 32rpx;
      bottom: 0;
      width: 24rpx;
      height: 45rpx;
      .icon_home {
        width: 76rpx;
        height: 56rpx;
      }
      .icon_define {
        width: 24rpx;
        height: 45rpx;
      }
      &.white {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 32px;
        background: rgba(255, 255, 255, 0.596637);
        border: 0.5px solid rgba(151, 151, 151, 0.201002);
        box-sizing: border-box;
        border-radius: 25px;
        .icon_define {
          width: 8px;
          height: 16px;
        }
      }
    }
  }
}
</style>

<template>
  <div class="component-container"
       :style="{'padding-top': pageTopBarTop + 'px','padding-bottom': pageTopBarBottom + 'px', 'height': pageTopBarHeight + 'px', 'background-color': bgColor}">
    <div class="page-top-bar"
         :style="{height: pageTopBarHeight + 'px'}">
      <div class="title"
           :style="{'color': titleColor, height: pageTopBarHeight + 'px'}">
        <span v-show="title">{{title}}</span>
      </div>
      <div v-if="icon || iconType"
           class="icon"
           v-on:click="emitIconClick"
           :style="{bottom: bottom+'px'}"
           :class="{'white': iconBg === 'white'}">
        <block v-if="iconType == 'home'">
          <image class="icon_home"
                 src="{{h5StaticPath}}/static/icon_home.svg" />
        </block>
        <block v-else>
          <image class="icon_define"
                 src="{{icon}}" />
        </block>
      </div>
    </div>
  </div>
</template>

<script>
import wepy from '@wepy/core';
import config from '@/config';

wepy.component({
  props: {
    title: String,
    iconType: String,
    icon: String,
    // white
    iconBg: String,
    bgColor: {
      type: String,
      default: 'transparent'
    },
    titleColor: {
      type: String,
      default: '#fff'
    },
    pageTopBarBottom:{
      type: Number,
      default: 0
    },
    iconClickedEmitId: String
  },
  ready() {
    let menuButtonBoundingClientRect = wx.getMenuButtonBoundingClientRect();
    this.pageTopBarHeight = menuButtonBoundingClientRect.height;

    // 加上右上角胶囊按钮的边框2
    this.pageTopBarTop = menuButtonBoundingClientRect.top;
    if(!this.iconBg) {
      this.bottom = (this.pageTopBarHeight - 22) / 2
    }
  },
  data: {
    pageTopBarTop: 0,
    pageTopBarHeight: 48,
    bottom: 0,
    h5StaticPath: config.h5StaticPath,
  },
  methods: {
    emitIconClick(e) {
      if (this.iconClickedEmitId) {
        this.$emit(this.iconClickedEmitId);
      } else {
        wx.navigateBack();
      }
    }
  }
});
</script>