<template>
  <!-- header -->
  <view :style="{ backgroundColor, paddingTop: homeHeaderPaddingTop + 'px', height: homeHeaderMenuHeight + 'px' }" class="navigationBar">
    <uni-icons @click="back" class="navigationBarBack" size="24" type="left" :color="titleColor"></uni-icons>
    <view class="navigationBarTitle" :style="{ color: titleColor }">
      {{ title }}
    </view>
		<view class="navigationBarBackExtra">
			<slot name="extra"></slot?>
		</view>
  </view>
</template>

<script>
/* 计算标题位置 */
import {getWXStatusHeight} from "@/utils/utils";

export default {
	props: {
		backgroundColor: {
		  type: String,
		  default: '#317DFA'
		},
		title: String,
		titleColor: {
		  type: String,
		  default: '#fff'
		}
	},
	mounted() {
		// #ifdef MP
		const {barHeight, barTop, menuButtonLeft} = getWXStatusHeight()
		console.log('barHeight, barTop, menuButtonLeft: ',barHeight, barTop, menuButtonLeft);
		this.homeHeaderPaddingTop = barTop || 0
		this.homeHeaderMenuHeight = barHeight
		this.homeHeaderMenuLeft = menuButtonLeft - 6
		// #endif
	},
	data() {
		return {
			// #ifdef MP
			homeHeaderPaddingTop: 0,
			homeHeaderMenuHeight: 0,
			homeHeaderMenuLeft: 0,
			// #endif
			// #ifdef APP || H5
			homeHeaderPaddingTop: 20,
			homeHeaderMenuHeight: 50,
			homeHeaderMenuLeft: 0
			// #endif
		}
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1,
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.navigationBar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .navigationBarBack {
    position: absolute;
    left: 20rpx;
  }
		
	.navigationBarBackExtra {
		position: absolute;
		right: 20rpx;
	}
  .navigationBarTitle {
    font-size: 32rpx;
  }
}
</style>