<template>
	<div class="fix-rubik-cube is-bg" :style="baseStyle">
		<div
			class="box"
			:class="[`is-${data.mode}`]"
			:style="{
				gap: baseGap,
				'--gap': baseGap
			}"
		>
			<div
				class="item"
				v-for="(item, index) in data.list"
				:key="index"
				:class="[`is-${data.mode}-item-${index}`, { haveIcon: item.icon }]"
			>
				<span class="tips" v-if="!item.icon">{{ item.tips }}</span>
				<el-image class="icon" :src="item.icon" fit="fill" v-else></el-image>
			</div>
		</div>
	</div>
</template>

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

const props = defineProps({
	data: {
		type: Object as PropType<Form.RubikCube>,
		default: () => {
			return {
				mode: "mode-1",
				gap: 0,
				list: [
					{
						icon: "",
						tips: "宽度375px",
						link: {
							name: "",
							type: "",
							appid: "",
							page: ""
						}
					},
					{
						icon: "",
						tips: "宽度375px",
						link: {
							name: "",
							type: "",
							appid: "",
							page: ""
						}
					}
				]
			};
		}
	},
	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 baseGap = computed(() => {
	if (props.data.gap) {
		return `${Math.floor(props.data.gap / 2)}px`;
	}
	return "0px";
});
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`,
		"--opacity": props.styleColor.opacity,
		"--background": props.styleColor.backgroundColor,
		borderRadius: `${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px  ${props.styleSpacing.borderBottomLR / 2}px`
	};
});
</script>

<style lang="scss" scoped>
.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;
}

.box {
	display: flex;
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100px;
		background-color: lightblue;
		box-sizing: border-box;
		cursor: pointer;
		background-size: 100% 100%;
		.icon {
			width: 100%;
			max-width: 100%;
			border: 0;
			vertical-align: middle;
		}
		.tips {
			font-size: 14px;
			text-align: center;
			white-space: pre-line;
		}
	}
	.haveIcon {
		background-color: transparent !important;
	}
}

.is-mode-1 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	.item {
		&.is-mode-1-item-0 {
			min-height: calc(150px - var(--gap) / 2);
			background-color: lightgreen;
		}
		&.is-mode-1-item-1 {
			min-height: calc(150px - var(--gap) / 2);
			background-color: lightcoral;
		}
	}
}

.is-mode-2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	.item {
		&.is-mode-2-item-0 {
			min-height: calc(100px - var(--gap) / 3);
		}
		&.is-mode-2-item-1 {
			min-height: calc(100px - var(--gap) / 3);
			background-color: lightgreen;
		}
		&.is-mode-2-item-2 {
			min-height: calc(100px - var(--gap) / 3);
			background-color: lightcoral;
		}
	}
}

.is-mode-3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	.item {
		&.is-mode-3-item-0 {
			min-height: 300px;
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			background-color: lightblue;
		}
		&.is-mode-3-item-1 {
			min-height: calc(150px - var(--gap) / 2);
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			background-color: lightgreen;
		}
		&.is-mode-3-item-2 {
			min-height: calc(150px - var(--gap) / 2);
			grid-column: 2 / 3;
			grid-row: 2 / 3;
			background-color: lightcoral;
		}
	}
}

.is-mode-4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	.item {
		&.is-mode-4-item-0 {
			min-height: calc(150px - var(--gap) / 2);
			grid-column: 1 / 3;
			grid-row: 1 / 2;
			background-color: lightblue;
		}
		&.is-mode-4-item-1 {
			min-height: calc(150px - var(--gap) / 2);
			grid-column: 1 / 2;
			grid-row: 2 / 3;
			background-color: lightgreen;
		}
		&.is-mode-4-item-2 {
			min-height: calc(150px - var(--gap) / 2);
			grid-column: 2 / 3;
			grid-row: 2 / 3;
			background-color: lightcoral;
		}
	}
}
</style>
