<template>
	<div
		class="history-temp flex flex-col"
		style="height: 100%; position: relative"
	>
		<h3>{{ title }}</h3>
		<BarChart class="flex-1" :series="series" />
		<div
			v-if="series && series.length === 0"
			style="
				position: absolute;
				top: 8px;
				left: -20px;
				width: 110%;
				height: 105%;
				background: #eee1;
				display: grid;
				place-items: center;
				font-size: 32px;
				letter-spacing: 6px;
				color: #777;
			"
		>
			无数据
		</div>
	</div>
</template>

<script>
import BarChart from "../charts/BarChart.vue";

export default {
	name: "HistoryTemp",
	components: { BarChart },
	props: {
		series: {
			type: Array,
			default: () => [],
		},
		title: {
			type: String,
			default: "窑炉历史温度趋势",
		},
	},
	data() {
		return {};
	},
};
</script>

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

.flex-1 {
	flex: 1;
	// background: #eee;
}

.history-temp {
	// background: #f003;
}

h3 {
	margin: 0;
	font-family: sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 34px;
	letter-spacing: 2px;
	color: #0c71ff;
	margin: 0;
}
</style>
