<template>
	<div class="custom-container" :style="containerStyle">
		<!-- 顶部区域 -->
		<div class="header-top">
			<slot name="header-top"></slot>
		</div>
		<div class="container-header" :style="headerStyle">
			<div class="header-left" :style="{ paddingLeft: block ? 0 : '14px' }">
				<slot name="header-left">
					<div v-if="block" class="blue-title-block"></div>
					<el-image v-else :src="titleIcon" class="header-icon" fit="contain" />
					<div :class="headerTitleClasses">{{ title }}</div>
					<div v-if="props.headerNum > 0" class="num-box">
						<div class="num">
							{{ headerNum }}
						</div>
					</div>
				</slot>
			</div>
			<div class="header-right">
				<slot name="header-right"></slot>
				<!-- <img class="pushpin" src="@/assets/images/icon-pushpin.png" alt="" /> -->
			</div>
		</div>

		<!-- 内容区域 -->
		<div class="container-content" :style="contentStyle">
			<slot>
				<div class="content-placeholder">
					<el-icon><Document /></el-icon>
					<div>这里是内容区域</div>
				</div>
			</slot>
		</div>

		<!-- 底部区域 -->
		<div class="container-footer" :style="footerStyle">
			<slot name="footer">
				<!-- <el-button>默认按钮</el-button> -->
			</slot>
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Document } from "@element-plus/icons-vue";

const props = defineProps({
	title: {
		type: String,
		default: "容器标题"
	},
	height: {
		type: String,
		default: ""
	},
	width: {
		type: String,
		default: "100%"
	},
	headerBorderBottom: {
		type: Boolean,
		default: true
	},
	titleIcon: {
		type: String,
		default: ""
	},
	titleType: {
		type: String,
		default: ""
	},
	block: {
		type: Boolean,
		default: false
	},
	headerNum: {
		type: Number,
		default: 0
	},
	bgColor: {
		type: String,
		default: "#ffffff"
	},
	headerBgColor: {
		type: String,
		default: ""
	},
	contentBgColor: {
		type: String,
		default: ""
	},
	footerBgColor: {
		type: String,
		default: "#f8fafc"
	}
});

const headerTitleClasses = computed(() => [
	"header-title",
	{
		[`header-title-${props.titleType}`]: props.titleType
	}
]);

const containerStyle = computed(() => ({
	width: props.width,
	height: props.height,
	backgroundColor: props.bgColor
}));

const headerStyle = computed(() => {
	const style = {};

	if (props.headerBgColor) {
		style.background = props.headerBgColor;
	} else if (props.bgColor) {
		style.backgroundColor = props.bgColor;
	}

	if (!props.headerBorderBottom) {
		style.borderBottom = "none";
	}

	return style;
});

const contentStyle = computed(() => ({
	backgroundColor: props.contentBgColor || props.bgColor
}));

const footerStyle = computed(() => ({
	backgroundColor: props.footerBgColor || props.bgColor
}));
</script>

<style scoped lang="scss">
.custom-container {
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(60, 87, 126, 0.2);
	overflow: hidden;
	margin-bottom: 24px;
	position: relative;
	transition: all 0.3s ease;
}

.container-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 48px;
	padding: 0 16px;
	border-bottom: 1px solid #ebeef5;
	padding-left: 0;
	transition: background-color 0.3s ease;
}

.header-left {
	display: flex;
	align-items: center;
	padding-left: 14px;
	.num-box {
		height: 48px;
		width: 35px;
		background: rgba(206, 79, 81, 1);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.num {
			width: 24px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			color: rgba(255, 255, 255, 1);
			font-family: Microsoft YaHei;
			font-size: 12px;
			border-radius: 100px;
			background: rgba(255, 255, 255, 0.3);
		}
	}
}

.header-icon {
	width: 22px;
	height: 18px;
	margin-left: 5px;
	margin-right: 14px;
}

.blue-title-block {
	width: 8px;
	height: 16px;
	background-color: $base-color;
	margin-right: 4px;
}

.header-title {
	font-family: $base-font-family;
	font-size: 20px;
	font-weight: 700;
	color: $base-color;
	line-height: 48px;
}

.header-title-primary {
	background: $base-color;
	color: white;
}

.header-title-danger {
	background: rgba(206, 79, 81, 1);
	color: white;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.pushpin {
	width: 28px;
	height: 28px;
}

.container-content {
	padding: 24px;
	padding-top: 10px;
	height: 80%;
	transition: background-color 0.3s ease;
}

.content-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #909399;
	font-size: 16px;
}

.content-placeholder .el-icon {
	font-size: 48px;
	margin-bottom: 16px;
	color: #dcdfe6;
}

.container-footer {
	background-color: #f8fafc;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	transition: background-color 0.3s ease;
}
</style>
