<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 flex-center" @click.stop="handleBackClick">
				<theme-image src="@/static/icon-back-white.png" mode="aspectFit" style="width: 40px; height: 20px" />
			</div>
			<div class="middle title">
				<div v-if="title">{{ title }}</div>
				<slot name="title"></slot>
			</div>
			<div class="right">
				<slot name="right"></slot>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, reactive, ref, computed } from 'vue'
	import { useAppStore } from '@/store/useAppStore.js'
	import { useThemeStore } from '@/store/useThemeStore'
	import { exitFullscreen } from '@/module/fullscreen/fullscreen-handler'
	
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	const props = defineProps({
		title: {
			type: String,
			default: ''
		}
	})
	const emit = defineEmits(['back'])

	const handleBackClick = () => {
		emit('back')
		uni.navigateBack({
			delta: 1,
			fail() {
				uni.reLaunch({
					url: '/pages/home/Home'
				})
			}
		})
		// const pages = getCurrentPages()
		
		// if (pages.length > 2) {
		
		// 	const page = pages[pages.length - 2]
		// 	const path = page.$page.fullPath
			
		// 	uni.redirectTo({
		// 		url: path
		// 	})

		// 	// uni.navigateBack()

		// } else {
		// 	uni.reLaunch({
		// 		url: '/pages/home/Home'
		// 	})
		// 	// uni.switchTab({
		// 	// 	url: '/pages/home/Home'
		// 	// })
		// }
		exitFullscreen()
	}
</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: 18px;
			color: #FFFFFF;
		}
		
		.left {
			width: 40px;
			flex-shrink: 0;
			padding-left: 20rpx;
		}
		
		.right {
			min-width: 40px;
			flex-shrink: 0;
		}
	}
</style>