<template>
	<view :style="[style]" class="el-status-bar">
		<slot />
	</view>
</template>

<script setup>
	import { computed } from "vue";
	
	const props = defineProps({
		bgColor: {
		    type: String,
		    default: 'transparent'
		},
		opacity: {
			type: [String,Number],
			default: 1
		},
		customStyle: {
			type: [Object, String],
			default: () => {
				return ''
			}
		}
	});
	
	const style = computed(() => {
		const system = uni.getSystemInfoSync();
		
		return uni.$e.utils.deepMerge({
			height: system.statusBarHeight + 'px',
			background: props.bgColor,
			opacity: props.opacity
		},uni.$e.style.addStyle(props.customStyle));
	})
	
</script>

<style lang="scss" scoped>
	.el-status-bar {
		width: 100%;
	}
</style>