<template>
	<!-- 窑炉进口水温 -->
	<Container class="in-water" usage="NumberAndChart">
		<SubContainer title="进口实时水温" icon="inWater">
			<!-- <div class="pic" style=""></div> -->
			<div class="content flex">
				<div class="realtime">
					<div class="time flex flex-center">
						<span class="temp-data">{{ waterInTemp }}</span>
						<span class="unit">℃</span>
					</div>
				</div>
				<div class="graph flex-1">
					<HistoryTrend
						key="water-in"
						title="窑炉进口水温历史"
						:series="kilnWaterIn"
					/>
				</div>
			</div>
		</SubContainer>
	</Container>
</template>

<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import DigitalBox from "../common/DigitalBox.vue";
import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex";

export default {
	name: "InWater",
	props: {},
	components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
	data() {
		return {
			chartConfig: {},
		};
	},
	computed: {
		...mapState(["kilnWaterIn", "waterInTemp"]),
	},
};
</script>

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

.in-water {
	position: absolute;
	top: -200px;
	left: 27px;
	height: 509px;
	width: 1323px;
	background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat,
		#0068ff33;
}

.content {
	height: 100%;
}

.realtime {
	width: 530px;
	// height: 337px;
	background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat,
		url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat;
}

.graph {
	// background: #ccc3;
}

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

.time {
	transform: translate(56px, 80px);
	// background: #eee;
}

.time--item:not(:last-child) {
	margin-right: adjust(5px);
}

.temp-data {
	color: #0068ff;
	font-size: 80px;
	letter-spacing: 2px;
}

.unit {
	font-family: sans-serif !important;
	font-size: 48px;
	font-weight: 400;
	letter-spacing: 1px;
	align-self: flex-end;
	margin-bottom: 4px;
	margin-left: 4px;
	color: #0068ff;
}
</style>
