<template>
	<view class="un-pages-container">
		<!-- 顶部导航栏 -->
		<uni-nav-bar v-if="showNavBar" :fixed="true" :background-color="navBarBgColor" :color="navBarColor"
			:status-bar="true" :border="navBarBorder" :left-icon="showBack ? 'left' : ''" :title="navBarTitle"
			@click-left="handleBack">
			<slot name="navbar-right" slot="right"></slot>
		</uni-nav-bar>

		<!-- 中间内容区域 -->
		<scroll-view class="content-scroll" scroll-y :style="{ height: scrollHeight }" :show-scrollbar="showScrollbar">
			<view class="content-wrapper">
				<slot></slot>
			</view>
		</scroll-view>

		<!-- 底部tabbar -->
		<un-tab-bar v-if="showTabBar" :current-path="currentPath" @change="handleTabChange"></un-tab-bar>
	</view>
</template>

<script>
export default {
	name: 'UnPages',
	props: {
		// 是否显示顶部导航栏
		showNavBar: {
			type: Boolean,
			default: true
		},
		// 导航栏标题
		navBarTitle: {
			type: String,
			default: ''
		},
		// 导航栏背景色
		navBarBgColor: {
			type: String,
			default: '#fff'
		},
		// 导航栏文字颜色
		navBarColor: {
			type: String,
			default: '#333'
		},
		// 导航栏是否显示边框
		navBarBorder: {
			type: Boolean,
			default: true
		},
		// 是否显示返回按钮
		showBack: {
			type: Boolean,
			default: false
		},
		// 是否显示底部tabbar
		showTabBar: {
			type: Boolean,
			default: false
		},
		// 是否显示滚动条
		showScrollbar: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			scrollHeight: 'calc(100vh - 44px)',
			systemInfo: null,
			currentPath: ''
		}
	},
	mounted() {
		this.calculateHeight()
		// 获取当前页面路径
		this.getCurrentPath()
		// 监听窗口变化
		uni.onWindowResize(() => {
			this.calculateHeight()
		})
	},
	methods: {
		/**
		 * 计算滚动区域高度
		 */
		calculateHeight() {
			try {
				const systemInfo = uni.getSystemInfoSync()
				const statusBarHeight = systemInfo.statusBarHeight || 0
				const navBarHeight = this.showNavBar ? 44 : 0
				const tabBarHeight = this.showTabBar ? 50 : 0 // tabbar高度约50px

				let height = systemInfo.windowHeight - navBarHeight - tabBarHeight

				// 如果有tabbar，加上安全区域
				if (this.showTabBar && systemInfo.safeAreaInsets) {
					height -= systemInfo.safeAreaInsets.bottom
				}

				this.scrollHeight = height + 'px'
			} catch (e) {
				console.error('计算高度失败:', e)
				this.scrollHeight = 'calc(100vh - 44px)'
			}
		},

		/**
		 * 处理返回按钮点击
		 */
		handleBack() {
			uni.navigateBack({
				delta: 1,
				fail: () => {
					// 如果无法返回，跳转到首页
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			})
		},

		/**
		 * 获取当前页面路径
		 */
		getCurrentPath() {
			try {
				const pages = getCurrentPages()
				if (pages && pages.length > 0) {
					const currentPage = pages[pages.length - 1]
					this.currentPath = '/' + currentPage.route
				}
			} catch (e) {
				console.error('获取当前页面路径失败:', e)
			}
		},

		/**
		 * 处理tab切换
		 */
		handleTabChange(path) {
			this.$emit('tab-change', path)
		}
	}
}
</script>

<style lang="scss" scoped>
.un-pages-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #F8F8F8;
	overflow: hidden;
}

.content-scroll {
	flex: 1;
	width: 100%;
	overflow-y: auto;
}

.content-wrapper {
	width: 100%;
	min-height: 100%;
}
</style>
