<template>
	<Card title="作业数据">
		<div class="gantry-bottom-center">
			<div class="work-data-box">
				<div class="work-data-item">
					<div class="left-contain">
						<div class="contain-title">大车</div>
						<div class="contain-row">
							<div class="text">行程</div>
							<div class="num">{{ currentData.largeCraneRange || 0 }} m</div>
							<div
								class="state"
								v-if="alarmData && alarmData.largeCarRangePreAlarm != null"
								:style="{
									background: tripTypeEnum[alarmData.largeCarRangePreAlarm].color
								}"
							>
								{{ tripTypeEnum[alarmData.largeCarRangePreAlarm].tripType }}
							</div>
						</div>
						<div class="contain-row">
							<div class="text">速度</div>
							<div class="num">{{ currentData.largeCraneSpeed || 0 }} m/s</div>
						</div>
					</div>
					<div class="left-contain">
						<div class="contain-title">小车1</div>
						<div class="contain-row">
							<div class="text">行程</div>
							<div class="num">{{ currentData.smallCraneRange || 0 }} m</div>
							<div
								class="state"
								v-if="alarmData && alarmData.smallCarRangePreAlarm != null"
								:style="{
									background: tripTypeEnum[alarmData.smallCarRangePreAlarm].color
								}"
							>
								{{ tripTypeEnum[alarmData.smallCarRangePreAlarm].tripType }}
							</div>
						</div>
						<div class="contain-row">
							<div class="text">速度</div>
							<div class="num">{{ currentData.smallCraneSpeed || 0 }} m/s</div>
						</div>
					</div>
					<div class="left-contain">
						<div class="contain-title">小车2</div>
						<div class="contain-row">
							<div class="text">行程</div>
							<div class="num">{{ currentData.secondSmallCraneRange || 0 }} m</div>
							<div
								class="state"
								v-if="alarmData && alarmData.secondSmallCarRangePreAlarm != null"
								:style="{
									background: tripTypeEnum[alarmData.secondSmallCarRangePreAlarm].color
								}"
							>
								{{ tripTypeEnum[alarmData.secondSmallCarRangePreAlarm].tripType }}
							</div>
						</div>
						<div class="contain-row">
							<div class="text">速度</div>
							<div class="num">{{ currentData.secondSmallCraneSpeed || 0 }} m/s</div>
						</div>
					</div>
				</div>
				<div class="work-data-bottom">
					<div class="right-contain">
						<div class="contain-title">小车1主钩</div>
						<div class="contain-row">
							<div class="text">吊量</div>
							<div class="num">{{ currentData.smallCraneMainHookLoad || 0 }} t</div>
							<div
								class="state"
								v-if="alarmData && alarmData.masterHookWeightAlarm != null"
								:style="{
									background: tripTypeEnum[alarmData.masterHookWeightAlarm].color
								}"
							>
								{{ tripTypeEnum[alarmData.masterHookWeightAlarm].tripType }}
							</div>
						</div>
						<div class="contain-row">
							<div class="text">高度</div>
							<div class="num">{{ currentData.smallCraneMainHookHeight || 0 }} m</div>
							<!-- <div class="state">正常</div> -->
						</div>
					</div>
					<div class="right-contain">
						<div class="contain-title">小车1副钩</div>
						<div class="contain-row">
							<div class="text">吊量</div>
							<div class="num">{{ currentData.smallCraneAuxiliaryHookLoad || 0 }} t</div>
							<div
								class="state"
								v-if="alarmData && alarmData.subHookWeightAlarm != null"
								:style="{
									background: tripTypeEnum[alarmData.subHookWeightAlarm].color
								}"
							>
								{{ tripTypeEnum[alarmData.subHookWeightAlarm].tripType }}
							</div>
						</div>
						<div class="contain-row">
							<div class="text">高度</div>
							<div class="num">{{ currentData.smallCraneAuxiliaryHookHeight || 0 }} m</div>
							<!-- <div class="state">正常</div> -->
						</div>
					</div>
					<div class="right-contain">
						<div class="contain-title">小车2主钩</div>
						<div class="contain-row">
							<div class="text">吊量</div>
							<div class="num">{{ currentData.secondSmallCraneMainHookLoad || 0 }} t</div>
							<div
								class="state"
								v-if="alarmData && alarmData.secondMasterHookWeightAlarm != null"
								:style="{
									background: tripTypeEnum[alarmData.secondMasterHookWeightAlarm].color
								}"
							>
								{{ tripTypeEnum[alarmData.secondMasterHookWeightAlarm].tripType }}
							</div>
						</div>
						<div class="contain-row">
							<div class="text">高度</div>
							<div class="num">{{ currentData.secondSmallCraneMainHookHeight || 0 }} m</div>
							<!-- <div class="state">正常</div> -->
						</div>
					</div>
					<div class="right-contain">
						<div class="contain-title">小车2副钩</div>
						<div class="contain-row">
							<div class="text">吊量</div>
							<div class="num">{{ currentData.secondSmallCraneAuxiliaryHookLoad || 0 }} t</div>
							<div
								class="state"
								v-if="alarmData && alarmData.secondSubHookWeightAlarm != null"
								:style="{
									background: tripTypeEnum[alarmData.secondSubHookWeightAlarm].color
								}"
							>
								{{ tripTypeEnum[alarmData.secondSubHookWeightAlarm].tripType }}
							</div>
						</div>
						<div class="contain-row">
							<div class="text">高度</div>
							<div class="num">{{ currentData.secondSmallCraneAuxiliaryHookHeight || 0 }} m</div>
							<!-- <div class="state">正常</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import { getGantryCraneCurrentData, getGantryCraneAlarm } from "@/api/modules/gantryCrane";
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import mitts from "@/utils/bus"; //兄弟组件传值
import { GlobalStore } from "@/stores";
const store = GlobalStore();

