<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> -->
			<el-menu-item style="line-height: 36px;" index="1">综合报警</el-menu-item>
		</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 text-center">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<el-row :gutter="5">
						<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(col,colind) in newData.compAlarm[0]" :key="colind">
							<el-card class="box-card margin-bottom-xs" :body-style="{ height: 'calc(46vh - 84px)',padding: '10px' }">
								<div class="flex flex-wrap">
									<div v-for="(wuit,wubind) in col" :key="wubind" 
										class="padding-lr-sm padding-tb-sm" style="width: 33.33%;">
										<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>
							</el-card>
						</el-col>
						<el-col :span="24">
							<el-card class="box-card margin-bottom-xs" :body-style="{ height: 'calc(54vh - 68px)',padding: '10px' }">
								<div class="flex flex-wrap">
									<div v-for="(wuit,wubind) in newData.compAlarm[1]" :key="wubind" 
										class="padding-lr-sm padding-tb-sm" style="width: 16.66%;">
										<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>
							</el-card>
						</el-col>
					</el-row>
				</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(100vh - 146px)',padding: '10px' }">
						<div class="flex flex-wrap borders" style="border: 1px solid rgba(125,125,125,0.4);height: 100%;">
							<div v-for="(wuit,wubind) in newData.compAlarm[2]" :key="wubind" class="borWram">
								<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>
					</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"}],
				"compAlarm": [[[
					{name: "超速报警", value: 0},
					{name: "超速停机", value: 0},
					{name: "故障停机", value: 0},
					{name: "主电故障报警", value: 0},
					{name: "越控标记", value: 0},
					{name: "降负荷预报警", value: 0},
					{name: "降负荷", value: 0},
					{name: "停机预报警", value: 0},
					{name: "紧急停机按钮有效", value: 0} 	
				],[
					{name: "起动空气压力低报警", value: 0},
					{name: "控制空气压力底范警", value: 0},
					{name: "柴油进机压力低报普", value: 0},
					{name: "重油进机压力低报警", value: 0},
					{name: "淡水压力低报警", value: 0},
					{name: "海水压力低报警", value: 0},
					{name: "水温过高", value: 0},
					{name: "水压过低", value: 0},
					{name: "滑油压力过低", value: 0},
				]],[
					{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: 0},
					{name: "油进机温度低报警", value: 0},
					{name: "重油进机温度高报警", value: 0},
					{name: "中冷后空气温度高报警", value: 0},
					{name: "涡轮后排温高报警", value: 0},
					{name: "增压器滑油温度高报警", value: 0},
					{name: "增压器转速高报警", value: 0},
					{name: "齿轮箱滑油压力过低", value: 0},
					{name: "油压低报警", value: 0},
					{name: "水温高报警", value: 0},
					{name: "油湿高报警", value: 0},
					{name: "滑油滤压差高报", value: 0},
					{name: "燃油泄漏报警", value: 0},
					{name: "油秀浓度高报警", value: 0},
					{name: "油秀浓度过高", value: 0}
				],[
					{name: "燃油压力传感器断", value: 0},
					{name: "起动空气压力传感器断线", value: 0},
					{name: "机油压力传感器断线", value: 0},
					{name: "冷却水压力传感器断线", value: 0},
					{name: "冷却水温传感器断线", value: 0},
					{name: "滑油温传感器断线", value: 0},
					{name: "控制空气压力传感器断线", value: 0},
					{name: "滤压差传感器断线", value: 0},
					{name: "增压空气压力传感器断线", value: 0},
					{name: "增压空气温度传感器断线", value: 0},
					{name: "海水压力传感器断线", value: 0},
					{name: "燃油温度传感器断线", value: 0},
					{name: "增压器滑油温都传感器断线", value: 0},
					{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: 0},
					{name: "滑油压力过低开关断线", value: 0},
					{name: "水压过低开关断线", value: 0},
					{name: "油雾浓度过高开关断线", value: 0},
					{name: "齿轮箱油压低开关断线", value: 0},
					{name: "水温过高开关断线", value: 0}
				]]
					
				
		}
		return _obj
	})
	const changeTab = function(key){
		tabAngol.value = key;
	}
</script>

<style lang='scss' scoped>
	.borWram{
		width: 25%;
		height: 14%;
		padding: 10px;
		border-right: 1px solid rgba(125,125,125,0.4);
		border-bottom: 1px solid rgba(125,125,125,0.4);
		&:nth-child(4n+4){
			border-right: none;
		}
		&:nth-last-child(2),&:nth-last-child(1){
			border-bottom: none;
		}
	}
	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size:20px;
	}
</style>
