<template>
	<div class="vehicleBox">
		<div class="top">
			<div class="left">
				<TopLeft ref="topLeftRef"></TopLeft>
			</div>
			<div class="right">
				<TopRight ref="topRightRef"></TopRight>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-left">
				<BottomLeft ref="bottomLeftRef"></BottomLeft>
			</div>
			<div class="bottom-right">
				<BottomRight ref="bottomRightRef"></BottomRight>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import TopLeft from "@/views/sevenLargeScreen/vehicleManagement/topLeft.vue";
import TopRight from "@/views/sevenLargeScreen/vehicleManagement/topRight.vue";
import BottomLeft from "@/views/sevenLargeScreen/vehicleManagement/bottom-left.vue";
import BottomRight from "@/views/sevenLargeScreen/vehicleManagement/bottom-right.vue";
import { ref,onMounted,onBeforeUnmount,nextTick	 } from "vue";
// export default {
// 	components: {
// 		TopLeft,
// 		TopRight,
// 		BottomLeft,
// 		BottomRight
// 	}
// };
const topLeftRef = ref();
const topRightRef = ref();
const bottomLeftRef = ref();
const bottomRightRef = ref();
const callChildFn = async () => {
	nextTick( async () =>{
		topLeftRef.value.getBoxAlarmList()
		topRightRef.value.getExitList()
		bottomLeftRef.value.getMemberCareList()
		bottomRightRef.value.getVehicleList()
	})
	// await topLeftRef.value.getBoxAlarmList()
  // await topRightRef.value.getExitList()
  // await bottomLeftRef.value.getMemberCareList()
  // await bottomRightRef.value.getVehicleList()
}
//定时器
const interval = ref(null as any);
//定时调用
const startInterval = async () => {
	interval.value= setInterval(() => {
		callChildFn();
	}, 30 * 1000);
}
// 在组件销毁时清除 interval
const destroyInterval = () => {
	if (interval.value) {
		clearInterval(interval.value);
  }
}
// 在组件销毁时调用 destroyInterval 方法清除 interval
onBeforeUnmount(() => {
	destroyInterval();
})
window.onbeforeunload = (e) => {
	destroyInterval();
}
onMounted(() => {
	startInterval();
});
</script>

<style lang="scss" scoped>
.vehicleBox {
	width: 100%;
	height: 100%;
	.top {
		height: 49%;
		display: flex;
		margin-bottom: 1%;
		.left {
			width: 49%;
			margin-right: 1%;
		}
		.right {
			width: 50%;
		}
	}
	.bottom {
		height: 49%;
		display: flex;
		.bottom-left{
			width: 20%;
			margin-right: 1%;
		}
		.bottom-right{
			flex: 1;
		}
	}
}
</style>
