<template>
	<view class="page-container" :style="{ backgroundColor: backgroundColor }">
		<nav-header :title="title" :showBack="showBack" :backUrl="backUrl" :color="navColor"
			:backgroundColor="navBackgroundColor" :fixed="fixed" :statusBar="statusBar" :border="border">
		</nav-header>
		<view class="page-container__content" :style="{ paddingBottom: paddingBottom }">
			<slot></slot>
		</view>
	</view>
</template>

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

export default {
	name: 'PageContainer',
	components: {
		NavHeader
	},
	props: {
		// 标题文字
		title: {
			type: String,
			default: ''
		},
		// 是否显示返回按钮
		showBack: {
			type: Boolean,
			default: false
		},
		// 返回页面路径，不传则返回上一页
		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
		},
		// 是否显示底部边框
		border: {
			type: Boolean,
			default: false
		},
		// 底部内边距
		paddingBottom: {
			type: String,
			default: '0px'
		}
	}
}
</script>

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

	&__content {
		width: 100%;
		box-sizing: border-box;
	}
}
</style>