<template>
	<div class="padding">
		<el-row :gutter="12">
			<el-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="titleSty">轴功率仪</div>
					<el-row :gutter="12" class="text-center">
						<template v-for="(item,index) in shaftMeter" :key="index">
							<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
								<gaugeChart :name="item.name" :data="item" height="calc(29vh - 118px)"/>
								<div class="titleSty text-ngreen">{{item.title}}</div>
							</el-col>
						</template>
					</el-row>
				</el-card>
				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ padding: '10px !important' }">
					<div class="grid col-4">
						<div class="flex align-center" style="height: calc(51vh - 75px);position: relative;" 
							v-for="(pitem,pndex) in typeData.oilsProg" :key="pndex">
							<div class="shTitleSty">{{pitem.name}}</div>
							<div style="margin-top:calc(46vh - 100px);" >
								<div style="transform: rotate(-90deg);transform-origin: left center;margin-left: 20px;">
									<el-progress 
										:show-text="false" 
										color="#c8753b" 
										style="width: calc(46vh - 100px);" 
										:stroke-width="12" 
										:percentage="pitem.value"></el-progress>
								</div>
								<div class="text-xl text-ngreen">{{pitem.value}}{{pitem.unit}}</div>
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="grid col-2">
						<div v-for="(item,index) in typeData.oilsForm" :key="index">
							<div class="titleSty">{{ item.name }}</div>
							<div style="height: calc(20vh - 87px);" class="flex align-center text-bold text-ngreen">
								<svg-icon style="font-size: 2.2rem;" class="text-white margin-right-xs" :icon-class="item.icon"/>
								<template v-for="(sitem,sindex) in getValue(item.value)" :key="sindex">
									<span class="margin-right-xs txtSty">{{sitem}}</span>
								</template>
								<span>{{ item.unit }}</span>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
				<!-- 航速航向 -->
				<el-card class="box-card cardSty" :body-style="{ height: 'calc(14.5vh - 20px)',padding: '10px !important' }">
					<div class="grid col-4 text-ngreen">
						<div v-for="(aitem,andex) in aisForm" :key="andex">
							<div class="titleSty">{{aitem.name}}：</div>
							<div style="height: calc(14.5vh - 74px);line-height: calc(13.5vh - 74px);" class="text-center text-bold text-xl">
								{{aitem.value}}{{aitem.unit}}
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ height: 'calc(70vh - 84px)',padding: '10px !important' }">
					嗨咦
				</el-card>
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="flex align-center" style="height: 100%;">
						<div class="shTitleSty">碳排放</div>
						<div class="flex justify-around" style="width: calc(100% - 30px);">
							<div v-for="(citem,cndex) in coForm" :key="cndex">
								<div class="titleSty">{{citem.name}}</div>
								<div style="height: calc(15.5vh - 72px);line-height: calc(15.5vh - 72px);" 
									class="text-center text-bold text-xl text-ngreen">
									<svg-icon v-if="citem.icon" 
										style="font-size: 2.2rem;vertical-align: middle;" 
										class="text-white margin-right" :icon-class="citem.icon"/>
									<span>{{citem.value}}{{citem.unit}}</span>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xl="5" :lg="5" :md="5" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="grid col-2">
						<div v-for="(witem,wndex) in windForm" :key="wndex">
							<div class="titleSty text-ngreen">{{witem.name}}</div>
							<div style="height: calc(14.5vh - 72px);line-height: calc(13.5vh - 72px);" class="text-center text-bold text-xl">
								<div>
									<svg-icon :icon-class="witem.icon" style="font-size: 2rem;vertical-align: middle;" class="margin-right-sm"></svg-icon>
									<span>{{witem.value}} {{witem.unit}}</span>
								</div>
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ padding: '5px 10px !important' }">
					<div style="height: calc(25vh - 30px);" class="flex align-center">
						<div style="width: 20%;"><div class="shTitleSty">船舶吃水</div></div>
						<div style="width: 80%;height: 100%;">
							<div class="flex align-center text-center" style="height: 33.33%;" 
								v-for="(dtem,dndex) in dritForm" :key="dndex">
								<div class="text-bold text-xl text-ngreen flex-sub">
									{{dtem.value1}}{{dtem.unit}}
								</div>
								<div class="flex-sub">
									<svg-icon :icon-class="dtem.icon" style="font-size: 2.6rem;"></svg-icon>
								</div>
								<div class="flex-sub">
									<span class="text-sm" v-if="isNaN(parseFloat(dtem.value2))">{{dtem.value2}}</span>
									<span class="text-bold text-xl text-ngreen" v-else>{{dtem.value2}}{{dtem.unit}}</span>
								</div>
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div style="height: calc(10.75vh - 22px);" class="flex align-center"
						v-for="(htem,hndex) in tiltForm" :key="hndex">
						<div style="width: 20%;"><div class="shTitleSty">{{htem.name}}</div></div>
						<div class="flex align-center justify-around" style="width: 80%;">
							<div class="text-bold text-xl text-ngreen">
								{{htem.type == "left"?"-":"+"}}{{htem.value}}{{htem.unit}}
							</div>
							<div :style="{ transform: 'rotate('+(htem.type == 'left'?htem.value:'-'+htem.value)+'deg)','transform-origin': 'center' }">
								<svg-icon :icon-class="htem.icon" style="font-size: 3.2rem;"></svg-icon>
							</div>
							<div class="text-bold text-xl text-ngreen">
								{{htem.type == "left"?"+":"-"}}{{htem.value}}{{htem.unit}}
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card cardSty margin-tb-sm" 
					:body-style="{ height: 'calc(14.5vh - 22px)',padding: '10px !important' }">
					<div class="flex flex-direction justify-around" style="height: 100%;">
						<div class="text-ngreen text-bold"><span class="inblock" style="width: 30%;">纬度</span><span>33°05678E</span></div>
						<div class="text-ngreen text-bold"><span class="inblock" style="width: 30%;">经度</span><span>113°56243N</span></div>
					</div>
				</el-card>
				<el-card class="box-card cardSty" :body-style="{ height: 'calc(22.5vh - 48px)',padding: '10px !important' }">
					<div class="text-ngreen text-bold">提示：</div>
					<div class="flex justify-center align-center text-ngreen text-xxl" style="height:calc(100% - 40px);">
						目前一切正常
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import { getManyShip } from "@/api/shipxy";
	import gaugeChart from "@/components/Echarts/gaugeChart";
	const typeData = computed(() => {
		return {
			oilsForm: 1 == 1?[{
				name: "年度总燃料消耗量",
				value: 25,
				unit: "L",
				icon: "jiayouzhan"
			},{
				name: "燃油航次消耗量",
				value: 44,
				unit: "L",
				icon: "jiayouzhan_1"
			}]:[{
				name: "年度总电量消耗量",
				value: 25,
				unit: "kw",
				icon: "electric"
			},{
				name: "电量航次消耗量",
				value: 44,
				unit: "kw",
				icon: "electricfill"
			}],
			oilsProg: 1 == 1?[{
				name: "燃油日消耗量",
				value: 70,
				unit: "t"
			},{
				name: "燃油小时消耗量",
				value: 13,
				unit: "t"
			},{
				name: "单位运输功燃油消耗量",
				value: 84,
				unit: "t"
			},{
				name: "单位航行距离燃油消耗量",
				value: 25,
				unit: "t"
			}]:[{
				name: "电量日消耗量",
				value: 70,
				unit: "kwh"
			},{
				name: "电量小时消耗量",
				value: 13,
				unit: "kwh"
			},{
				name: "单位运输功电量消耗量",
				value: 84,
				unit: "kwh"
			},{
				name: "单位航行距离电量消耗量",
				value: 25,
				unit: "kwh"
			}]
		}
	});
	const data = reactive({
		windForm: [{
			name: "风速",
			value: 12.5,
			unit: "m/s",
			icon: "fengsu"
		},{
			name: "风向",
			value: 31.6,
			unit: "°",
			icon: "fengsufengxiangyi"
		}],
		aisForm: [{
			name: "航向",
			value: 270,
			unit: "°"
		},{
			name: "船艏向",
			value: 270,
			unit: "°"
		},{
			name: "航速",
			value: 13,
			unit: "Kn"
		},{
			name: "对水航速",
			value: 13,
			unit: "Kn"
		}],
		
		coForm: [{
			name: "单位航行距离CO2排放量",
			value: 217,
			unit: "t",
			icon: "CO2nongdu"
		},{
			name: "单位运输功CO2排放量",
			value: 27,
			unit: "t"
		},{
			name: "EEOI",
			value: 20,
			unit: ""
		},{
			name: "CII",
			value: 70,
			unit: ""
		}],
		tiltForm: [{
		 	name: "横倾",
		 	value: 7,
			type: "left",
		 	unit: "°",
			icon: "a-jizhuangxiangchuanxin"
		},{
		 	name: "纵倾",
		 	value: 5,
			type: "right",
		 	unit: "°",
			icon: "inclination"
		}],
		dritForm: [{
		 	name: "",
		 	value1: 10,
			value2: 10,
		 	unit: "M",
			icon: "inclination"
		},{
		 	name: "纵倾",
		 	value1: 8,
			value2: 8,
		 	unit: "M",
			icon: "a-jizhuangxiangchuanxin"
		},{
		 	name: "纵倾",
		 	value1: 27,
			value2: "富余水深",
		 	unit: "M",
			icon: "draft"
		}],
		shaftMeter: [{
			title: "轴转速",
			name: "shaftSpeed",
			value: 162,
			min: 0,
			max: 500,
			unit: "KN*m"
		},{
			title: "轴功率",
			name: "shaftPower",
			value: 2062,
			min: 0,
			max: 5000,
			unit: "Kw"
		},{
			title: "扭矩",
			name: "torque",
			value: 62,
			min: 0,
			max: 150,
			unit: "r/min"
		}]
	});
	const { aisForm, oilsForm, coForm, oilsProg, windForm, dritForm, tiltForm, shaftMeter } = toRefs(data);
	const getValue = function(value){
		return (value+"").split("")
	}
</script>

<style scoped lang="scss">
	
	.shTitleSty{
		font-size: 0.9rem;
		font-weight: bold;
		writing-mode: vertical-rl;
		letter-spacing: 6px;
	}
	.txtSty{
		font-size: 1.8rem;
		padding: 2px 10px;
		background-color: #000;
		border: 1px solid var(--ngreen);
	}
</style>