<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
	},
	actionGroups: {
		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 tt-tab">
		<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="actionCreate || actionCreateLink" class="pi">
				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M8.33331 13.3334H2.33331C1.78103 13.3334 1.33331 12.8857 1.33331 12.3334V3.66675C1.33331 3.11446 1.78103 2.66675 2.33331 2.66675H13.6666C14.2189 2.66675 14.6666 3.11446 14.6666 3.66675V8.31381"
						stroke="#657080" stroke-linecap="round" stroke-linejoin="round" />
					<path
						d="M1.33331 3.66675C1.33331 3.11446 1.78103 2.66675 2.33331 2.66675H13.6666C14.2189 2.66675 14.6666 3.11446 14.6666 3.66675V6.66675H1.33331V3.66675Z"
						stroke="#657080" />
					<path d="M10.6667 11.6667H14.6667" stroke="#657080" stroke-linecap="round"
						stroke-linejoin="round" />
					<path d="M12.6667 9.66675V13.6667" stroke="#657080" stroke-linecap="round"
						stroke-linejoin="round" />
					<path
						d="M2.66667 4.66659C2.66667 4.2984 2.96514 3.99992 3.33333 3.99992C3.70152 3.99992 4 4.2984 4 4.66659C4 5.03478 3.70152 5.33325 3.33333 5.33325C2.96514 5.33325 2.66667 5.03478 2.66667 4.66659Z"
						fill="#657080" />
					<path
						d="M4.66667 4.66659C4.66667 4.2984 4.96514 3.99992 5.33333 3.99992C5.70152 3.99992 6 4.2984 6 4.66659C6 5.03478 5.70152 5.33325 5.33333 5.33325C4.96514 5.33325 4.66667 5.03478 4.66667 4.66659Z"
						fill="#657080" />
				</svg>
			</i>
			<i v-if="actionGroups" class="pi">
				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
					<g clip-path="url(#clip0_22_569)">
						<path
							d="M14.3333 1.33325H1.66665C1.48255 1.33325 1.33331 1.49606 1.33331 1.69689V4.96962C1.33331 5.17045 1.48255 5.33325 1.66665 5.33325H14.3333C14.5174 5.33325 14.6666 5.17045 14.6666 4.96962V1.69689C14.6666 1.49606 14.5174 1.33325 14.3333 1.33325Z"
							stroke="#657080" stroke-linejoin="round" />
						<path
							d="M14.3333 10.6667H1.66665C1.48255 10.6667 1.33331 10.8295 1.33331 11.0304V14.3031C1.33331 14.5039 1.48255 14.6667 1.66665 14.6667H14.3333C14.5174 14.6667 14.6666 14.5039 14.6666 14.3031V11.0304C14.6666 10.8295 14.5174 10.6667 14.3333 10.6667Z"
							stroke="#657080" stroke-linejoin="round" />
						<path d="M4.66669 5.33325V8.00269L11.3334 8.00565V10.6666" stroke="#657080"
							stroke-linecap="round" stroke-linejoin="round" />
						<path d="M6 12.6667H10" stroke="#657080" stroke-linecap="round" stroke-linejoin="round" />
						<path d="M6 3.33325H10" stroke="#657080" stroke-linecap="round" stroke-linejoin="round" />
					</g>
					<defs>
						<clipPath id="clip0_22_569">
							<rect width="16" height="16" fill="white" />
						</clipPath>
					</defs>
				</svg>
			</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 {
	font-family: Source Han Sans SC;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	vertical-align: middle;
	padding: 0 0 10px;
	margin-right: 30px;
	color: rgba(101, 112, 128, 1);
}

.p-tab:hover,
.p-tab-active {
	font-weight: 500;
	color: rgba(49, 49, 49, 1);
}

.p-tab.p-disabled {
	@apply px-2;
}
</style>