<template>
	<div class="fix-menus is-bg" :style="baseStyle">
		<div class="inner" v-if="list.length">
			<el-carousel :height="height" :autoplay="false">
				<el-carousel-item v-for="(item, index) in tabs" :key="index">
					<div
						class="row"
						:class="[`is-${style.rowNum}`]"
						v-for="(row, r) in item"
						:key="r"
					>
						<div class="item" v-for="(col, c) in row" :key="c">
							<div
								:class="[`is-${style.shape}`, `is-${col.mode}`]"
								:style="{ backgroundColor: col.backgroundColor }"
								class="icon-box"
							>
								<el-image :src="col.icon" fit="cover" class="icon">
									<template #error>
										<div class="image-slot">
											<el-icon><icon-picture /></el-icon>
										</div>
									</template>
								</el-image>
							</div>
							<span
								v-if="col.mode == 'mode-1'"
								class="text"
								:style="{ color: col.color }"
								>{{ col.text }}</span
							>
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="empty" v-else>
			<span>按钮组</span>
		</div>
	</div>
</template>

<script lang="ts" name="fix-menus" setup>
import { ref, computed, type PropType } from "vue";
import { Form } from "../../types/form";
import { Picture as IconPicture } from "@element-plus/icons-vue";

const props = defineProps({
	style: {
		type: Object,
		default: () => {
			return {
				shape: "round",
				pageNum: 1,
				rowNum: 3
			};
		}
	},
	list: {
		type: Array as PropType<Form.Menu[]>,
		default: () => []
	},
	styleSpacing: {
		type: Object as PropType<Form.Spacing>,
		default: () => {
			return {
				marginTop: 0,
				marginBottom: 0,
				marginLR: 0,
				padding: 0,
				borderTopLR: 0,
				borderBottomLR: 0
			};
		}
	},
	styleColor: {
		type: Object as PropType<Form.Color>,
		default: () => {
			return {
				color: "#000",
				backgroundColor: "#FFFFFF",
				opacity: 1
			};
		}
	}
});
const baseStyle = computed(() => {
	return {
		margin: `${props.styleSpacing.marginTop / 2}px ${props.styleSpacing.marginLR / 2}px ${props.styleSpacing.marginBottom / 2}px ${props.styleSpacing.marginLR / 2}px`,
		color: props.styleColor.color,
		padding: `${props.styleSpacing.padding / 2}px`,
		borderRadius: `${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px  ${props.styleSpacing.borderBottomLR / 2}px`,
		"--opacity": props.styleColor.opacity,
		"--background": props.styleColor.backgroundColor
	};
});
const height = computed(() => {
	return 75 * props.style.pageNum + "px";
});
const tabs = computed(() => {
	return paginateArray(props.list, props.style.pageNum, props.style.rowNum);
});

// 解决 每页1行 每行3个 的问题
function paginateArray(data: Form.Menu[], pageNum: number, rowNum: number) {
	const result: any[] = [];
	const totalItems = data.length;
	let pageIndex = 0;

	while (pageIndex < totalItems) {
		const page: any[] = [];
		for (let i = 0; i < pageNum && pageIndex < totalItems; i++) {
			const row: any[] = [];
			for (let j = 0; j < rowNum && pageIndex < totalItems; j++) {
				row.push(data[pageIndex]);
				pageIndex++;
			}
			page.push(row);
		}
		result.push(page);
	}

	return result;
}
</script>

<style lang="scss" scoped>
.fix-menus {
	min-height: 75px;
	box-sizing: border-box;
	overflow: hidden;

	.inner {
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
		.row {
			margin-bottom: 10px;
			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 70px;
				.is-round {
					border-radius: 20px;
				}
				.is-mode-2 {
					width: 60px !important;
					height: 60px !important;
				}
				.icon-box {
					width: 40px;
					height: 40px;
					overflow: hidden;
					.icon {
						width: 100%;
						height: 100%;
						.image-slot {
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							.el-icon {
								font-size: 30px;
								color: var(--el-text-color-placeholder);
							}
						}
					}
				}
				.text {
					font-size: 12px;
					margin-top: 6px;
				}
			}
		}
		.row:last-child {
			margin-bottom: 0;
		}
		.is-3 {
			display: grid;
			grid-template-columns: repeat(3, 1fr); /* 每行3列，每列宽度相等 */
			gap: 10px; /* 间距 */
		}
		.is-4 {
			display: grid;
			grid-template-columns: repeat(4, 1fr); /* 每行3列，每列宽度相等 */
			gap: 10px; /* 间距 */
		}
		.is-5 {
			display: grid;
			grid-template-columns: repeat(5, 1fr); /* 每行3列，每列宽度相等 */
			gap: 10px; /* 间距 */
		}
	}
	.empty {
		height: 75px;
		display: flex;
		justify-content: center;
		align-items: center;
		span {
			font-size: 26px;
			color: var(--el-text-color-placeholder);
		}
	}
	.is-mode-1 {
		justify-content: flex-start;
	}
	.is-mode-2 {
		justify-content: center;
	}
}
.is-bg {
	position: relative;
	z-index: 1; /* 确保 .is-bg 及其子元素位于 ::after 伪元素的上层 */
}
.is-bg::after {
	content: "";
	background-color: var(--background);
	opacity: var(--opacity);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
}
</style>
