<template>
	<view class="service-page-header" :style="headerStyle">
		<view class="service-page-header-inner">
			<view class="service-page-back" @click="goBack">
				<text class="service-page-back-icon">＜</text>
			</view>
			<text class="service-page-title">{{ title }}</text>
			<view class="service-page-right-placeholder"></view>
		</view>
	</view>
</template>

<script setup lang="uts">
import { computed, ref } from 'vue'

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

const statusBarHeight = ref(0)

try {
	const windowInfo = uni.getWindowInfo()
	statusBarHeight.value = windowInfo.statusBarHeight
} catch (error) {
	statusBarHeight.value = 20
}

const headerStyle = computed((): string => {
	return 'padding-top:' + statusBarHeight.value + 'px;'
})

function goBack() {
	let pageCount = 0
	try {
		pageCount = getCurrentPages().length
	} catch (error) {
		pageCount = 0
	}

	if (pageCount > 1) {
		uni.navigateBack()
		return
	}

	if (props.fallbackUrl == '') {
		uni.showToast({ title: '暂无可返回页面', icon: 'none' })
		return
	}

	if (props.fallbackUrl.indexOf('/pages/main/') == 0) {
		uni.switchTab({ url: props.fallbackUrl })
		return
	}

	if (
		props.fallbackUrl == '/pages/mall/delivery/home/index' ||
		props.fallbackUrl == '/pages/mall/delivery/orders/index' ||
		props.fallbackUrl == '/pages/mall/delivery/messages/index' ||
		props.fallbackUrl == '/pages/mall/delivery/profile/index'
	) {
		uni.switchTab({ url: props.fallbackUrl })
		return
	}

	uni.redirectTo({ url: props.fallbackUrl })
}
</script>

<style scoped>
.service-page-header {
	background: #f3f7f9;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-bottom: 16rpx;
	box-sizing: border-box;
}

.service-page-header-inner {
	height: 88rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.service-page-back {
	min-width: 88rpx;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.service-page-back-icon {
	font-size: 52rpx;
	line-height: 1;
	color: #16324f;
}

.service-page-title {
	flex: 1;
	font-size: 34rpx;
	font-weight: 700;
	color: #16324f;
	text-align: center;
}

.service-page-right-placeholder {
	min-width: 88rpx;
	height: 88rpx;
}
</style>
