<template>
	<el-card class="card">
		<div class="wrap">
			<div class="header" :style="{ height: headerHeight }">
				<div class="iconWrap"></div>
				<div class="titleWrap">
					{{ title }}
				</div>
				<div class="rightWrap">
					<slot name="right"> </slot>
					<div class="ButtonWrap">
						<div class="button buttonXiazai"></div>
						<div class="button buttonShoucang"></div>
					</div>
				</div>
			</div>
			<div class="body">
				<slot name="default"> </slot>
			</div>
		</div>
	</el-card>
</template>

<script setup>
import { Edit, Plus } from "@element-plus/icons-vue";
const emit = defineEmits(["moreClick"]);
defineProps({
	titleBackgroundColor: {
		type: String,
		default: "red"
	},
	titleColor: {
		type: String,
		default: "#fff"
	},
	titleTextAlign: {
		type: String,
		default: "center"
	},
	lineColor: {
		type: String,
		default: "transparent"
	},
	title: {
		type: String,
		default: "风险信号"
	},
	iconWidth: {
		type: String,
		default: "60px"
	},
	headerHeight: {
		type: String,
		default: "56px"
	}
});
function moreClick() {
	emit("moreClick");
}
</script>

<style lang="scss" scoped>
.card {
	position: relative;
	:deep(.el-card__body) {
		padding: 0;
		height: 100%;
	}
}
.wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.header {
	height: 56px;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 1;
	position: relative;
	flex-shrink: 0;
	padding-right: 12px;
}
.iconWrap {
	width: 8px;
	height: 16px;
	border-radius: 0 4px 4px 0;
	background: var(--color-main-active);
}
.titleWrap {
	margin-left: 16px;
	height: 16px;
	line-height: 16px;
	color: var(--color-main-active);
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
}
.rightWrap {
	display: flex;
	justify-content: end;
	align-items: center;
	flex: 1;
}
.ButtonWrap {
	display: flex;
	align-items: center;
	.button {
		width: 28px;
		height: 28px;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.buttonXiazai {
		background-image: url("../assets/images/xiazaiIcon.png");
		margin-right: 4px;
	}
	.buttonShoucang {
		background-image: url("../assets/images/shoucangIcon.png");
	}
}
.body {
	flex: 1;
	min-height: 0;
}
</style>
