<template>
	<view class="sf-padding-top88 PaddingTopB" :style="{paddingTop: PaddingTop, minHeight: minHeight}">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name:"PaddingTopB",
		watch: {
			otherHeight: {
				handler(newData){
					this.setOtherHeight(newData)
				},
				immediate: true
			}
		},
		props: {
			otherUnit: {
				type: String,
				default: 'rpx'
			},
			otherHeight: {
				type: [Number, String],
				default: 0
			},
			minHeight: {
				type: String,
				default: 'calc(100vh)'
			}
		},
		data() {
			return {
				PaddingTop: 0
			};
		},
		mounted() {
			
		},
		methods:{
			setOtherHeight(height, unit = 'rpx') {
				// #ifdef MP-WEIXIN
				let res = wx.getMenuButtonBoundingClientRect();
				// #endif
				let paddingTop = res.top
				let titleHeight = res.height + 10;
				
				this.PaddingTop = `calc(${paddingTop + titleHeight}px + ${height + this.otherUnit})`
				
				// this.PaddingTop = `calc(${uni.getSystemInfoSync().statusBarHeight}px + ${height}rpx + 88rpx + 5px)`
			}
		}
	}
</script>

<style lang="scss" scoped>
.sf-padding-top88{
	// position: fixed;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	z-index: 20;
}
.PaddingTopB{
	display: flex;
}
</style>