<template>
	<view class="header">
		<view class="header-content">
			<view class="left" @click="goBack">
				<u-icon name="arrow-left" color="#fff" size="36rpx"></u-icon>
			</view>
			<view class="center">
				<text class="title">{{ title }}</text>
			</view>
			<view class="right">
				<!-- 右侧占位 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '标题'
			}
		},
		methods: {
			goBack() {
				let  pages = getCurrentPages(); // 获取页面栈
				console.log("-----pages",pages)
				if (pages.length > 1) {
					// 如果页面栈深度大于 1，说明可以返回上一页
					uni.navigateBack({
						delta: 1
					});
				} else {
					// 如果已经是首页，可以选择跳转到某个指定页面或不做任何操作
					uni.showToast({
						title: '已经是首页了',
						icon: 'none'
					});
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.header {
		background-color: transparent;
		/* 蓝色背景 */
		padding: 20rpx 30rpx;
		position: fixed;
		top: 90rpx;
		left: 0;
		right: 0;
		z-index: 999;

		.header-content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				display: flex;
				align-items: center;

				.back-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.center {
				flex: 2;
				text-align: center;

				.title {
					color: #2e2e2e;
					font-size: 36rpx;
					// font-weight: bold;
				}
			}

			.right {
				flex: 1;
				text-align: right;
			}
		}
	}
</style>