<template>
	<el-card class="card">
		<div class="wrap">
			<div class="line" :style="{ backgroundColor: lineColor }"></div>
			<div class="header" :style="{ height: headerHeight }">
				<div class="iconWrap" :style="{ width: iconWidth }">
					<slot name="icon">
						<el-icon :size="20">
							<Edit />
						</el-icon>
					</slot>
				</div>
				<div
					class="titleWrap"
					:style="{
						backgroundColor: titleBackgroundColor,
						color: titleColor,
						paddingLeft: titleTextAlign === 'left' ? '0px' : '20px'
					}"
				>
					{{ title }}
				</div>
				<div class="rightWrap">
					<slot name="right">
						<div class="moreWrap">
							<el-button text @click="moreClick">
								<span class="moreText">更多</span>
								<el-icon :size="14"> <Plus /> </el-icon>
							</el-button>
						</div>
					</slot>
				</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: "48px"
	}
});
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;
}
.line {
	left: 1px;
	right: 1px;
	background-color: transparent;
	height: 1px;
	top: 0;
	position: absolute;
}
.header {
	height: 48px;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
	display: flex;
	flex-direction: row;
	align-items: stretch;
	z-index: 1;
	position: relative;
	flex-shrink: 0;
}
.iconWrap {
	width: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.titleWrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
	background-color: red;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.rightWrap {
	display: flex;
	justify-content: end;
	align-items: center;
	flex: 1;
}
.moreWrap {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	cursor: pointer;
	.moreText {
		margin-right: 3px;
	}
}
.body {
	flex: 1;
	padding: 14px 20px;
}
</style>
