<script setup>
import TTabView from "@/components/ui/TTabView.vue";
import TTabs from "@/components/ui/TTabs.vue";
import {getCurrentInstance, provide, ref, watch} from "vue";
import TBreadcrumb from "@/components/ui/TBreadcrumb.vue";

const props = defineProps({
	activeTab: {
		type: String,
		default: ""
	},
	disableSpacing: {
		type: Boolean,
		default: false
	},
	contentName: {
		type: String,
		default: ""
	},
	parentItems: {
		type: Array,
		default: []
	},
	secondary: {
		type: Boolean,
		default: false
	}
})
const activeTabRef = ref(props.activeTab)
watch(() => props.activeTab, () => {
	activeTabRef.value = props.activeTab
})

let tabHistory = [props.activeTab]
const changeTab = tabValue => {
	tabHistory.push(tabValue.value)
}

// get refer information
let referURL = ""
let referName = ""
if (window.location.search.length > 0) {
	window.location.search.substring(1).split("&").forEach(param => {
		const index = param.indexOf("=")
		if (index > 0) {
			switch (param.substring(0, index)) {
				case "REFER":
					referURL = window.decodeURIComponent(param.substring(index + 1))
					break
				case "REFERNAME":
					referName = window.decodeURIComponent(param.substring(index + 1))
					break
			}
		}
	})
}

const navItems = ref([])
if (props.parentItems.length > 0) {
	navItems.value.push({
		name: props.parentItems[0][0],
		isHome: true,
		url: props.parentItems[0][1]
	})

	if (props.parentItems.length > 1) {
		props.parentItems.slice(1).forEach(item => {
			navItems.value.push({
				name: item[0],
				url: item[1]
			})
		})
	}

	if (props.contentName.length > 0) {
		navItems.value.push({
			name: props.contentName,
			disabled: !props.secondary,
			class: props.secondary ? "font-medium" : ""
		})
	}
}

const instance = getCurrentInstance()
provide("$navbar", instance)

defineExpose({
	goPrevTab() {
		tabHistory.pop()
		activeTabRef.value = tabHistory[tabHistory.length - 1]
	},
	goTab(tab) {
		tabHistory.push(tab)
		activeTabRef.value = tab
	}
})
</script>

<template>
	<div class="wrapper" :class="{'no-spacing': disableSpacing, secondary: secondary}">
		<div v-if="(contentName.length > 0) && navItems.length > 0">
			<TBreadcrumb :items="navItems" v-if="navItems.length > 0 && !secondary" class="!pl-0">
				<template #separator>
					<i class="pi pi-angle-right"></i>
				</template>
				<template #itemicon="{item}">
					<svg v-if="item.isHome" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
						<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
					</svg>
				</template>
			</TBreadcrumb>
			<div class="relative" :class="{'pt-4' : navItems.length == 0}">
				<span class="name-box">
					<a :href="(referURL.length > 0) ? referURL : navItems[navItems.length - 2].url" class="flex py-2 pr-4 z-10 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md" v-tooltip.top="'返回' + ((referName.length > 0) ? referName : ( (referURL.length == 0) ? navItems[navItems.length - 2].name : '' ))"><i class="pi pi-arrow-left"></i></a>
					<span>{{ contentName }}</span>
				</span>
				<div class="flex items-center gap-2 md:absolute md:top-0 md:right-2 md:bottom-0">
					<div class="flex flex-wrap gap-4">
						<slot name="buttons"></slot>
					</div>
				</div>
			</div>
		</div>
		<TTabView v-if="$slots.tabs" v-model="activeTabRef" @change="changeTab">
			<TTabs>
				<slot name="tabs"></slot>
			</TTabs>
		</TTabView>
	</div>
</template>

<style scoped lang="postcss">
.wrapper {
	padding-bottom: 24px!important;
	&:not(.secondary) {
		@apply pb-4 -mt-2;
	}

	&.no-spacing {
		@apply pb-0;
	}

	.name-box {
		color: #333;
		@apply flex items-center text-2xl mb-4 dark:text-gray-300;
	}

	&.secondary {
		--font-size: 0.95em;

		font-size: var(--font-size);
		@apply pb-4 -mt-3;

		:deep(i) {
			font-size: var(--font-size);
		}

		.name-box {
			@apply text-xl mt-7 mb-2;
		}

		:deep(.p-tab:not(.p-disabled)) {
			padding-left: 0.9em;
			padding-right: 0.9em;
		}
	}
}
</style>