<template>
	<common-layout :bgColor="_bgColor">
		<view class="mobile-sub-layout" :style="{ 'padding-top': appStore.headerStyle.height + 'px' }">
			<MobileHeader
				:title="title"
				:lineHeight="lineHeight"
			>
				<template #right>
					<view>
						<slot name="header-right"></slot>
					</view>
				</template>
			</MobileHeader>
			<slot></slot>
		</view>
	</common-layout>
</template>

<script setup>

	import { computed } from 'vue'
	import MobileHeader from '@/components/header/MobileHeader'
	import { useAppStore } from '@/store/useAppStore'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const appStore = useAppStore()
	const themeStore = useThemeStore()
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		lineHeight: {
			type: Number,
			default: 0
		},
		bgColor: {
			type: String,
			default: ''
		}
	})
	const _bgColor = computed(() => {
		if(props.bgColor) {
			return props.bgColor
		}
		return themeStore.theme.bgColor
	})
</script>

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