<template>
	<div class="padding-xs" style="font-size:14px;">
		<el-menu :default-active="tabAngol" class="el-menu-demo" active-text-color="#000" mode="horizontal" @select="changeTab">
			<el-menu-item style="line-height: 36px;" index="0">主机数据</el-menu-item>
			<el-menu-item style="line-height: 36px;" index="1">辅机数据</el-menu-item>
			<div class="changeEch pointer">折线图<el-icon><Refresh/></el-icon></div>
		</el-menu>
		<div v-if="tabAngol == 0">
			<el-row :gutter="5" class="margin-top-xs text-center">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-card class="box-card" :body-style="{ height: 'calc(100vh - 140px)',padding: '10px' }">
						<div style="height: 34%;" class="flex">
							<div class="flex-sub">
								<div>主机转速</div>
								<dashChart :name="`hostSpeed`" style="height:160px;" :data="newData.speed" />
								<div style="margin-top: -10px;">
									<span class="aisNum"><TextValue :value="newData.speed.value"/></span> {{newData.speed.unit}}
								</div>
							</div>
							<div class="flex-twice">
								<div>1-6#缸排气温度（平均温度：<span class="aisNum">{{newData.cylinderTempData.avge}}</span>℃）</div>
								<barChart :name="`hostCylinderTemp`" style="height:170px;" :data="newData.cylinderTempData" />
							</div>
						</div>
						<div style="height: 35%;" class="flex padding-tb-sm">
							<div style="writing-mode:tb-rl;line-height: 36px;">0-7#主轴承温度</div>
							<barChart :name="`hostBearTemp`" style="height: 100%;width: calc(100% - 40px);" :data="newData.bearTempData" />
						</div>
						<div style="height: 31%;" class="flex">
							<div class="flex-sub text-center padding-sm"
								v-for="(sud,dju) in newData.hostCBWram" :key="dju">
								<div class="margin-bottom-sm">{{sud.text}}</div>
								<div class="flex flex-wrap">
									<div v-for="(wuit,wubind) in sud.data" :key="wubind" 
										class="padding-lr-sm padding-tb-xs" style="width:25%;">
										<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>
						</div>
					</el-card>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-card class="box-card margin-bottom-xs" :body-style="{ height: 'calc(50vh - 74px)',padding: '10px' }">
						<el-row :gutter="5">
							<el-col :span="9">
								<div class="margin-bottom">增压器</div>
								<div class="text-left padding-left-sm">
									<div v-for="(ints,intind) in newData.superchargerData" :key="intind" class="margin-tb-sm">
										<span style="width:130px;display: inline-block;">{{ints.name}}</span>
										<span class="aisNum margin-right-sm" style="font-size: 1rem;">{{ints.value}}</span>
										<span>{{ints.unit}}</span>
									</div>
								</div>
							</el-col>
							<el-col :span="9">
								<div>涡轮排气温度</div>
								<div class="flex flex-wrap">
									<tempCell class="margin-top" style="width: 50%;" v-for="(suit,subind) in newData.turbineTemp" :key="subind" :data="suit"/>
								</div>
							</el-col>
							<el-col :span="6">
								<div>燃油进机</div>
								<div>
									<dashChart :name="`hostFuel`" style="height:120px;" :data="newData.fuelData[0]" />
									<div style="margin-top: -6px;" class="text-xs">
										{{newData.fuelData[0].name}}: <span class="aisNum" style="font-size: 1rem;"><TextValue :value="newData.fuelData[0].value"/></span> {{newData.fuelData[0].unit}}
									</div>
								</div>
								<tempCell class="margin-top" :data="newData.fuelData[1]"/>
							</el-col>
						</el-row>
					</el-card>
					<el-card class="box-card" :body-style="{ height: 'calc(50vh - 74px)',padding: '10px' }">
						<el-row :gutter="5">
							<el-col :span="6">
								<div>涡轮排气温度</div>
								<tempCell class="margin-top" v-for="(suit,subind) in newData.lubeTemp" :key="subind" :data="suit"/>
							</el-col>
							<el-col :span="9">
								<div>高温水</div>
								<div class="flex">
									<div class="flex-sub">
										<tempCell class="margin-top" v-for="(suit,subind) in newData.waterData[0]" :key="subind" :data="suit"/>
									</div>
									<div class="flex-sub">
										<div v-for="(wuit,wubind) in newData.waterData[1]" :key="wubind" class="padding-tb-xs">
											<svg-icon icon-class="wramicon" class="margin-top 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-col>
							<el-col :span="9">
								<div>中冷器</div>
								<div class="text-left padding-left-sm">
									<div v-for="(ints,intind) in newData.intercoolerData" :key="intind" class="margin-tb-sm">
										<span style="width:130px;display: inline-block;">{{ints.name}}</span>
										<span class="aisNum margin-right-sm" style="font-size: 1rem;">{{ints.value}}</span>
										<span>{{ints.unit}}</span>
									</div>
								</div>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<div v-if="tabAngol == 1">	
			<el-row :gutter="5" class="margin-top-xs">
				<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-for="(faitem,faind) in newData.EngineObj" :key="faind">
					<el-card class="box-card text-center" :body-style="{ height: ($store.state.app.device == 'desktop'?'calc(100vh - 140px)':'auto'),padding: '10px' }">
						<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">
								<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>
	</div>
