<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 { getClinicSalespersonContext } from '@/subPackages/sub_clinic_salesperson/common/context.js';

export default {
	name: 'ClinicSalespersonPageLayout',
	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: getClinicSalespersonContext().tabList,
		};
	},
	computed: {
		bodyStyle() {
			const top = this.statusBarHeight + this.navbarHeight;
			let bottom = '32rpx';
			if (this.showTabbar) {
				// bottom = 'calc(100rpx + env(safe-area-inset-bottom))';
				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;
	},
	methods: {
		onTabChange(index) {
			if (index === this.tabIndex) return;
			const target = this.tabList[index];
			if (target && target.pagePath) {
				uni.reLaunch({ url: target.pagePath });
			}
		},
	},
};
</script>

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