<template>
	<DragabbleContainer class="isolate-area-1">
		<div class="data pressure">
			<span>压</span>
			<span>力</span>
			<span
				v-for="(press, index) in pressure"
				:key="index"
				:class="{ digit: true, dot: press == '.' ? true : false }"
				>{{ press }}</span
			>
			<span>Pa</span>
		</div>
		<SmallBox2
			class="data-center"
			v-for="rd in rdata"
			:key="rd.icon"
			:icon="rd.icon"
			:title="rd.title"
			:value="rd.value"
		></SmallBox2>
		<!-- <div class="data runtime">
      <span>运</span>
      <span>行</span>
      <span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
      <span>天</span>
    </div> -->
	</DragabbleContainer>
</template>

<script>
import DragabbleContainer from "../layout/DragableContainer.vue";
import SmallBox2 from "../common/SmallBox2.vue";
import { mapState } from "vuex";

let timeFun = null;

export default {
	name: "IsolateArea--1",
	components: { DragabbleContainer, SmallBox2 },
	data() {
		return {
			pressure: "10.1".split(""),
			runtime: "0012".split(""),
			rdata: [
				// { icon: "temp", title: "车间温度", value: "27℃" },
				{ icon: "fire", title: "当前火向", value: "" },
				{ icon: "clock", title: "换火时间", value: "20分" },
				{ icon: "sand", title: "剩余时间", value: "19分20秒" },
			],
		};
	},
	watch: {
		fireDirection: function (val) {
			this.$set(this.rdata[0], "value", val);
		},
		fireChangeTime: function (val) {
			this.$set(this.rdata[1], "value", val);
		},
		lastFireChangeTime: function (val) {
			let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || "0分0秒");
			if (timeFun) clearInterval(timeFun);
			timeFun = setInterval(() => {
				if (sec > 0) sec -= 1;
				else {
					if (min > 0) {
						sec = 59;
						min -= 1;
					} else {
						if (timeFun) clearInterval(timeFun);
					}
				}
				this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
			}, 1000);
		},
		kilnPressure: function(val) {
			this.pressure = val.split("")
		}
	},
	computed: {
		...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
	},
};
</script>

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

.isolate-area-1 {
	display: flex;
	color: $main-color;
	min-width: 300px;
	align-items: flex-end;

	> *:not(:last-child) {
		margin: {
			right: 128px;
		}
	}

	> .data {
		flex-shrink: 0;
		font-family: zcoolqingkehuangyouti-Regular, sans-serif;
		display: flex;
		align-items: flex-end;
	}

	> .data > span:not(.dot) {
		/** 边框 */
		background: url("../../assets/digitbox1.png") no-repeat;
		background-size: 100% 100%;
		display: inline-block;
		width: 228px;
		height: 299px;
		color: #0068ffaa;
		font-size: 142px;
		line-height: 328px;
		text-align: center;
		vertical-align: bottom;
		user-select: none;
	}

	> .data > span.digit {
		/** 数字字体大小 */
		color: #0071ff;
		font-size: 242px;
		line-height: 286px;
	}
}
</style>
