<template>
	<div
		class="fix-positioning"
		:style="baseStyle"
		:class="[{ 'is-float': float.open && banner.open }]"
	>
		<div :class="[`is-${mode}`]" class="header is-bg">
			<div class="item">
				<div v-if="mode == 'mode-1'">
					<div>xxx,下午好</div>
					<div class="mt-10 font-12 row-center">
						<el-icon><Location /></el-icon>
						<span class="mx-6">南村番禺店</span>
						<span class="text-grey">距你 0.7km</span>
						<span class="mx-6">更多门店</span>
						<el-icon><ArrowDown /></el-icon>
					</div>
				</div>
				<div v-if="mode == 'mode-2'">
					<div class="row-center">
						<el-icon><Location /></el-icon>
						<span class="mx-6">南村1号店</span>
						<el-icon><ArrowRight /></el-icon>
					</div>
					<div class="mt-10 font-12">
						<span class="text-grey mx-6">距离你 0.7km</span>
					</div>
				</div>
				<div v-if="mode == 'mode-3'">
					<div class="row-center">
						<el-icon><Location /></el-icon>
						<span class="mx-6">广州番禺南村镇（建奇大厦5号）...</span>
					</div>
					<div class="mt-10 font-12">
						<span class="text-grey">由</span>
						<span class="text-grey mx-6">南村1号店</span>
						<span class="text-grey">提供</span>
					</div>
				</div>
			</div>
		</div>
		<div class="banner" v-if="banner.open">
			<el-carousel
				:class="[{ 'is-float': float.open }]"
				:style="{ height: `${props.banner.height / 2}px` }"
			>
				<el-carousel-item v-for="(item, index) in banner.list" :key="index">
					<img
						:src="item.pic"
						:class="[{ 'is-float': float.open }]"
						class="banner-item"
						:style="{ height: `${props.banner.height / 2}px` }"
					/>
				</el-carousel-item>
			</el-carousel>
			<div class="float" v-if="float.open">
				<div class="left" :style="leftStyle">
					<template v-if="float.left.mode === 'mode-1'">
						<el-image class="icon" fit="cover" :src="float.left.icon"></el-image>
						<div class="mt-20 text">{{ float.left.text }}</div>
					</template>
				</div>
				<div class="right" :style="rightStyle">
					<template v-if="float.right.mode === 'mode-1'">
						<el-image class="icon" fit="cover" :src="float.right.icon"></el-image>
						<div class="mt-20 text">{{ float.right.text }}</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" name="fix-positioning" setup>
import { ref, computed, type PropType } from "vue";
import { Location, ArrowDown, ArrowRight } from "@element-plus/icons-vue";
import { Form } from "../../types/form";

const props = defineProps({
	mode: {
		type: String,
		default: "mode-1"
	},
	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
			};
		}
	},
	banner: {
		type: Object as PropType<{ open: boolean; height: number; list: Form.Banner[] }>,
		default: () => {
			return {
				open: false,
				height: 750,
				list: []
			};
		}
	},
	float: {
		type: Object,
		default: () => {
			return {
				open: false,
				left: {
					text: "",
					mode: "mode-1",
					icon: "",
					color: "#000",
					backgroundColor: "#FFFFFF",
					link: {
						name: "",
						type: "",
						appid: "",
						page: ""
					}
				},
				right: {
					text: "",
					mode: "mode-1",
					icon: "",
					color: "#000",
					backgroundColor: "#FFFFFF",
					link: {
						name: "",
						appid: "",
						type: "",
						page: ""
					}
				}
			};
		}
	}
});
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,
		borderRadius: `${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px  ${props.styleSpacing.borderBottomLR / 2}px`,
		padding: `${props.styleSpacing.padding / 2}px`,
		minHeight: `${props.banner.open ? 250 : 100}px`,
		"--opacity": props.styleColor.opacity,
		"--background": props.styleColor.backgroundColor
	};
});

const leftStyle = computed(() => {
	let url = "";
	if (props.float.left.mode === "mode-2") {
		url = props.float.left.icon;
	}
	return {
		backgroundColor: props.float.left.backgroundColor,
		color: props.float.left.color,
		backgroundImage: `url('${url}')`
	};
});

const rightStyle = computed(() => {
	let url = "";
	if (props.float.right.mode === "mode-2") {
		url = props.float.right.icon;
	}
	return {
		backgroundColor: props.float.right.backgroundColor,
		color: props.float.right.color,
		backgroundImage: `url('${url}')`
	};
});
</script>

<style lang="scss" scoped>
.fix-positioning {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: 80px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	.header {
		position: absolute;
		top: 0;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		min-height: 80px;

		.is-bg {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 1;
		}
		.item {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 2;
		}
	}
	.banner {
		width: 100%;
		height: 100%;
		position: relative;
		.banner-item {
			width: 100%;
			max-width: 100%;
			height: 100%;
		}
		.float {
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 10px;
			left: 10px;
			right: 10px;
			.left {
				margin-right: 15px;
			}
			.right {
				margin-left: 15px;
			}

			.left,
			.right {
				width: 120px;
				height: 140px;
				border-radius: 6px;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.text {
					font-size: 16px;
					font-family: PingFang SC;
					font-weight: bold;
				}
				.icon {
					width: 70px;
					height: 70px;
				}
			}
		}
	}

	.is-mode-4 {
		display: none;
	}
	.mt-10 {
		margin-top: 10px;
	}
	.mt-20 {
		margin-top: 20px;
	}
	.mx-6 {
		margin: 0 6px;
	}
	.text-grey {
		color: var(--el-text-color-placeholder);
	}
	.font-12 {
		font-size: 12px;
	}
	.row-center {
		display: flex;
		align-items: center;
	}
	.flex-1 {
		flex: 1;
	}
}
.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;
}
.is-float {
	min-height: 350px;
	:deep(.el-carousel__item) {
		overflow: inherit !important;
	}
}
</style>
