<template>
	<div style="font-size: 14px;" class="padding-xs">
		<el-row :gutter="5">
			<el-col :span="24" :xs="24">
				<el-card class="box-card margin-bottom-xs text-bold" 
					:body-style="{  height: ($store.state.app.device == 'desktop'?'25vh' : 'auto'),padding: '10px' }">
					<el-row :gutter="5">
						<el-col :span="8" :xs="24">
							<div class="grid col-2">
								<div>
									<div>舵角</div>
									<rudderDashChart :name="`ship-rudder`" style="height: 160px;" :data="newData['0a8']"/>
								</div>
								<div>
									<div>船艏向</div>
									<roundDashChart :name="`ship-bow`" style="height: 160px;" :data="newData['0a8']"/>
								</div>
							</div>
						</el-col>
						<el-col :span="8" :xs="24">
							<div class="grid col-2">
								<div>
									<div>航迹向</div>
									<roundDashChart :name="`ship-course`" style="height: 160px;" :data="newData['0AA']"/>
								</div>
								<div>
									<div>转向速率</div>
									<gaugeDashChart :name="`ship-rate`" style="height: 160px;" :data="newData['0aQ']"/>
								</div>
							</div>
						</el-col>
						<el-col :span="8" :xs="24">
							<div class="flex" style="height: calc(25vh - 20px);">
								<div :class="meind == 0?'flex-twice':'flex-sub'" class="flex flex-direction justify-around"
									v-for="(meit,meind) in newData.meteo" :key="meind">
									<div v-for="(smeit,smeind) in meit" :key="smeind">
										<text v-if="meind == 0" style="width: 80px;display: inline-block;" class="text-right">{{smeit.name}}：</text>
										<text v-else>{{smeit.name}}：</text>
										<text class="text-xl margin-lr-xs text-blue">{{ smeit.sign?duToGpsDM(smeit.value, smeit.sign):smeit.value }}</text>
										<text>{{smeit.unit}}</text>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6" :xs="24">
				<el-card class="box-card text-bold" 
					:body-style="{  height: ($store.state.app.device == 'desktop'?'calc(75vh - 104px)' : 'auto'),padding: '10px' }">
					<div class="grid col-2">
						<div>
							<div>1#主机转速</div>
							<specialDashChart :name="`ship-speed-one`" style="height: 160px;" :data="newData['005']"/>
						</div>
						<div>
							<div>2#主机转速</div>
							<specialDashChart :name="`ship-speed-two`" style="height: 160px;" :data="newData['0b5']"/>
						</div>
						<div>
							<div>1#主机负荷</div>
							<gaugeDashChart :name="`ship-load-one`" style="height: 160px;" :data="newData['006']"/>
						</div>
						<div>
							<div>2#主机负荷</div>
							<gaugeDashChart :name="`ship-load-two`" style="height: 160px;" :data="newData['0b6']"/>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6" :xs="24">
				<el-card class="box-card text-bold"
					:body-style="{  height: ($store.state.app.device == 'desktop'?'calc(75vh - 104px)' : 'auto'),padding: '10px' }">
					<div class="grid col-2">
						<div v-for="(item,index) in newData.engineli" :key="index">
							<div>{{ item.chart.name }}</div>
							<roundbDashChart :name="`ship-engine-${index}`" style="height: 160px;" :data="item.chart"/>
							<div class="text-xs text-center margin-bottom-xl" 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>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6" :xs="24">
				<el-card class="box-card" 
					:body-style="{  height: ($store.state.app.device == 'desktop'?'calc(75vh - 104px)' : 'auto'),padding: '10px' }">
					<div class="text-bold margin-bottom-sm">油量</div>
					<div class="grid col-2">
						<oilLevel :data="newData.heavyOil"/>
						<oilLevel :data="newData.lghtOil"/>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6" :xs="24">
				<el-card class="box-card" 					
				:body-style="{  height: ($store.state.app.device == 'desktop'?'calc(75vh - 104px)' : 'auto'),padding: '10px' }">
					<div>
						<div class="text-bold">横倾纵倾</div>
						<div class="grid col-2 margin-tb-sm text-center text-bold text-xl">
							<div class="padding-lr-sm">
								<el-image :src="heelIcon"></el-image>
								<div><text>7</text> °</div>
							</div>
							<div>
								<el-image :src="trimIcon"></el-image>
								<div><text>7</text>°</div>
							</div>
						</div>
					</div>
					<div class="grid col-2">
						<div>
							<div class="text-bold margin-bottom-sm">四角吃水</div>
							<div class="text-center text-xs"><text>7</text> m</div>
							<div class="flex align-center text-xs">
								<div><text>7.3</text> m</div>
								<el-image :src="quadIcon" style="width:calc(100% - 68px);margin:10px 4px;"></el-image>
								<div><text>7.3</text> m</div>
							</div>	
							<div class="text-center text-xs"><text>7</text> m</div>
						</div>
						<div>
							<div class="text-bold margin-bottom-sm">测深</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>7.3</text> m</div>
							</div>
						</div>
					</div>
					<div>
						<div class="text-bold margin-tb-sm">报警列表</div>
						<div class="text-xs text-bold">
							<div v-for="(item,index) in 14" :key="index" class="margin-bottom-xs">
								09:23:44 <text class="margin-lr-xs">机舱报警</text> <text style="font-weight: 450;">2号发电机水温过高,请注意检查!</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 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 newData = computed(() => {
		let _obj = {
			"meteo": [[{ ...getCurrencyConfigByMid("0a4"), sign: "E"},
					   { ...getCurrencyConfigByMid("0a5"), sign: "N"},
					  {	value: 3.2,	name: "对地航速", unit: "节" },
					  {	value: 3.4,	name: "对水航速", unit: "节" }],
					  [{ value: 2.3, name: "风速", unit: "m/s" },
					   { value: 256, name: "风向", unit: "度" },
					   { value: 3.2, name: "温度", unit: "度" },
					   { value: 78,	name: "湿度", unit: "%" }]
					],
			"0AA": { value: 153.4,	name: "航迹向", unit: "°" },
			"0a8": getCurrencyConfigByMid("0a8"),
			"0aQ": { value: 53.4, name: "转向速率", unit: "度/分" },
			"005": { value: 53.4, name: "1#主机转速", unit: "rpm" },
			"0b5": { value: 53.4, name: "2#主机转速", unit: "rpm" },
			"006": { value: 53.4, name: "1#主机1负荷", unit: "" , scalc: "90%"},
			"0b6": { value: 53.4, name: "2#主机负荷", unit: "" , scalc: "90%"},
			"engineli": [{
					"chart": { value: 53.4, name: "1#发电机", unit: "rpm", scalc: "90%"},
					"runsta": { value: 1, name: "运行状态", unit: "" },
					"runfault": { value: 0, name: "运行故障", unit: "" },
				},{
					"chart": { value: 53.4, name: "2#发电机", unit: "rpm", scalc: "90%"},
					"runsta": { value: 1, name: "运行状态", unit: "" },
					"runfault": { value: 0, name: "运行故障", unit: "" },
				},{
					"chart": { value: 53.4, name: "3#发电机", unit: "rpm", scalc: "90%"},
					"runsta": { value: 1, name: "运行状态", unit: "" },
					"runfault": { value: 1, name: "运行故障", unit: "" },
				},{
					"chart": { value: 53.4, name: "应急发电机", unit: "rpm", scalc: "90%"},
					"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"
			}
		}
		return _obj;
	})
</script>

<style lang='scss' scoped>
	
</style>