<template>
	<div style="font-size: 14px;" class="padding-xs">
		<el-row :gutter="5">
			<el-col :span="19" :xs="24">
				<el-card class="box-card text-bold" :body-style="{ padding: '0' }">
					<div class="square">导航数据</div>
					<el-row>
						<el-col :span="9" :xs="24">
							<div class="grid col-2 text-center">
								<div>
									<div>{{ newData['0a44'].name }}</div>
									<rudderDashChart :name="`ship-rudder`" style="height: calc(32vh - 88px);" :data="newData['0a44']"/>
								</div>
								<div>
									<div>{{ newData['0a8'].name }}</div>
									<roundDashChart :name="`ship-bow`" style="height: calc(32vh - 88px);" :data="newData['0a8']"/>
								</div>
							</div>
						</el-col>
						<el-col :span="9" :xs="24">
							<div class="grid col-2 text-center">
								<div>
									<div>{{ newData['0AA'].name }}</div>
									<roundDashChart :name="`ship-course`" style="height: calc(32vh - 88px);" :data="newData['0AA']"/>
								</div>
								<div>
									<div>{{ newData['0aQ'].name }}</div>
									<gaugeDashChart :name="`ship-rate`" style="height: calc(32vh - 88px);" :data="newData['0aQ']"/>
								</div>
							</div>
						</el-col>
						<el-col :span="6" :xs="24">
							<div class="flex flex-direction justify-around" style="height: calc(32vh - 68px);padding-left: 10%;">
								<div v-for="(meit,meind) in newData.meteo" :key="smeind">
									<text>{{meit.name}}：</text>
									<text class="text-xl margin-lr-xs text-blue">{{ meit.sign?duToGpsDM(meit.value, meit.sign):meit.value }}</text>
									<text>{{meit.unit}}</text>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>	
			<el-col :span="5" :xs="24">
				<el-card class="box-card text-bold"
					:body-style="{ padding: '0' }">
					<div class="square">气象信息</div>
					<div class="flex flex-direction justify-around" style="height: calc(32vh - 70px);padding-left: 10%;">
						<div v-for="(smeit,smeind) in newData.ais" :key="smeind">
							<svg-icon :icon-class="smeit.icon" class="text-xl margin-right-sm text-blue" style="vertical-align: middle;"/>
							<text>{{smeit.name}}：</text>
							<text class="text-xl margin-lr-xs text-blue">{{ smeit.value }}</text>
							<text>{{smeit.unit}}</text>
						</div>
					</div>
				</el-card>
			</el-col>	
		</el-row>
		<el-row :gutter="5">
			<el-col :span="19" :xs="24">
				<el-row :gutter="5">
					<el-col :span="18" :xs="24">
						<el-card class="box-card margin-tb-xs text-bold" :body-style="{ padding: '0' }">
							<div class="square">主机</div>
							<el-row :gutter="5" class="text-center padding-tb-xs">
								<el-col :span="3" :xs="12">
									<div class="flex flex-direction justify-between align-center" style="height: calc(34vh - 100px);">
										<div>运行时间</div>
										<div class="text-xxl">
											<text class="text-blue">{{ newData.hostli[0]['time'].value }}</text>
											<text class="text-df"> {{newData.hostli[0]['time'].unit}}</text>			
										</div>
										<div class="text-xs text-center">
											<div>运行状态：<text class="text-xl" :class="1 == 1?'text-green':'text-gray'">■</text></div>
											<div style="margin-top: -6px;">运行故障：<text class="text-xl" :class="0 == 1?'text-red':'text-gray'">■</text></div>
										</div>
									</div>
								</el-col>
								<el-col :span="6" :xs="12">
									<div>{{newData.hostli[0]['speed'].name}}</div>
									<specialDashChart :name="`ship-speed-one`" style="height: calc(34vh - 90px);" :data="newData.hostli[0]['speed']"/>
								</el-col>
								<el-col :span="6" :xs="24">
									<div class="flex justify-between padding-lr-xs" style="width: 100%;">
										<div style="width: calc(50% - 24px);">
											<div>1#主负荷</div>
											<div class="flex flex-direction justify-between align-center margin-tb-sm" style="height: calc(34vh - 130px);">
												<div style="height: 14%;width: 100%;" 
													:style="'background-image:linear-gradient(0deg, rgb(48, 176, 142) 0%, rgb(48, 176, 142) '+(getColorHei(index, newData.hostli[0]['hostLoad'].value))+'%, #F0F0F0 1%)'"
													v-for="(item,index) in 5" :key="index"></div>
											</div>
											<div class="text-df text-blue">{{newData.hostli[0]['hostLoad'].value}}{{newData.hostli[0]['hostLoad'].unit}}</div>
										</div>
										<div>
											<div style="opacity: 0;">荷</div>
											<div class="flex flex-direction justify-between align-center margin-tb-sm text-sm" style="height: calc(34vh - 130px);width: 40px;">
												<div>100%</div>
												<div>80%</div>
												<div>60%</div>
												<div>40%</div>
												<div>20%</div>
											</div>
										</div>
										<div style="width: calc(50% - 24px);">
											<div>2#主负荷</div>
											<div class="flex flex-direction justify-between align-center margin-tb-sm" style="height: calc(34vh - 130px);">
												<div style="height: 14%;width: 100%;" 
													:style="'background-image:linear-gradient(0deg, rgb(48, 176, 142) 0%, rgb(48, 176, 142) '+(getColorHei(index, newData.hostli[1]['hostLoad'].value))+'%, #F0F0F0 1%)'"
													v-for="(item,index) in 5" :key="index"></div>
											</div>
											<div class="text-df text-blue">{{newData.hostli[1]['hostLoad'].value}}{{newData.hostli[1]['hostLoad'].unit}}</div>
										</div>
									</div>
								</el-col>
								<el-col :span="6" :xs="12">
									<div>{{newData.hostli[1]['speed'].name}}</div>
									<specialDashChart :name="`ship-speed-two`" style="height: calc(34vh - 90px);" :data="newData.hostli[1]['speed']"/>
								</el-col>
								<el-col :span="3" :xs="12">
									<div class="flex flex-direction justify-between align-center" style="height: calc(34vh - 100px);">
										<div>运行时间</div>
										<div class="text-xxl">
											<text class="text-blue">{{ newData.hostli[1]['time'].value }}</text>	
											<text class="text-df"> {{newData.hostli[1]['time'].unit}}</text>			
										</div>
										<div class="text-xs text-center">
											<div>运行状态：<text class="text-xl" :class="1 == 1?'text-green':'text-gray'">■</text></div>
											<div style="margin-top: -6px;">运行故障：<text class="text-xl" :class="0 == 1?'text-red':'text-gray'">■</text></div>
										</div>
									</div>
								</el-col>
							</el-row>
						</el-card>
					</el-col>	
					<el-col :span="6" :xs="24">
						<el-card class="box-card margin-tb-xs"
							:body-style="{  height: ($store.state.app.device == 'desktop'?'calc(34vh - 35px)' : 'auto'),padding: '0' }">
							<div class="square text-bold">吃水信息</div>
							<div class="flex flex-direction align-center justify-around padding-lr-xs" style="height:calc(100% - 30px);">
								<div>
									<div class="grid col-2 margin-tb-sm text-center">
										<div class="padding-lr-sm">
											<el-image :src="heelIcon"></el-image>
											<div><text class="text-blue">7</text> °</div>
										</div>
										<div>
											<el-image :src="trimIcon"></el-image>
											<div><text class="text-blue">7</text>°</div>
										</div>
									</div>
								</div>
								<div class="grid col-2">
									<div>
										<div class="text-center text-xs"><text class="text-blue">7</text> m</div>
										<div class="flex align-center text-xs">
											<div><text class="text-blue">7.3</text> m</div>
											<el-image :src="quadIcon" style="width:calc(100% - 68px);margin:10px 4px;"></el-image>
											<div><text class="text-blue">7.3</text> m</div>
										</div>	
										<div class="text-center text-xs"><text class="text-blue">7</text> m</div>
									</div>
									<div>
										<div class="padding-left text-xs" style="position: relative;padding-right: 35px;">
											<el-image :src="soundIcon"></el-image>
											<div style="position: absolute;bottom:16%;left: calc(100% - 40px);"><text class="text-blue">7.3</text> m</div>
										</div>
									</div>
								</div>
							</div>
						</el-card>
					</el-col>	
					<el-col :span="18" :xs="24">
						<el-card class="box-card text-bold" 
							:body-style="{  padding: '0' }">
							<div class="square">发电机信息</div>
							<el-row :gutter="5">
								<template v-for="(item,index) in newData.engineli" :key="index">
									<el-col :span="6" :xs="24" class="padding-xs text-center">
										<div class="padding-left-xs">{{ index>2?'应急':(index+1)+'#' }}发电机</div>
										<roundbDashChart :name="`ship-engine-${index}`" style="height: calc(34vh - 107px);" :data="item.chart"/>
										<div class="text-xs text-center" style="margin-top: -20px;">
											<div>{{ item.runsta.name }}：<text class="text-xl" :class="item.runsta.value == 1?'text-green':'text-gray'">■</text></div>
											<div style="margin-top: -6px;">{{ item.runfault.name }}：<text class="text-xl" :class="item.runfault.value == 1?'text-red':'text-gray'">■</text></div>
										</div>
									</el-col>
								</template>
							</el-row>
						</el-card>
					</el-col>	
					<el-col :span="6" :xs="24">
						<el-card class="box-card text-bold" :body-style="{  height: 'calc(34vh - 35px)', padding: '0' }">
							<div class="square">油量信息</div>
							<div class="flex align-center justify-around" style="height: calc(100% - 35px)">
								<oilLevel :data="newData.heavyOil"/>
								<oilLevel :data="newData.lghtOil"/>
							</div>
						</el-card>
					</el-col>	
				</el-row>
			</el-col>	
			<el-col :span="5" :xs="24">
				<el-card class="box-card margin-top-xs"
					:body-style="{  height: ($store.state.app.device == 'desktop'?'calc(68vh - 62px)' : 'auto'),padding: '0' }">
					<div class="square text-bold">报警列表</div>
					<div class="wramBox">
						<div v-for="(item,index) in newData.wramLi" :key="index" class="wramli">
							<div>{{item.time}} <text class="margin-lr-xs">{{item.name}}</text></div>
							<div>{{item.text}}</div>
						</div>
					</div>
				</el-card>
			</el-col>	
		</el-row>
	</div>
