<template>
	<div class="fix-suspension">
		<div class="menu" :style="innerStyle" @click="toggleMenu">
			<el-image lazy class="icon" :src="list[0].icon"></el-image>
		</div>
		<transition-group name="menu-slide" tag="div">
			<div
				v-for="(item, index) in visibleItems"
				:key="index"
				class="sub-menu"
				:style="subMenuStyle(index)"
			>
				<el-image lazy class="icon" :src="item.icon">
					<template #placeholder>
						<span></span>
					</template>
					<template #error>
						<span></span>
					</template>
				</el-image>
			</div>
		</transition-group>
	</div>
</template>

<script lang="ts" name="fix-suspension" setup>
import { computed, ref, type PropType } from "vue";
import { 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 innerStyle = computed(() => {
	return {
		bottom: `${props.offsetBottom / 2}px`,
		[props.mode]: "10px",
		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;
	}
};

// 控制显示的子按钮
const visibleItems = computed(() => {
	return isMenuOpen.value ? props.list.slice(1) : [];
});
// 子菜单项的样式和动画效果
const subMenuStyle = (index: number) => {
	const delay = 0.1; // 每个子菜单项之间的延迟时间 (秒)

	return {
		transition: `transform 0.3s ease, opacity 0.3s ease`,
		transform: isMenuOpen.value ? `translateY(-${(index + 1) * 50}px)` : "translateY(0)",
		opacity: isMenuOpen.value ? 1 : 0,
		bottom: `${props.offsetBottom / 2}px`,
		[props.mode]: "10px",
		background: props.backgroundColor,
		boxShadow: props.shadow ? "0 4px 10px rgba(0, 0, 0, 0.3)" : undefined,

		// 动态延迟，展开时从开头开始，收回时从末尾开始
		transitionDelay: isMenuOpen.value
			? `${index * delay}s` // 展开时，逐个延迟从开头展开
			: `${(visibleItems.value.length - index - 1) * delay}s` // 隐藏时，逐个延迟从末尾隐藏
	};
};
</script>

<style lang="scss" scoped>
.fix-suspension {
	box-sizing: border-box;
	.menu {
		position: absolute;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 101;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	.icon {
		width: 25px;
		height: 25px;
		user-select: none;
	}

	.sub-menu {
		position: absolute;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 100;
		opacity: 0;
		transition: all 0.3s ease;
	}

	:deep(.slide-fade-enter-active, .slide-fade-leave-active) {
		transition: all 0.3s ease;
	}

	:deep(.slide-fade-enter, .slide-fade-leave-to) {
		opacity: 0;
		transform: translateY(0);
	}
	:deep(.el-image__placeholder) {
		background: transparent;
	}
}
</style>
