<template>
  <slot>
    <view :style="{
      position: 'relative',
      height: `${height}px`,
      width: '100%',
      backgroundColor: themeContext.resolveThemeColor(props.backgroundColor),
    }">
      <slot name="background" />
      <slot v-if="extendsBackgroundColorHeight > 0" name="extendsBackground">
        <view class="ana-extends-view" :style="{
          top: -extendsBackgroundColorHeight,
          height: extendsBackgroundColorHeight,
          backgroundColor: themeContext.resolveThemeColor(props.backgroundColor),
        }" />
      </slot>
    </view>
  </slot>
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';

const systemInfo = uni.getSystemInfoSync();
const height = systemInfo.statusBarHeight || 0;

const themeContext = useTheme();

export interface StatusBarSpaceProps {
  /**
   * 背景颜色
   */
  backgroundColor?: string;
  /**
   * 上方额外的背景颜色区域高度（dp），通常用于scrollview弹性下拉
   * @default 0
   */
  extendsBackgroundColorHeight?: number;
  /**
   * 是否包括状态栏高度
   * @default true
   */
  includeStatus?: boolean;
  /**
   * 是否包括标题栏高度
   * @default false
   */
  includeHeader?: boolean;
  /**
   * 自定义标题栏高度
   * @default 0
   */
  headerHeight?: number;
}

const props = withDefaults(defineProps<StatusBarSpaceProps>(), {
  backgroundColor: 'white',
  extendsBackgroundColorHeight: 0,
  includeStatus: true,
  includeHeader: false,
  headerHeight: 0,
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  }
})
</script>

<style>
.nana-extends-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
</style>