<template>
  <view
    :class="{'box': isShow}"
    :style="{
      marginTop: navbarRect.height + navbarRect.top + 'px',
      height: navbarRect.safeHeight + 'px',
    }"
  >
    <slot></slot>
  </view>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    isShow: boolean;
  }>(),
  {
    isShow: false
  }
);
const navbarRect = reactive({
  height: 32,
  top: 28,
  safeHeight: 500,
});
const getSafeHeight = () => {
  // #ifdef APP-PLUS || MP-WEIXIN
  uni.getSystemInfo({
    success: (res) => {
      navbarRect.safeHeight =
        res.windowHeight -
        uni.upx2px(80) -
        navbarRect.height -
        navbarRect.top -
        40 -
        17;
    },
  });
  // #endif
};
onMounted(() => {
  // #ifdef APP-PLUS || MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  navbarRect.height = menuButtonInfo.height;
  navbarRect.top = menuButtonInfo.top;
  getSafeHeight();
  // #endif
});
</script>
<style lang="scss">
.box {
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  margin: 24.36rpx 25.64rpx;
  padding: 25rpx 0rpx;
}
</style>
