<template>
	<div class="mobile-sub-header-container" :style="{ height: appStore.headerStyle.height + 'px', 'background': themeStore.theme.bgColor }">
		<div class="mobile-state-bar" :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></div>
		<div class="mobile-header" :style="{ height: appStore.headerStyle.navigateBarHeight + 'px' }">
			<div class="left">
				<slot name="left"></slot>
			</div>
			<div class="middle title">
				<div v-if="title" :style="{ 'color': themeStore.theme.text.normal }">{{ title }}</div>
				<slot name="title"></slot>
			</div>
			<div class="right">
				<slot name="right"></slot>
			</div>
		</div>
		<!-- <div class="header-bottom-line" :style="{ 'border-bottom': `${lineHeight}px solid ${themeStore.theme.darkSeplineColor}`}"></div> -->
	</div>
</template>

<script setup>
	import { onMounted, reactive, ref, computed } from 'vue'
	import { useAppStore } from '@/store/useAppStore.js'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		lineHeight: {
			type: Number,
			default: 0
		}
	})

	const handleBackClick = () => {
		const pages = getCurrentPages()
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			// uni.reLaunch({
			// 	url: '/pages/home/Home'
			// })
			uni.switchTab({
				url: '/pages/home/Home'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.mobile-sub-header-container {
		background-color: #610606;
		width: 100%;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 98;
		
		.mobile-state-bar {
			
		}
	}
	
	.mobile-header {
		width: 100%;
		align-items: center;
		justify-content: space-between;
		display: flex;
		
		.title {
			font-size: 36rpx;
			// color: #FFFFFF;
		}
		
		.left {
			width: 150rpx;
			flex-shrink: 0;
			display: flex;
			padding-left: 20rpx;
		}
		
		.right {
			width: 150rpx;
			flex-shrink: 0;
			display: flex;
			justify-content: flex-end;
			padding-right: 30rpx;
		}
	}
</style>