<template>
	<div style="font-size: 14px;" class="padding-tb-xs">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-for="(faitem,faind) in newData" :key="faind">
				<el-card class="box-card text-center" :body-style="{ height: ($store.state.app.device == 'desktop'?'calc(100vh - 100px)':'auto') }">
					<div class="flex justify-between">
						<div class="text-lg text-bold margin-bottom-xs">{{faind+1}}#发电机</div>
						<div>运行时间：<span class="aisNum"><TextValue :value="faitem[0][1].value"/></span> {{faitem[0][1].unit}}</div>
					</div>
					<div>
						<div class="flex align-center">
							<div class="flex-sub">
								<dashChart :name="`engine-speed-${faind}`" style="height:140px;" :data="faitem[0][0]" />
								<div style="margin-top: -10px;"><span class="aisNum"><TextValue :value="faitem[0][0].value"/></span> {{faitem[0][0].unit}}</div>
								<div>转速</div>
							</div>
							<div class="flex-sub">
								<dashChart :name="`engine-pressure-${faind}`" style="height:140px;" :data="faitem[0][2]" />
								<div style="margin-top: -10px;"><span class="aisNum"><TextValue :value="faitem[0][2].value"/></span> {{faitem[0][2].unit}}</div>
								<div>滑油压力</div>
							</div>
						</div>
						<div class="flex align-center margin-tb-lg">
							<tempCell class="flex-sub" v-for="(suit,subind) in faitem[1]" :key="subind" :data="suit"/>
						</div>
						<div class="warnDrog">
							<div v-for="(wuit,wubind) in faitem[2]" :key="wubind" 
								class="padding-lr-sm padding-tb-xs" style="width:20%;">
								<svg-icon icon-class="wramicon" class="margin-bottom-xs text-xxl" 
									:class="wuit.value == 1?(wuit.type == 1?'text-green':'text-red'):'text-grey'"/>
								<div style="font-size: 12px;">{{wuit.name}}</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted,onBeforeUnmount,nextTick } from 'vue';
	import dashChart from "@/components/Echarts/dashChart";
	import tempCell from "@/components/Temperature/cellTemp";
	import { getCurrencyConfigByName, getCurrencyConfigByMid } from "@/utils/index";
	const store = useStore();   
	const { proxy } = getCurrentInstance();
	const newData = computed(() => {
		let angol1 = {};
		let _obj =[[[
				// 1号发电机
				{ ...getCurrencyConfigByMid("06H"), radius: "100%" },
				getCurrencyConfigByMid("068"),
				{ ...getCurrencyConfigByMid("064"), radius: "100%" },
			],[
				{ ...getCurrencyConfigByMid("066"), type: "cell" },
				{ ...getCurrencyConfigByMid("060"), type: "temp" },
				{ ...getCurrencyConfigByMid("062"), type: "temp" }
			],[{name: "1号发电机运行", value: 1, type: 1},
			   {name: "1号自动状态", value: 0},
			   {name: "1号备车完毕", value: 0},
			   {name: "1号转速高报警", value: 0},
			   {name: "1号滑油低压报警", value: 0},
			   {name: "1号滑油温度高报警", value: 0},
			   {name: "1号3次起动失败", value: 0},
			   {name: "1号电瓶欠压标记", value: 0},
			   {name: "1号燃油泄漏报普", value: 0},
			   {name: "1号超速停机报警", value: 0},
			   {name: "1号油压传感故障", value: 0},
			   {name: "1号水温传感故障", value: 0},
			   {name: "1号油温传感故障", value: 0}
			]],[[
				// 2号发电机
				{ ...getCurrencyConfigByMid("08H"), radius: "100%" },
				getCurrencyConfigByMid("088"),
				{ ...getCurrencyConfigByMid("084"), radius: "100%" },
			],[
				{ ...getCurrencyConfigByMid("086"), type: "cell" },
				{ ...getCurrencyConfigByMid("080"), type: "temp" },
				{ ...getCurrencyConfigByMid("082"), type: "temp" }
			],[{name: "2号发电机运行", value: 1, type: 1},
			   {name: "2号自动状态", value: 0},
			   {name: "2号备车完毕", value: 0},
			   {name: "2号转速高报警", value: 0},
			   {name: "2号滑油低压报警", value: 0},
			   {name: "2号滑油温度高报警", value: 0},
			   {name: "2号3次起动失败", value: 0},
			   {name: "2号电瓶欠压标记", value: 0},
			   {name: "2号燃油泄漏报普", value: 0},
			   {name: "2号超速停机报警", value: 0},
			   {name: "2号油压传感故障", value: 0},
			   {name: "2号水温传感故障", value: 0},
			   {name: "2号油温传感故障", value: 0}
			]],[[
				// 3号发电机
				{ ...getCurrencyConfigByMid("0AH"), radius: "100%" },
				getCurrencyConfigByMid("0A8"),
				{ ...getCurrencyConfigByMid("0A4"), radius: "100%" },
			],[
				{ ...getCurrencyConfigByMid("0A6"), type: "cell" },
				{ ...getCurrencyConfigByMid("0A0"), type: "temp" },
				{ ...getCurrencyConfigByMid("0A2"), type: "temp" }
			],[{name: "3号发电机运行", value: 0, type: 1},
			   {name: "3号自动状态", value: 0},
			   {name: "3号备车完毕", value: 0},
			   {name: "3号转速高报警", value: 0},
			   {name: "3号滑油低压报警", value: 0},
			   {name: "3号滑油温度高报警", value: 0},
			   {name: "3号3次起动失败", value: 0},
			   {name: "3号电瓶欠压标记", value: 0},
			   {name: "3号燃油泄漏报普", value: 0},
			   {name: "3号超速停机报警", value: 0},
			   {name: "3号油压传感故障", value: 0},
			   {name: "3号水温传感故障", value: 0},
			   {name: "3号油温传感故障", value: 0}
			]]];
		return JSON.parse(JSON.stringify(_obj).replace(/发电机/g,"").replace(/温度/g,"")) 
	})
</script>

<style lang='scss' scoped>
	.warnDrog{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		padding-top:10px;
		&::after{
			content: "";
			position: absolute;
			top: 0;
			left: 10%;
			width: 80%;
			opacity: 0.2;
			border-top: 1px solid var(--el-text-color-primary);
		}
	}
	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size:20px;
	}
	
</style>
