<template>
	<view class="page-container" :style="{ backgroundColor: backgroundColor }">
		<nav-header :title="navTitle" :showBack="showBack" :backUrl="backUrl" :color="navColor"
			:backgroundColor="navBackgroundColor" :fixed="fixed" :statusBar="statusBar" :shadow="shadow" :dark="dark"
			:height="navHeight" :leftText="leftText" :rightText="rightText" :leftIcon="showBack ? 'back' : ''"
			@clickLeft="onClickLeft" @clickRight="onClickRight" @clickTitle="onClickTitle">
			<template #right>
				<slot name="nav-right"></slot>
				<view v-if="showShare">
					<image src="https://image.zfunbox.cn/app/share.png" @click.stop="appShare"
						style="width:24px;height:24px;">
					</image>
				</view>
			</template>
		</nav-header>
		<view class="page-container__content" :style="contentStyle">
			<view class="page-container__divider" v-if="divider"></view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
import NavHeader from '@/components/nav-header/nav-header.vue'

export default {
	name: 'PageContainer',
	components: {
		NavHeader
	},
	emits: ['clickLeft', 'clickRight', 'clickTitle', 'appShare'],
	props: {
		// 标题文字
		title: {
			type: String,
			default: ''
		},
		// 是否暗黑模式
		dark: {
			type: Boolean,
			default: false
		},
		// 是否显示返回按钮
		showBack: {
			type: Boolean,
			default: false
		},
		// 左侧文字
		leftText: {
			type: String,
			default: ''
		},
		// 右侧文字
		rightText: {
			type: String,
			default: ''
		},
		// 返回页面路径，不传则返回上一页
		backUrl: {
			type: String,
			default: ''
		},
		// 导航栏文字颜色
		navColor: {
			type: String,
			default: '#000000'
		},
		// 导航栏背景颜色
		navBackgroundColor: {
			type: String,
			default: '#ffffff'
		},
		// 页面背景颜色
		backgroundColor: {
			type: String,
			default: '#FFFFFF'
		},
		// 是否固定导航栏在顶部
		fixed: {
			type: Boolean,
			default: true
		},
		// 是否包含状态栏
		statusBar: {
			type: Boolean,
			default: true
		},
		// 是否显示阴影
		shadow: {
			type: Boolean,
			default: false
		},
		// 是否显示分隔线
		divider: {
			type: Boolean,
			default: true
		},
		// 导航栏高度
		navHeight: {
			type: [Number, String],
			default: 44
		},
		// 底部内边距
		paddingBottom: {
			type: String,
			default: '0px'
		},
		showShare: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			statusBarHeight: 20, // 默认状态栏高度
			navbarHeight: 44, // 导航栏高度
			navTitle: '' // 导航栏标题，避免直接使用prop
		}
	},
	computed: {

		// 内容区样式
		contentStyle() {
			let style = {
				'padding-bottom': this.paddingBottom
			};

			// 如果导航栏是固定定位，则需要为内容区添加顶部内边距
			// if (this.fixed) {
			// 	let paddingTop = this.statusBar ? (this.statusBarHeight + this.navbarHeight) : this.navbarHeight;
			// 	style['padding-top'] = paddingTop + 'px';
			// }

			return style;
		}
	},
	created() {
		this.getStatusBarHeight();
		// 转换导航栏高度
		this.navbarHeight = typeof this.navHeight === 'number' ? this.navHeight : parseInt(this.navHeight);
		// 初始化导航栏标题
		this.navTitle = this.title;
	},
	watch: {
		// 监听title属性变化
		title(newVal) {
			this.navTitle = newVal;
		}
	},
	methods: {
		appShare() {
			this.$emit('appShare');
		},
		// 获取状态栏高度
		getStatusBarHeight() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight || 20;
				}
			});
		},
		// 点击左侧
		onClickLeft() {
			this.$emit('clickLeft');
		},
		// 点击右侧
		onClickRight() {
			this.$emit('clickRight');
		},
		// 点击标题
		onClickTitle() {
			this.$emit('clickTitle');
		},
		// 设置标题的公共方法（供父组件调用）
		setNavTitle(title) {
			this.navTitle = title;
		}
	}
}
</script>

<style lang="scss">
.page-container {
	width: 100vw;
	min-height: 100vh;
	box-sizing: border-box;

	&__content {
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	&__divider {
		width: 100%;
		height: 4rpx;
		background-color: #e5e5e5;
		/* 使用较浅的灰色 */
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		margin-bottom: 10rpx;
		/* 在分割线下方添加一些间距 */
	}
}
</style>