<template>
	<view class="service-page-shell">
		<view v-if="!hideHeader" class="service-page-fixed-header">
			<ServicePageHeader :title="title" :fallback-url="fallbackUrl"></ServicePageHeader>
		</view>
		<view v-if="hideHeader" class="service-page-safe-top" :style="{ height: safeTopHeight + 'px' }"></view>
		<view v-else class="service-page-header-placeholder" :style="{ height: headerHeight + 'px' }"></view>
		<scroll-view class="service-page-scroll" scroll-y="true">
			<view class="service-page-content">
				<slot></slot>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import ServicePageHeader from '@/components/homeService/ServicePageHeader.uvue'

const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	fallbackUrl: {
		type: String,
		default: ''
	},
	hideHeader: {
		type: Boolean,
		default: false
	}
})

const headerHeight = ref(116)
const safeTopHeight = ref(32)

try {
	const windowInfo = uni.getWindowInfo()
	const statusBar = windowInfo.statusBarHeight
	const unit = windowInfo.windowWidth / 750
	headerHeight.value = statusBar + Math.round(124 * unit)
	safeTopHeight.value = statusBar + Math.round(24 * unit)
} catch (error) {
	headerHeight.value = 116
	safeTopHeight.value = 32
}
</script>

<style scoped>
.service-page-shell {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	background: #f3f7f9;
	overflow: hidden;
}

.service-page-fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #f3f7f9;
}

.service-page-header-placeholder {
	width: 100%;
	flex-shrink: 0;
}

.service-page-safe-top {
	width: 100%;
	flex-shrink: 0;
}

.service-page-scroll {
	flex: 1;
	min-height: 0;
	width: 100%;
}

.service-page-content {
	padding: 24rpx;
	box-sizing: border-box;
}
</style>
