<template>
	<!-- 带标题的 container  -->
	<div class="sub-container" :style="{ padding }">
		<div class="title">
			<span class="icon" :class="iconClass[icon]"></span>
			<span>{{ title }}</span>
		</div>
		<div class="content">
			<slot />
		</div>
	</div>
</template>

<script>
export default {
	name: "SubContainer",
	props: {
		title: {
			type: String,
			default: "Default Title",
		},
		icon: {
			type: String,
			default: "default",
		},
		padding: {
			type: String,
			default: "10px",
		},
	},
	data() {
		return {
			iconClass: {
				clock: "icon-clock",
				docs: "icon-docs",
				oil: "icon-oil",
				gas: "icon-gas",
				xicao: "icon-xc",
				inWater: "icon-water-in",
				fan: 'icon-fan',
				ktop: 'icon-kiln-top',
				kbtm: 'icon-kiln-bottom',
			},
		};
	},
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/functions";

.sub-container {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.icon {
	height: adjust(17px);
	width: adjust(17px);
	margin-right: adjust(8px);
}

.icon-clock {
	background: url(../../assets/clock.png);
	background-size: 100% 100%;
}

.icon-docs {
	background: url(../../assets/docs.png);
	background-size: 100% 100%;
}

.icon-oil {
	background: url(../../assets/oil.png);
	background-size: 100% 100%;
}
.icon-gas {
	background: url(../../assets/gas-icon.png);
	background-size: 100% 100%;
}
.icon-xc {
	background: url(../../assets/xicao-icon.png);
	background-size: 100% 100%;
}
.icon-fan {
	background: url(../../assets/fan-icon.png);
	background-size: 100% 100%;
}
.icon-kiln-top {
	background: url(../../assets/kiln-top-icon.png);
	background-size: 100% 100%;
}
.icon-kiln-bottom {
	background: url(../../assets/kiln-bottom-icon.png);
	background-size: 100% 100%;
}

.icon-water-in {
	background: url(../../assets/water-temp.png);
	background-size: 100% 100%;
}

.title {
	/* margin: 12px 0; */
	margin-bottom: adjust(12px);
	font-size: adjust(17px);
	color: #72f2ff;
	font-family: sans-serif;
	user-select: none;
	display: flex;
	align-items: center;
}

.content {
	height: 1px;
	/* background: #eee; */
	flex: 1;
}
</style>