</template>

<script setup>
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted,onBeforeUnmount } from 'vue';
	import dashChart from "@/components/Echarts/dashChart";
	import barChart from "@/components/Echarts/wayBillChart/barChart";
	import tempCell from "@/components/Temperature/cellTemp";
	import { getCurrencyConfigByName, getCurrencyConfigByMid } from "@/utils/index";
	
	const store = useStore();
	const { proxy } = getCurrentInstance();
	const angolData = ref(null);
	const allAngol = ref([]);
	const tabAngol = ref('0');
	const itemShipSn = ref(null);
	const newData = computed(() => {
		let _obj = {
			"speed": { ...getCurrencyConfigByMid("005"), radius: "100%" },
			"cylinderTempData": {
				xAxis: ['1#', '2#', '3#', '4#', '5#', '6#'],
				data: [106, 158, 185, 45, 69, 137],
				color: ['#fe9a1a', '#fe421b'],
				show: false,
				unit: "℃",
				avge: 118
			},
			"bearTempData": {
				xAxis: ['0#', '1#', '2#', '3#', '4#', '5#', '6#', '7#'],
				data: [54, 55, 54, 54, 55, 54, 54, 54],
				color: ['#fe9a1a', '#fe421b'],
				show: false,
				unit: "℃"
			},
			"hostCBWram": [{
				"text": "1-6#缸排气温度报警",
				"data": [{name: "1#", value: 0},
						 {name: "2#", value: 0},
						 {name: "3#", value: 0},
						 {name: "4#", value: 0},
						 {name: "5#", value: 0},
						 {name: "6#", value: 0},
						 {name: "缸平均排气", value: 0}]
				},{
					"text": "0-7#主轴承温度报警",
					"data": [{name: "0#", value: 0},
						 {name: "1#", value: 0},
						 {name: "2#", value: 0},
						 {name: "3#", value: 0},
						 {name: "4#", value: 0},
						 {name: "5#", value: 0},
						 {name: "6#", value: 0},
						 {name: "7#", value: 1}]
				}],
				"turbineTemp": [{name: "进口",value: 35,min: 0,max: 800, unit: "℃", type: "temp", size: true},
								{name: "出口",value: 150,min: 0,max: 800, unit: "℃", type: "temp", size: true},
								{name: "进口(上)",value: 107,min: 0,max: 800, unit: "℃", type: "temp", size: true},
								{name: "进口(下)",value: 171,min: 0,max: 800, unit: "℃", type: "temp", size: true}],
				"fuelData": [{name: "压力",value: 3.92,min: 0,max: 20, unit: "kPa", radius: "95%" },
							 {name: "温度",value: 40,min: 0,max: 150, unit: "℃", type: "temp", size: true}],
				"lubeTemp": [{name: "进机",value: 46,min: 0,max: 150, unit: "℃", type: "temp", size: true},
							 {name: "出机",value: 47,min: 0,max: 150, unit: "℃", type: "temp", size: true}],
				"waterData": [[{name: "进机",value: 46, unit: "℃", type: "temp", size: true},
									 {name: "出机",value: 47, unit: "℃", type: "temp", size: true}],
									 [{name: "进机温度报警", value: 0},
									  {name: "进机温度过高", value: 0},
									  {name: "出机温度报警", value: 0},
									  {name: "出机温度过高", value: 0}]],
				"superchargerData": [{name: "转速",value: 2988, unit: "RPM"},
									 {name: "滑油出口温度",value: 74, unit: "℃"},
									 {name: "滑油进口压力(＞500rpm)",value: 0.4, unit: "MPa"},
									 {name: "滑油进口压力(≤500rpm)",value: 0.4, unit: "MPa"}],
				"intercoolerData": [{name: "后进气温度",value: 43.00, unit: "℃"},
									 {name: "后进气温度低(＞500rpm)",value: 43.00, unit: "MPa"},
									 {name: "高温水进口压力(＞500rpm)",value: 0.20, unit: "MPa"},
									 {name: "高温水进口压力(≤500rpm)",value: 0.20, unit: "MPa"},
									 {name: "低温水进口压力(>500rpm)",value: 0.25, unit: "MPa"},
									 {name: "低温水进口压力(≤500rpm)",value: 0.25, unit: "MPa"}],
				"EngineObj": [[[
						// 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,"")) 
	})
	const changeTab = function(key){
		tabAngol.value = key;
	}
</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;
	}
	.changeEch{
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translate(0, -50%);
	}
</style>
