<script setup>
import TTab from "@/components/ui/TTab.vue";
import {inject, onBeforeMount, onMounted, ref} from "vue";

const Tea = inject("$Tea")
const props = defineProps({
	value: {
		type: String,
		default: ""
	},
	href: {
		type: String,
		default: ""
	},
	target: {
		type: String,
		default: ""
	},
	name: {
		type: String,
		default: ""
	},
	icon: {
		type: String,
		default: ""
	},
	separator: {
		type: Boolean,
		default: false
	},
	disabled: {
		type: Boolean,
		default: false
	},
	back: {
		type: Boolean,
		default: false
	},
	static: {
		type: Boolean,
		default: false
	},
	externalLink: {
		type: Boolean,
		default: false
	},
	active: {
		type: Boolean,
		default: false
	},

	// 是否为概览
	overview: {
		type: Boolean,
		default: false
	},

	// 特殊动作
	actionCreate: {
		type: Boolean,
		default: false
	},
	actionCreateLink: {
		type: Boolean,
		default: false
	},
	actionUpload: {
		type: Boolean,
		default: false
	},
	actionSetting: {
		type: Boolean,
		default: false
	},
	actionCart: {
		type: Boolean,
		default: false
	}
})
const realHref = ref()

const navbar = inject("$navbar")

const isStaticTab = () => {
	return props.static || props.separator || props.disabled || props.actionCreate
}

const clickTab = (e) => {
	if (props.externalLink) {
		setTimeout(() => {
			navbar.exposed.goPrevTab()
		})
		return
	}

	if (e.target.tagName == "A") {
		const href = e.target.getAttribute("href")
		if (href != null && href.length > 0 && href != "#") {
			const targetValue = e.target.getAttribute("target")
			if (targetValue == "_blank") {
				setTimeout(() => {
					navbar.exposed.goPrevTab()
				})
				return
			}
			return
		}
	}

	if (isStaticTab()) {
		setTimeout(() => {
			navbar.exposed.goPrevTab()
		})
		return
	}
}

const convertHref = () => {
	let href = (props.href == null) ? "" : props.href
	if (typeof (href) == "string" && href.length > 0 && !href.match(/^(http|https|ftp):\/\//i)) {
		let qIndex = href.indexOf("?")
		if (qIndex >= 0) {
			href = Tea.url(href.substring(0, qIndex).replace(/\/+$/, "")) + href.substring(qIndex)
		} else {
			href = Tea.url(href.replace(/\/+$/, ""))
		}
	}
	return href
}

const calculateTabValue = () => {
	if (props.back) {
		return "TAB_BACK"
	}
	if (props.separator) {
		return "TAB_SEPARATOR"
	}

	if (props.value == null || props.value.length == 0) {
		if (props.name != null && props.name.length > 0) {
			return props.name
		}

		if (props.href != null && props.href.length > 0) {
			return props.href
		}

		return "TAB_UNDEFINED"
	}

	return props.value
}
const tabValue = ref(calculateTabValue())

const calculateTarget = () => {
	if (props.target && props.target.length > 0) {
		return props.target
	}

	if (props.externalLink) {
		return "_blank"
	}

	return undefined
}

onBeforeMount(() => {
	realHref.value = convertHref()
})

onMounted(() => {
	if (props.active) {
		navbar.exposed.goTab(calculateTabValue())
	}
})

</script>

<template>
	<TTab :disabled="separator || disabled" :value="tabValue" @click="clickTab($event)" :as="(isStaticTab()) ? 'SPAN' : 'A'" :href="realHref" :target="calculateTarget()" class="flex">
		<span v-if="!separator" class="flex items-center gap-2">
			<span v-if="back"><i class="pi pi-arrow-left"></i></span>
			<i v-if="icon.length > 0" :class="icon"></i>
			<i v-if="actionCreate || actionCreateLink" class="pi pi-pen-to-square"></i>
			<i v-if="actionUpload" class="pi pi-upload"></i>
			<i v-if="actionSetting" class="pi pi-cog"></i>
			<i v-if="actionCart" class="pi pi-shopping-cart"></i>
			<i class="pi pi-external-link" v-if="externalLink"></i>
			<span>
				<span v-if="name.length > 0">{{ name }}</span>
				<span v-else-if="overview">概览</span>
			</span>
			<span v-if="$slots.name"><slot name="name"></slot></span>
		</span>
		<span v-if="separator">|</span>
	</TTab>
</template>

<style scoped lang="postcss">
.p-tab.p-disabled {
	@apply px-2;
}
</style>