<template>
	<common-layout :bgColor="bgColor">
		<view class="mobile-sub-layout" :style="{ paddingTop: (screen.statusBarHeight + 50) + 'px' }">
			<MobileSubHeader
				:title="title"
				:headBgColor="headBgColor ? headBgColor : themeStore.theme.bgColor"
			>
				<template #right>
					<view>
						<slot name="header-right"></slot>
					</view>
				</template>
			</MobileSubHeader>
			<slot></slot>
		</view>
	</common-layout>
</template>

<script setup>
	import MobileSubHeader from '@/components/header/MobileSubHeader'
	import { useAppStore } from '@/store/useAppStore'
import { useThemeStore } from '@/store/useThemeStore';
	const themeStore = useThemeStore()
	const screen = uni.getWindowInfo()
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		lineHeight: {
			type: Number,
			default: 4
		},
		bgColor: {
			type: String,
			default: 'transparent'
		},
		headBgColor: {
			type: String,
			default: ''
		}
	})
</script>

<style lang="scss" scoped>
	.mobile-sub-layout {
		position: relative;
	}
</style>