<template>
	<div class="custom-container" :style="{ height: height ? height : 'auto' }">
		<!-- 顶部区域 -->
		<div class="header-top">
			<slot name="header-top"></slot>
		</div>
		<div class="container-header">
			<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">
			<slot>
				<div class="content-placeholder">
					<el-icon><Document /></el-icon>
					<div>这里是内容区域</div>
				</div>
			</slot>
		</div>

		<!-- 底部区域 -->
		<div class="container-footer">
			<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: ""
	},
	titleIcon: {
		type: String,
		default: ""
	},
	titleType: {
		type: String,
		default: ""
	},
	block: {
		type: Boolean,
		default: false
	},
	headerNum: {
		type: Number,
		default: 0
	}
});

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

<style scoped lang="scss">
.custom-container {
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(60, 87, 126, 0.2);
	overflow: hidden;
	width: 100%;
	margin-bottom: 15px;
	position: relative;
}

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

.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: 1px solid rgba(255, 255, 255, 1);
			border-radius: 100px;
			background: rgba(255, 255, 255, 0.3);
		}
	}
}

.header-icon {
	width: 20px;
	height: 20px;
	margin-right: 14px;
}

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

.header-title {
	font-size: $base-font-size;
	font-weight: 700;
	/* color: rgba(10, 87, 166, 1); */
	/* color: var(--base-color); */
	color: $base-color;
	line-height: 48px;
	padding: 0 12px;
}

.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;
	/* min-height: 200px; */
	padding-top: 10px;
	height: 80%;
}

.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 {
	/* padding: 16px 24px; */
	background-color: #f8fafc;
	/* border-top: 1px solid #ebeef5; */
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}
</style>
