<template>
	<div class="overview-card">
		<div class="overview-card-header">
			<div class="overview-card-header-left">
				<div class="overview-card-header-icon">
					<img :src="icon" alt="" />
				</div>
				<div class="overview-card-header-title">{{ title }}</div>
			</div>
			<div v-if="$slots.right" class="overview-card-header-right">
				<slot name="right" />
			</div>
		</div>
		<div class="overview-card-main">
			<slot />
		</div>
	</div>
</template>

<script setup>
defineProps({
	title: {
		type: String,
		default: ""
	},
	icon: {
		type: String,
		default: ""
	}
});
</script>

<style lang="scss" scoped>
.overview-card {
	height: 450px;
	box-sizing: border-box;
	border: 1px solid var(--border-black-5);
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: var(--bg-white-100);
	overflow: hidden;

	.overview-card-header {
		height: 53px;
		border-bottom: 1px solid rgba(240, 242, 244, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 27px 0 22px;

		.overview-card-header-left {
			display: flex;
			align-items: center;

			.overview-card-header-icon {
				width: 19px;
				height: 19px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.overview-card-header-title {
				margin-left: 19px;
				height: 26px;
				color: rgba(20, 89, 187, 1);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 700;
				line-height: 26px;
			}
		}

		.overview-card-header-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			height: 100%;
		}
	}

	.overview-card-main {
		height: calc(100% - 53px);
	}
}
</style>
