<template>
	<view class="nav-header">
		<uni-nav-bar :color="color" :backgroundColor="backgroundColor" :fixed="fixed" :statusBar="statusBar"
			:border="border">
			<template #left>
				<view v-if="showBack" class="nav-header__back" @click="goBack">
					<uni-icons :color="color" type="left" size="20" />
				</view>
			</template>
			<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
				{{ title }}
			</view>
		</uni-nav-bar>
	</view>
</template>

<script>
export default {
	name: 'NavHeader',
	props: {
		// 标题文字
		title: {
			type: String,
			default: ''
		},
		// 是否显示返回按钮
		showBack: {
			type: Boolean,
			default: false
		},
		// 返回页面路径，不传则返回上一页
		backUrl: {
			type: String,
			default: ''
		},
		// 文字颜色
		color: {
			type: String,
			default: '#000000'
		},
		// 背景颜色
		backgroundColor: {
			type: String,
			default: 'transparent'
		},
		// 是否固定在顶部
		fixed: {
			type: Boolean,
			default: true
		},
		// 是否包含状态栏
		statusBar: {
			type: Boolean,
			default: true
		},
		// 是否显示底部边框
		border: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		// 返回页面
		goBack() {
			if (this.backUrl) {
				// 如果指定了返回页面路径，则跳转到指定页面
				uni.redirectTo({
					url: this.backUrl,
					success: () => {

					},
					fail: (err) => {
						console.log('返回页面失败', err);
						uni.switchTab({
							url: this.backUrl,
							success: () => {

							},
							fail: (err) => {
								console.log('返回页面失败1', err);
							}
						});
					}
				});

			} else {
				// 默认返回上一页
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
}
</script>

<style lang="scss">
.nav-header {
	&__back {
		display: flex;
		align-items: center;
		height: 44px;
		padding-left: 10px;
	}
}
</style>