<template>
	<view class="fix-suspension" :style="baseStyle">
		<view class="menu" :style="innerStyle" @click="toggleMenu">
			<image class="icon" :src="list[0].icon"></image>
		</view>
		<view class="menu-slide">
			<view
				v-for="(item, index) in visibleItems"
				:key="index"
				class="sub-menu"
				:style="subMenuStyle(index)"
				@click="toPath(item.link)"
			>
				<image class="icon" :src="item.icon"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" name="fix-suspension" setup>
import { computed, ref, type PropType } from "vue";
import type { Form } from "../../types/form";

const props = defineProps({
	mode: {
		type: String,
		default: "left",
	},
	backgroundColor: {
		type: String,
		default: "rgba(0, 0, 0, 0.8)",
	},
	offsetBottom: {
		type: Number,
		default: 50,
	},
	shadow: {
		type: Boolean,
		default: false,
	},
	list: {
		type: Array as PropType<Form.Suspension[]>,
		default: () => [
			{
				icon: "https://tsb-yx.oss-cn-guangzhou.aliyuncs.com/app/mini/float-menu.png",
				tips: "宽高128px",
				link: {
					name: "",
					type: "",
					appid: "",
					page: "",
				},
			},
		],
	},
});
const emits = defineEmits(["jump"]);

const baseStyle = computed(() => {
	return {
		bottom: `${props.offsetBottom}rpx`,
		[props.mode]: "10px",
	};
});

const innerStyle = computed(() => {
	return {
		background: props.backgroundColor,
		boxShadow: props.shadow ? "0 4px 10px rgba(0, 0, 0, 0.3)" : undefined,
	};
});

const isMenuOpen = ref(false);
const toggleMenu = () => {
	if (props.list.length > 1) {
		isMenuOpen.value = !isMenuOpen.value;
	} else {
		toPath(props.list[0].link);
	}
};

// 控制显示的子按钮
const visibleItems = computed(() => {
	return isMenuOpen.value ? props.list.slice(1) : [];
});

// 子菜单项的样式和动画效果
const subMenuStyle = (index: number) => {
	const offset = 90; // 每个子菜单项的高度
	return {
		transition: `transform 0.3s ease, opacity 0.3s ease`,
		transform: isMenuOpen.value ? `translateY(-${(index + 1) * offset}rpx)` : "translateY(0)",
		opacity: isMenuOpen.value ? 1 : 0,
		background: props.backgroundColor,
		boxShadow: props.shadow ? "0 4px 10px rgba(0, 0, 0, 0.3)" : undefined,
	};
};

function toPath(link: Form.Link) {
	emits("jump", link);
}
</script>

<style lang="scss" scoped>
.fix-suspension {
	box-sizing: border-box;
	position: fixed;
	z-index: 400;

	.menu {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		user-select: none;
	}

	.menu-slide {
		position: absolute; /* 依赖于父元素定位 */
		bottom: 80rpx; /* 让子菜单从主菜单上方展开 */
		left: 0; /* 根据需要调整位置 */
		width: 80rpx; /* 确保子菜单能够展示 */
		transition: all 0.3s ease;
		overflow: visible; /* 确保子菜单不被裁剪 */
	}

	.sub-menu {
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 100;
		opacity: 0;
		transition:
			transform 0.3s ease,
			opacity 0.3s ease;
	}
}
</style>
