<template>
	<view class="clinic-layout safe-area-inset-bottom">
		<u-navbar
			:title="title"
			:is-back="showBack"
			title-size="34"
			title-color="#fff"
			:background="{ background: 'linear-gradient(90deg, #00BFA6 0%, #6ACDBB 93%)' }"
		/>
		<view class="clinic-body" :style="bodyStyle">
			<slot />
		</view>
		<u-tabbar
			v-if="showTabbar"
			:value="tabIndex"
			:list="tabList"
			active-color="#6ACDBB"
			@change="onTabChange"
		/>
	</view>
</template>

<script>
	import { getClinicTabList, switchClinicTab } from '@/subPackages/sub_clinic_admin/common/tabbar.js'

	export default {
		name: 'ClinicPageLayout',
		props: {
			title: { type: String, default: '' },
			showBack: { type: Boolean, default: false },
			showTabbar: { type: Boolean, default: false },
			tabIndex: { type: Number, default: 0 },
		},
		data() {
			return {
				statusBarHeight: 0,
				navbarHeight: 0,
				tabList: [],
			}
		},
		computed: {
			bodyStyle() {
				const top = this.statusBarHeight + this.navbarHeight
				let bottom = '32rpx'
				if (this.showTabbar) {
					bottom = 'calc(100rpx + env(safe-area-inset-bottom))'
				}
				return {
					paddingTop: top + 'px',
					paddingBottom: bottom,
					minHeight: '100vh',
					boxSizing: 'border-box',
				}
			},
		},
		created() {
			this.statusBarHeight = this.$statusBarHeight || 0
			this.navbarHeight = this.$navbarHeight || 44
			if (this.showTabbar) {
				this.tabList = getClinicTabList()
			}
		},
		methods: {
			onTabChange(index) {
				if (index === this.tabIndex) return
				switchClinicTab(index)
			},
		},
	}
</script>

<style lang="scss" scoped>
.clinic-layout {
	min-height: 100vh;
	background: #f9fafb;
}
.clinic-body {
	//padding-left: 24rpx;
	//padding-right: 24rpx;
}
</style>
