<template>
  <div ref="statusbarElement" class="app-statusbar">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import plus from '@/utils/h5plus'

const emit = defineEmits(['ready']);

const statusbarElement = ref<HTMLElement>();

// 组件挂载完成
onMounted(() => {
  const el = statusbarElement.value;

  plus.getStatusBarHeight((height) => {
    el?.style.setProperty('padding-top', height + 'px');
  })

  nextTick(() => emit('ready', el));
})
</script>