<script setup>
	/**
	 * 顶部导航栏
	 * @property {String} title 导航栏标题
	 * @property {String} bgColor 背景颜色 默认#fff
	 */
	// 顶部状态栏
	import statusBar from '@/components/header/statusBar.vue'

	const props = defineProps({
		// 页面标题
		title: {
			type: String,
		},
		// 背景颜色
		bgColor: {
			type: String,
			default: '#fff'
		},
		// 前景色
		color: {
			type: String,
			default: '#333'
		},
		// 模式 rows左中右 flex左边返回 右边自定义
		mode: {
			type: String,
			default: 'rows',
		},
	})

	/**
	 * 返回
	 */
	function handleBack() {
		const pages = getCurrentPages()

		// 如果页面栈数量大于1
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
</script>

<template>
	<!-- 顶部盒子 -->
	<view class="apex pf t0 l0 r0" :style="{
			background: bgColor,
		}">
		<statusBar />

		<template v-if="mode == 'rows'">
			<view class="head rows plr10">
				<view class="left col w180">
					<slot name="left">
						<uni-icons type="left" :color="color" size="48rpx" @click="handleBack" />
					</slot>
				</view>

				<view class="tac">
					<slot name="content">
						<text class="f32" :style="{color: color,}">{{title}}</text>
					</slot>
				</view>

				<view class="right col df jcr w180">
					<slot name="right"></slot>
				</view>
			</view>
		</template>
		<template v-else-if="mode == 'flex'">
			<view class="head rows plr10">
				<view class="left col mr10">
					<slot name="left">
						<uni-icons type="left" :color="color" size="48rpx" @click="handleBack" />
					</slot>
				</view>

				<slot name="content">
					<!--  -->
				</slot>
			</view>
		</template>
	</view>

	<!-- 幽灵盒子 -->
	<view class="ghost">
		<statusBar />
		<view class="head"></view>
	</view>
</template>

<style lang="scss" scoped>
	.apex {
		z-index: 10;
		transition: .3s;
	}
</style>