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

	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(() => {
				MyEvent.emit('clear-generate-state')
				MyEvent.emit('clearAllCache')
				nav.path && router.push(nav.path)
			})
			.catch(() => {})
	}
	const navs = [
		{ label: 'Home', icon: 'home', size: 73, path: '/workshop/home' },
		{ 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>
