<template>
	<view class="fe-page-bar" :class="{ 'fe-page-bar--fixed': fixed }">
		<view class="fe-page-bar__inner">
			<view class="fe-page-bar__left">
				<slot name="left" />
				<slot name="title"><text class="fe-page-bar__title">{{ title }}</text></slot>
			</view>
			<view class="fe-page-bar__actions">
				<slot name="actions" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'FePageBar',
	props: {
		title: { type: String, default: '' },
		fixed: { type: Boolean, default: false }
	}
}
</script>

<style lang="scss" scoped>
.fe-page-bar {
	background: #ffffff;
	border-bottom: 1rpx solid $fe-border-light;
	box-sizing: border-box;
	flex-shrink: 0;
}

/* 原生导航栏下方：页面内容区 top:0 即紧贴系统顶栏 */
.fe-page-bar--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

.fe-page-bar__inner {
	height: $fe-h-page-bar;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28rpx;
	box-sizing: border-box;
}

.fe-page-bar__left {
	display: flex;
	align-items: center;
	gap: 16rpx;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.fe-page-bar__title {
	font-weight: 700;
	font-size: 34rpx;
	color: $fe-foreground;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

.fe-page-bar__actions {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 4rpx;
	flex-shrink: 0;
}
</style>
