<script setup lang="ts">
	import { computed } from 'vue'
	import { useRouter } from 'vue-router'
	import { showConfirmDialog } from 'vant'

	const router = useRouter()
	const currentRoute = computed(() => router.currentRoute.value.path)

	defineProps({
		/** 是否显示占位符 */
		isPlaceholder: { type: Boolean, default: false }
	})

	const handleClickReturn = () => {
		router.back()
		// emit('clickReturn')
	}
	const onHome = (nav) => {
		showConfirmDialog({
			title: 'Return to Home Page?',
			message: 'You have unsaved changes. Your progress will be lost.',
			confirmButtonText: 'Yes',
			cancelButtonText: 'Cancel',
		})
			.then(() => {
				nav.path && router.push(nav.path)
			})
			.catch(() => {})
	}
	const navs = [
		{ label: 'Home', icon: 'home', size: 73, path: '/stylist/customer', on: onHome },
		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
		{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
	]
	const onNavClick = (nav) => {
		if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : nav.path && router.push(nav.path)
	}
</script>

<template>
	<div class="footer-navigation main">
		<div
			v-for="nav in navs"
			:key="nav.path"
			:class="{ active: currentRoute === nav.path }"
			@click="onNavClick(nav)"
		>
			<SvgIcon :name="`${nav.icon}_${currentRoute === nav.path ? '1' : '0'}`" size="55" />
			<span class="label">{{ nav.label }}</span>
		</div>
	</div>
	<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
</template>

<style scoped lang="less">
	.footer-navigation {
		width: 100%;
		height: var(--footer-navigation-height, 14.9rem);
	}
	.footer-navigation.main {
		position: fixed;
		bottom: 0;
		z-index: var(--footer-navigation-z-index, 999);
		background-color: var(--footer-navigation-background, #fff);
		box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		> div {
			display: flex;
			flex-direction: column;
			align-items: center;
			// &.active > * {
			// 	color: #0d99ff;
			// }
			> .label {
				margin-top: 1.6rem;
				font-family: satoshiRegular;
				font-weight: 500;
				font-size: 2.4rem;
				line-height: 89%;
			}
		}
	}
</style>