</template>

<script setup>
	import { reactive, ref } from "@vue/reactivity";
	import roundDashChart from "@/components/Echarts/Dashboard/roundDashChart.vue";
	import roundbDashChart from "@/components/Echarts/Dashboard/roundbDashChart.vue";
	import rudderDashChart from "@/components/Echarts/Dashboard/rudderDashChart.vue";
	import gaugeDashChart from "@/components/Echarts/Dashboard/gaugeDashChart.vue";
	import specialDashChart from "@/components/Echarts/Dashboard/specialDashChart.vue";
	import oilLevel from "@/components/Temperature/oilLevel";
	import loadLevel from "@/components/Temperature/loadLevel";
	import heelIcon from "@/assets/images/heel.png";
	import trimIcon from "@/assets/images/trim.png";
	import quadIcon from "@/assets/images/quadrangle.png";
	import soundIcon from "@/assets/images/sounding.png";
	import { duToGpsDM } from "@/utils/gpsToDu";
	import {
		getCurrencyConfigByName,
		getCurrencyConfigByMid
	} from "@/utils/index";
	const getColorHei = function(ind, key){
		let _hei = 0;
		if(key >(5-parseInt(ind))*20 || key == (5-parseInt(ind))*20){
			_hei = 100;
		}else{
			_hei = ((key - (5-parseInt(ind)-1)*20)/20)*100
		}
		return _hei
	}
	const newData = computed(() => {
		let _obj = {
			"meteo": [{ ...getCurrencyConfigByMid("0a4"), sign: "E"},
					   { ...getCurrencyConfigByMid("0a5"), sign: "N"},
					  {	value: 3.2,	name: "对地航速", unit: "kn" },
					  {	value: 3.4,	name: "对水航速", unit: "kn" }],
			"ais": [{ value: 2.3, name: "风速", unit: "m/s", icon: "fengsu" },
					   { value: 256, name: "风向", unit: "度", icon: "fengxiang" },
					   { value: 3.2, name: "温度", unit: "℃", icon: "wendu" },
					   { value: 78,	name: "湿度", unit: "%", icon: "shidu" }],
			"0AA": { value: 153.4,	name: "航迹向", unit: "°" },
			"0a44": { value: -14.4,	name: "舵角", unit: "°" },
			"0a8": { value: 206.4,	name: "航艏向", unit: "°" },
			"0aQ": { value: 63.4, name: "转向速率", unit: "度/分",scalc: "90%", max: 360},
			
			"hostli": [{
				"speed": { value: 1553.4, name: "1#主机转速", unit: "rpm", max: 2000},
				"hostLoad": { max: 100, name: "1#主机负荷", value: 69.3, unit: "%" },
				"time": {name: "运行时间", value: 160.3, unit: "H" }
			},{
				"speed": { value: 53.4, name: "2#主机转速", unit: "rpm" },
				"hostLoad": { max: 100, name: "2#主机负荷", value: 86.4, unit: "%" },
				"time": { name: "运行时间", value: 114.3, unit: "H" }
			}],
			"engineli": [{
					"chart": { value: 83.4, name: "功率", unit: "kw", scalc: "90%", max: 600},
					"runsta": { value: 1, name: "运行状态", unit: "" },
					"runfault": { value: 0, name: "运行故障", unit: "" },
				},{
					"chart": { value: 106.5, name: "功率", unit: "kw", scalc: "90%", max: 600},
					"runsta": { value: 1, name: "运行状态", unit: "" },
					"runfault": { value: 0, name: "运行故障", unit: "" },
				},{
					"chart": { value: 178.4, name: "功率", unit: "kw", scalc: "90%", max: 600},
					"runsta": { value: 1, name: "运行状态", unit: "" },
					"runfault": { value: 1, name: "运行故障", unit: "" },
				},{
					"chart": { value: 203.1, name: "功率", unit: "kw", scalc: "90%", max: 600},
					"runsta": { value: 1, name: "运行状态", unit: "" },
					"runfault": { value: 0, name: "运行故障", unit: "" },
				}],
			"lghtOil": {
				max: 70,
				name: "轻油舱",
				value: 52,
				unit: "L",
				type: "light"
			},
			"heavyOil": {
				max: 70,
				name: "重油舱",
				value: 60.3,
				unit: "L",
				type: "heavy"
			},
			
			"wramLi" :[{
				"time": "2023/11/01 05:23:23",
				"name": "发电机",
				"text": "发电机启动失败！"
			},{
				"time": "2023/11/01 05:54:44",
				"name": "发电机",
				"text": "发电机安全停车回路！"
			},{
				"time": "2023/11/12 07:28:24",
				"name": "发电机",
				"text": "发电机应急停机报警！"
			},{
				"time": "2023/11/12 11:44:24",
				"name": "发电机",
				"text": "发电机预供滑油低压！"
			},{
				"time": "2023/11/12 11:59:20",
				"name": "发电机",
				"text": "发电机安全系统传感！"
			},{
				"time": "2023/11/12 14:34:56",
				"name": "发电机",
				"text": "发电机应急停车回路！"
			},{
				"time": "2023/11/12 16:44:04",
				"name": "发电机",
				"text": "滑油预供泵马达过载！"
			}]
		}
		return _obj;
	});
</script>

<style lang='scss' scoped>
	.square {
		color: #fff;
	    padding: 3px 8px;
		background-color: var(--el-menu-bg-color);
		::v-deep .el-input{
			height: 20px;
		}
	}
	.wramBox{
		margin: 20px 0 10px;
		padding-left: 14%;
		overflow: auto;
		font-size: 12px;
		height: calc(100% - 40px);
		&::-webkit-scrollbar{
			width: 4px;
		}
		&::-webkit-scrollbar-track{
			background-color: #e2e2e2;
		}
		&::-webkit-scrollbar-thumb{
			background-color: #bdbdbd;
		}
		.wramli{
			position: relative;
			margin-bottom: 10px;
			padding-bottom: 8px;
			&>div:first-child{
				color: #30B08E;
				margin-bottom: 6px;
			}
			&::after{
				position: absolute;
				bottom: 0;
				content: "";
				width: 30%;
				border-top: 1px solid rgba(48,176,142,0.5);
			}
		}
		
	}
</style>