let currentData = ref({});
// 实时数据
const getGantryCurrentData = async () => {
	const res: any = await getGantryCraneCurrentData({ projectSn: store.sn, devSn: gantryCraneDevSn.value });
	console.log("实时数据", res);
	currentData.value = res.result;
};
// 报警数据
let alarmData = ref({}) as any;
const getGantryAlarmData = async () => {
	const res: any = await getGantryCraneAlarm({ projectSn: store.sn, devSn: gantryCraneDevSn.value });
	if (res.result) {
		alarmData.value = res.result;
	} else {
		alarmData.value = null;
	}
	console.log("报警数据", alarmData.value);
};

// 报警状态 0: 正常1: 报警
let tripTypeEnum = ref([
	{
		value: 0,
		tripType: "正常",
		color: "#48da39"
	},
	{
		value: 1,
		tripType: "报警",
		color: "#ec6266"
	}
]);

let gantryCraneDevSn = ref("") as any;
onMounted(async () => {
	mitts.on("gantryCraneDevSn", e => {
		console.log("作业数据接收值", e);
		gantryCraneDevSn.value = e;
		getGantryCurrentData();
		getGantryAlarmData();
		// gerUserVideo();
		// setTimeout(() => {
		// 	gerUserVideo();
		// }, 500);
	});
});
//  
onBeforeUnmount(async () => {
	mitts.off("gantryCraneDevSn");
});
</script>

<style lang="scss" scoped>
.gantry-bottom-center {
	width: 100%;
	height: 100%;
	.work-data-box {
		width: 100%;
		height: 100%;
		.work-data-item {
			padding-top: 3%;
			height: 40%;
			display: flex;
			justify-content: space-around;
			.left-contain {
				width: 30%;
				box-sizing: border-box;
				padding: 1% 2%;
				background: url("@/assets/images/gantryCrane/workBg.png") no-repeat;
				background-size: 100% 100%;
			}
			.right-contain {
				width: 30%;
				box-sizing: border-box;
				padding: 1% 2%;
				background: url("@/assets/images/gantryCrane/workBg.png") no-repeat;
				background-size: 100% 100%;
			}
			.contain-title {
				color: #fff;
				font-size: 16px;
				margin-top: 2%;
			}
			.contain-row {
				display: flex;
				color: #a1accb;
				font-size: 12px;
				margin-top: 10%;
				.text {
					width: 20%;
				}
				.num {
					width: 30%;
					white-space: nowrap;
				}
				.state {
					width: 30%;
					padding: 1% 0;
					margin-left: 22%;
					color: #fff;
					text-align: center;
					background: #48da39;
				}
			}
		}
		.work-data-bottom {
			padding-top: 3%;
			height: 40%;
			display: flex;
			justify-content: space-around;
			.right-contain {
				width: 23%;
				box-sizing: border-box;
				padding: 1% 2%;
				background: url("@/assets/images/gantryCrane/workBg.png") no-repeat;
				background-size: 100% 100%;
			}
			.contain-title {
				color: #fff;
				font-size: 16px;
				margin-top: 8%;
			}
			.contain-row {
				display: flex;
				color: #a1accb;
				font-size: 12px;
				margin-top: 15%;
				.text {
					width: 30%;
				}
				.num {
					white-space: nowrap;
				}
				.state {
					width: 40%;
					margin-left: 20%;
					padding: 1% 0;
					color: #fff;
					text-align: center;
					background: #48da39;
				}
			}
		}
	}
}
</style>
