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

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

export default {
	name: 'SalespersonManagePageLayout',
	props: {
		isPlatform: { type: Boolean, default: false },
		title: { type: String, default: '' },
		showBack: { type: Boolean, default: true },
		showTabbar: { type: Boolean, default: false },
		tabIndex: { type: Number, default: 0 },
	},
	provide() {
		if (this.isPlatform) {
			return { businessContext: getPlatformAdminContext() };
		}
		return {};
	},
	data() {
		return {
			tabList: [],
		};
	},
	created() {
		if (this.showTabbar) {
			this.tabList = this.isPlatform
				? (getPlatformAdminContext().tabList || [])
				: getClinicTabList();
		}
	},
	methods: {
		onTabChange(index) {
			if (index === this.tabIndex) return;
			const target = this.tabList[index];
			if (!target || !target.pagePath) return;
			if (this.isPlatform) {
				uni.reLaunch({ url: target.pagePath });
			} else {
				switchClinicTab(index);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.manage-page-layout {
	min-height: 100vh;
	background: #f9fafb;
}
.page-body {
	padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
}
</style>
