<template>
	<view class="bottom-nav-container">
		<!-- 导航底座 -->
		<view class="base-wrapper" :class="{ 'expanded': isExpanded }">
			<image class="base-icon" src="/static/icon/nav-base.png" mode="aspectFit"></image>
		</view>

		<!-- 小怪兽图标 -->
		<view class="monster-wrapper" :class="{ 'expanded': isExpanded }">
			<image class="monster-icon" src="/static/icon/character.png" mode="aspectFit" @click="toggleExpand"></image>
		</view>

		<!-- 导航图标 -->
		<view v-for="(item, index) in navItems" :key="index" class="nav-icon-wrapper"
			:class="{ 'expanded': isExpanded, 'active': activeTab === index && isCurrentPage(index) }" :style="getNavIconStyle(index)"
			@click="handleNavClick(index)">
			<image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
			<text class="nav-label">{{ item.name }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 定义 props
const props = defineProps({
	activeTab: {
		type: Number,
		default: 0
	},
	isExpanded: {
		type: Boolean,
		default: false
	}
});

// 定义 emits
const emit = defineEmits(['update:activeTab', 'update:isExpanded']);

// 导航项配置
const navItems = [
	{
		name: '搭子',
		icon: '/static/icon/dazi.png',
		angle: 122, // 左上方
		path: '/pages/ai-dazi/index'
	},
	{
		name: '星册',
		icon: '/static/icon/starbook.png',
		angle: 107, // 右上方
		path: '/pages/starbook/index'
	},
	{
		name: '铸爱',
		icon: '/static/icon/castlove.png',
		angle: 90.01, // 正上方
		path: '/pages/castlove/mall',
		rotate: '8deg'
	},
	{
		name: '星城',
		icon: '/static/icon/dressup.png',
		angle: 73, // 右方
		path: '/pages/starcity/index'
	},
	{
		name: '广场',
		icon: '/static/icon/square.png',
		angle: 57, // 右下方
		path: '/pages/square/square'
	}
];

// 检查当前页是否匹配导航项
const isCurrentPage = (index) => {
	const pages = getCurrentPages();
	if (pages.length === 0) return false;
	const currentPage = pages[pages.length - 1];
	const currentPath = '/' + currentPage.route;
	return navItems[index]?.path === currentPath;
};

// 扇形半径
const radius = 580; // rpx

// 计算每个导航图标的位置
const getNavIconStyle = (index) => {
	if (!props.isExpanded) {
		// 未展开时，所有图标都在中心位置，透明且缩小
		return {
			'--x': '0rpx',
			'--y': '0rpx',
			'--delay': '0s'
		};
	}

	const item = navItems[index];
	const angle = item.angle;
	const radian = angle * Math.PI / 180;
	const x = radius * Math.cos(radian);
	const y = -radius * Math.sin(radian);

	// 添加延迟，形成序列动画效果
	const delay = index * 0.03;

	return {
		'--x': `${x}rpx`,
		'--y': `${y}rpx`,
		'--delay': `${delay}s`,
		'--rotate': item.rotate || '0deg'
	};
};

// 切换展开/收起状态
const toggleExpand = () => {
	emit('update:isExpanded', !props.isExpanded);
};

// 处理导航点击
const handleNavClick = (index) => {
	// 触发事件，通知父组件切换 tab
	emit('update:activeTab', index);
	// 收起导航栏
	emit('update:isExpanded', false);
};
</script>

<style scoped>
.bottom-nav-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 300rpx;
	pointer-events: none;
	z-index: 1000;
}

/* 导航底座 */
.base-wrapper {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(1500rpx);
	width: 1200rpx;
	height: 1200rpx;
	pointer-events: none;
	z-index: 0;
	transition: transform 0.3s cubic-bezier(0.34, 1.26, 0.64, 1);
	opacity: 0;
}

.base-wrapper.expanded {
	transform: translateX(-50%) translateY(900rpx);
	opacity: 1;
}

.base-icon {
	width: 100%;
	height: 100%;
}

/* 小怪兽图标容器 */
.monster-wrapper {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(60%);
	width: 300rpx;
	height: 300rpx;
	pointer-events: auto;
	z-index: 3;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.monster-wrapper.expanded {
	transform: translateX(-50%) translateY(90rpx) scale(1.15);
}

.monster-icon {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.5)) drop-shadow(0 0 40rpx rgba(255, 140, 180, 0.3));
	transition: filter 0.3s ease, transform 0.3s ease;
	animation: breathe 2s ease-in-out infinite;
}

.monster-wrapper.expanded .monster-icon {
	filter: drop-shadow(0 16rpx 40rpx rgba(255, 107, 157, 0.7)) drop-shadow(0 0 60rpx rgba(255, 140, 180, 0.5));
	animation: none;
}

/* 小怪兽呼吸动画 */
@keyframes breathe {

	0%,
	100% {
		transform: scale(1.00);
	}

	50% {
		transform: scale(1.02);
	}
}

/* 导航图标容器 */
.nav-icon-wrapper {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 140rpx;
	height: 180rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, 0) scale(0);
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	transition: transform 0.35s cubic-bezier(0.34, 1.36, 0.64, 1),
		opacity 0.3s ease-out;
	transition-delay: var(--delay);
}

.nav-icon-wrapper.expanded {
	transform: translate(calc(-50% + var(--x)), calc(200px + var(--y))) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.nav-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 8rpx;
	transition: transform 0.3s ease, filter 0.3s ease;
	filter: drop-shadow(0 6rpx 16rpx rgba(0, 0, 0, 0.4)) drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.2));
	position: relative;
	transform: rotate(var(--rotate));
}

/* 底部倒影效果 */
.nav-icon::after {
	content: '';
	position: absolute;
	bottom: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	opacity: 0.2;
	transform: scaleY(-1);
	filter: blur(4rpx);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 60%);
	pointer-events: none;
}

.nav-icon-wrapper.active .nav-icon {
	transform: scale(1.25);
	filter: drop-shadow(0 8rpx 24rpx rgba(255, 107, 157, 0.7)) drop-shadow(0 4rpx 16rpx rgba(255, 140, 66, 0.5)) drop-shadow(0 0 32rpx rgba(255, 107, 157, 0.4));
}

.nav-icon-wrapper:active .nav-icon {
	transform: scale(0.95);
}

.nav-icon-wrapper.active:active .nav-icon {
	transform: scale(1.15);
}

.nav-label {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.98);
	font-weight: 500;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4),
		0 1rpx 4rpx rgba(0, 0, 0, 0.3);
	white-space: nowrap;
	transition: all 0.3s ease;
}

.nav-icon-wrapper.active .nav-label {
	color: #e6e6e6;
	font-weight: bold;
	text-shadow: 0 2rpx 12rpx rgba(255, 107, 157, 0.6),
		0 1rpx 6rpx rgba(0, 0, 0, 0.4);
	transform: scale(1.05);
}
</style>
