<template>
	<div class="section-wrapper" :class="sectionClasses" :style="sectionStyles" :id="sectionId">
		<!-- 标题栏 -->
		<div v-if="showTitle" class="section-title" :style="titleStyles">
			<div v-if="titleIcon" class="title-icon-wrapper">
				<img :src="titleIcon" alt="标题图标" class="title-icon" />
			</div>
			<span class="title-text">{{ title }}</span>
			<div v-if="showTitleDecoration" class="title-decoration">
				<span class="title-deco-text">了解更多</span>
				<div class="title-deco-line"></div>
				<img :src="arrowIcon" alt="箭头" class="title-arrow" />
			</div>
		</div>

		<!-- 副标题 -->
		<div v-if="subtitle" class="section-subtitle" :style="subtitleStyles">
			<span>{{ subtitle }}</span>
		</div>

		<!-- 内容区域 -->
		<div class="section-content" :class="contentClasses">
			<slot></slot>
		</div>

		<!-- 背景图片 -->
		<div v-if="backgroundImage" class="section-bg-image" :style="{ backgroundImage: `url(${backgroundImage})` }">
		</div>

		<!-- 背景装饰 -->
		<div v-if="backgroundDecoration" class="section-bg-decoration"
			:style="{ backgroundImage: `url(${backgroundDecoration})` }"></div>
	</div>
</template>

<script>
	export default {
		name: 'SectionWrapper',
		props: {
			// 基础属性
			sectionId: {
				type: String,
				default: ''
			},

			// 标题相关
			showTitle: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			subtitle: {
				type: String,
				default: ''
			},
			titleIcon: {
				type: String,
				default: ''
			},

			// 布局相关
			layout: {
				type: String,
				default: 'column', // column, row, two-column
				validator: (value) => ['column', 'row', 'two-column'].includes(value)
			},
			align: {
				type: String,
				default: 'center', // flex-start, center, flex-end
				validator: (value) => ['flex-start', 'center', 'flex-end'].includes(value)
			},
			justify: {
				type: String,
				default: 'space-between', // flex-start, center, flex-end, space-between
				validator: (value) => ['flex-start', 'center', 'flex-end', 'space-between'].includes(value)
			},

			// 背景相关
			backgroundImage: {
				type: String,
				default: ''
			},
			backgroundDecoration: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: ''
			},

			// 样式相关
			padding: {
				type: String,
				default: ''
			},
			margin: {
				type: String,
				default: ''
			},
			borderRadius: {
				type: String,
				default: '5px'
			},
			boxShadow: {
				type: String,
				default: ''
			},

			// 特定布局样式
			twoColumnContent: {
				type: Object,
				default: () => ({
					leftWidth: '',
					rightWidth: '',
					leftHeight: '',
					rightHeight: ''
				})
			},

			// 标题装饰
			showTitleDecoration: {
				type: Boolean,
				default: false
			},
			arrowIcon: {
				type: String,
				default: 'src/assets/common/bottom.png'
			},

			// 额外的CSS类
			customClasses: {
				type: String,
				default: ''
			}
		},

		computed: {
			sectionClasses() {
				const classes = ['flex-col']
				if (this.customClasses) {
					classes.push(this.customClasses)
				}
				return classes.join(' ')
			},

			contentClasses() {
				const classes = []

				switch (this.layout) {
					case 'row':
						classes.push('flex-row')
						break
					case 'two-column':
						classes.push('flex-row', 'space-x-0') /* Tailwind equivalent */
						break
					default:
						classes.push('flex-col')
				}

				classes.push(`justify-${this.justify}`, `items-${this.align}`)

				return classes.join(' ')
			},

			sectionStyles() {
				const styles = {}

				if (this.padding) {
					if (this.padding.includes('rem')) {
						styles.padding = this.padding
					} else {
						styles.padding = `${this.padding}vw`
					}
				}

				if (this.margin) {
					if (this.margin.includes('rem')) {
						styles.margin = this.margin
					} else {
						styles.margin = `${this.margin}vw`
					}
				}

				if (this.backgroundColor) {
					styles.backgroundColor = this.backgroundColor
				}

				if (this.borderRadius) {
					styles.borderRadius = this.borderRadius
				}

				if (this.boxShadow) {
					styles.boxShadow = this.boxShadow
				}

				return styles
			},

			titleStyles() {
				const styles = {
					height: this.showTitleDecoration ? '6.46vw' : 'auto',
					paddingTop: '1.67vw',
					paddingBottom: '0'
				}

				if (this.layout === 'row') {
					styles.width = '26.11vw'
				}

				return styles
			},

			subtitleStyles() {
				return {
					paddingTop: '1.25vw',
					paddingBottom: '1.25vw'
				}
			}
		}
	}
</script>

<style scoped>
	.section-wrapper {
		position: relative;
		overflow: hidden;
	}

	.section-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.title-icon-wrapper {
		width: 7.99vw;
		height: 3.75vw;
		position: relative;
	}

	.title-icon {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.title-text {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 2.5vw;
		font-family: 'Gilroy-Bold', sans-serif;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 2.81vw;
		margin: 0 1vw;
	}

	.title-decoration {
		display: flex;
		align-items: center;
		height: 6.46vw;
	}

	.title-deco-text {
		color: rgba(255, 255, 255, 1);
		font-size: 1.25vw;
		font-family: OPPOSans-M;
		font-weight: 500;
		white-space: nowrap;
		line-height: 2.19vw;
	}

	.title-deco-line {
		width: 5vw;
		height: 1px;
		background: rgba(255, 255, 255, 0.6);
		margin-left: 1vw;
	}

	.title-arrow {
		width: 0.52vw;
		height: 0.52vw;
		margin-left: 0.67vw;
	}

	.section-subtitle {
		/* 样式根据需要调整 */
	}

	.section-content {
		flex: 1;
		position: relative;
		z-index: 1;
	}

	.section-bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 0;
	}

	.section-bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 0;
	}

	/* Tailwind-like classes for layout */
	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-flex-start {
		justify-content: flex-start;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-flex-end {
		justify-content: flex-end;
	}

	.justify-space-between {
		justify-content: space-between;
	}

	.items-flex-start {
		align-items: flex-start;
	}

	.items-center {
		align-items: center;
	}

	.items-flex-end {
		align-items: flex-end;
	}

	.space-x-0>*+* {
		margin-left: 0;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.section-title {
			flex-direction: column;
			text-align: center;
		}

		.title-decoration {
			margin-top: 1rem;
		}

		.section-content.flex-row,
		.section-content.two-column {
			flex-direction: column;
		}
	}
</style>