<template>
	<div class="fix-banner is-bg" :style="baseStyle">
		<el-carousel
			trigger="click"
			:height="`${height / 2}px`"
			:autoplay="false"
			:type="mode"
			:indicator-position="indicatorPosition"
		>
			<el-carousel-item v-for="(item, index) in list" :key="index">
				<el-image :src="item.pic" fit="fill" class="pic">
					<template #error>
						<div class="image-slot">
							<el-icon><icon-picture /></el-icon>
						</div>
					</template>
				</el-image>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

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

const props = defineProps({
	mode: {
		type: String,
		default: ""
	},
	indicatorDots: {
		type: Boolean,
		default: true
	},
	height: {
		type: Number,
		default: 300
	},
	list: {
		type: Array as PropType<{ pic: string; link: Form.Link }[]>,
		default: () => {
			return [
				{
					pic: "",
					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 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 indicatorPosition = computed(() => {
	if (props.indicatorDots) return "";
	return "none";
});
</script>

<style lang="scss" scoped>
.fix-banner {
	box-sizing: border-box;
	overflow: hidden;
	.tips {
		font-size: 12px;
		color: #bfbfbf;
	}
	.pic {
		width: 100%;
		max-width: 100%;
		height: 100%;

		.image-slot {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.el-icon {
				font-size: 60px;
				color: var(--el-text-color-placeholder);
			}
		}
	}
	:deep(.el-carousel__item) {
		text-align: 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>
