<template>
	<div class="padding-lg">
		<el-row :gutter="20">
			<el-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px 20px !important' }">
					<div class="grid col-3">
						<div v-for="(stem,sndex) in sailForm" :key="sndex">
							<div class="titleSty" style="line-height: 36px;">{{stem.name}}</div>
							<div style="height: calc(14vh - 72px);line-height: calc(14vh - 72px);">
								<span class="text-bold text-purple" style="font-size: 1.8rem;">{{stem.value}}</span> {{stem.unit}}
							</div>
						</div>
					</div>
				</el-card>
				<el-card class="box-card cardSty margin-tb" :body-style="{ padding: '10px !important' }">
					<div class="titleSty padding-left-sm">燃油日消耗量</div>
					<line-chart name="dayFuelConsu" :data="dayFuelData" height="calc(23vh - 84px)"/>
				</el-card>
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="titleSty padding-left-sm">燃油小时消耗量</div>
					<line-chart name="hourFuelConsu" :data="hourFuelData" height="calc(23vh - 84px)"/>
				</el-card>
				<el-card class="box-card cardSty margin-top" :body-style="{ padding: '10px !important' }">
					<bar-chart name="compFuel" :data="compFuelData" height="calc(40vh - 89px)"/>
				</el-card>
			</el-col>
			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
				<!-- 航速航向 -->
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div class="grid col-4 text-purple">
						<div v-for="(aitem,andex) in aisForm" :key="andex">
							<div class="titleSty text-right" style="width: calc(40% + 5px);line-height: 48px;">{{aitem.name}}:</div>
							<div style="height: calc(14vh - 72px);line-height: calc(14vh - 72px);font-size: 1.8rem;padding-left: 40%;" 
								class="text-bold text-purple">
								{{aitem.value}}{{aitem.unit}}
							</div>
						</div>
					</div>
				</el-card>
				<!-- 地图 -->
				<el-card class="box-card cardSty margin-tb" :body-style="{ height: 'calc(70.5vh - 96px)',padding: '0 !important' }">
					<ship-map/>
				</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-xxl text-purple">
									<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 text-center">
						<div v-for="(otem,ondex) in oilsForm" :key="ondex">
							<div class="titleSty" style="line-height: 36px;">{{otem.name}}</div>
							<div style="height: calc(14vh - 72px);line-height: calc(14vh - 72px);" class="text-bold text-xxl text-purple">
								<span>{{otem.value}} {{otem.unit}}</span>
							</div>
						</div>
					</div>
				</el-card>
				<!-- 风速、风向 -->
				<el-card class="box-card cardSty margin-tb" :body-style="{ padding: '10px !important' }">
					<div class="grid col-2">
						<div v-for="(witem,wndex) in windForm" :key="wndex">
							<div class="titleSty">{{witem.name}}</div>
							<div style="height: calc(14vh - 76px);line-height: calc(14vh - 72px);" class="text-center text-bold text-xl">
								<div>
									<svg-icon :icon-class="witem.icon" style="font-size: 2.8rem;vertical-align: middle;" class="margin-right-sm text-purple"></svg-icon>
									<span class="text-bold text-xxl text-purple">{{witem.value}}</span> 
									<span>{{witem.unit}}</span>
								</div>
							</div>
						</div>
					</div>
				</el-card>
				<!-- 船舶吃水 -->
				<el-card class="box-card cardSty" :body-style="{ padding: '5px 10px !important' }">
					<div style="height: calc(21vh - 52px);" 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: 50%;" 
								v-for="(dtem,dndex) in dritForm" :key="dndex">
								<div class="text-bold text-xxl text-purple flex-sub">
									{{dtem.value1}}{{dtem.unit}}
								</div>
								<div class="flex-sub">
									<svg-icon :icon-class="dtem.icon" style="font-size: 2.8rem;"></svg-icon>
								</div>
								<div class="flex-sub">
									<span class="text-bold text-xxl text-purple">{{dtem.value2}}{{dtem.unit}}</span>
								</div>
							</div>
						</div>
					</div>
				</el-card>
				<!-- 横倾、纵倾 -->
				<el-card class="box-card cardSty margin-tb" :body-style="{ padding: '10px !important' }">
					<div style="height: calc(10.5vh - 33px);" 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-xxl text-purple">
								{{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: 2.8rem;"></svg-icon>
							</div>
							<div class="text-bold text-xxl text-purple">
								{{htem.type == "left"?"+":"-"}}{{htem.value}}{{htem.unit}}
							</div>
						</div>
					</div>
				</el-card>
				<!-- 富余水深、状态 -->
				<el-card class="box-card cardSty" :body-style="{ padding: '10px 14px !important' }">
					<div style="height: calc(10.5vh - 33px);" class="flex align-center text-center"
						v-for="(wtem,hndex) in waterDepth" :key="hndex">
						<div class="text-bold text-df flex-sub text-left">
							{{wtem.name}}
						</div>
						<div class=" flex-sub">
							<svg-icon :icon-class="wtem.icon" style="font-size: 2.8rem;"></svg-icon>
						</div>
						<div class="text-bold text-xl text-purple flex-sub">
							<span class="text-xxl" v-if="isNaN(parseFloat(wtem.value))">{{wtem.value}}</span>
							<span class="text-xxl" v-else>{{wtem.value}}{{wtem.unit}}</span>
						</div>
					</div>
				</el-card>
				<!-- 经纬度 -->
				<el-card class="box-card cardSty margin-top" 
					:body-style="{ height: 'calc(9vh - 9px)',padding: '10px !important' }">
					<div class="flex justify-around align-center text-bold text-bGray" style="height: 100%;">
						<div><span>纬度</span><span class="text-purple text-xl margin-left">33°05678E</span></div>
						<div><span>经度</span><span class="text-purple text-xl margin-left">113°56243N</span></div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import lineChart from "@/components/Echarts/LineChart";
	import BarChart from "@/components/Echarts/BarChart";
	import shipMap from "@/components/Map/ShipList/index";
	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({
		sailForm: [{
			name: "轴转速",
			value: 270,
			unit: "KN*m"
		},{
			name: "轴功率",
			value: 25,
			unit: "Kw"
		},{
			name: "扭矩",
			value: 25,
			unit: "r/min"
		}],
		dayFuelData: {
			name: "",
			xAxis: ["1", "2", "3", "4", "5", "6"],
			data: [{
				name: '燃油日消耗量',
				type: 'line',
				stack: 'Total',
				unit: "L",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			}]
		},
		hourFuelData: {
			name: "",
			xAxis: ["09:00", "10:00", "11:00", "1200", "13:00", "14:00"],
			data: [{
				name: '燃油小时消耗量',
				type: 'line',
				stack: 'Total',
				unit: "L",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			}]
		},
		compFuelData: {
			name: "",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '单位运输功燃油消耗量',
				type: 'bar',
				color: "#009dff",
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '单位航行距离燃油消耗量',
				type: 'bar',
				color: "#22e4ff",
				data: [10, 14, 18, 19, 13, 10]
			}],
		},
		oilsForm: [{
			name: "燃油航次消耗量",
			value: 44,
			unit: "L",
			icon: "jiayouzhan_1"
		},{
			name: "年度总燃料消耗量",
			value: 25,
			unit: "L",
			icon: "jiayouzhan"
		}],
		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"
		},{
			name: "单位运输功CO2排放量",
			value: 27,
			unit: "t"
		},{
			name: "EEOI",
			value: 20,
			unit: ""
		},{
			name: "CII",
			value: 70,
			unit: ""
		}],
		tiltForm: [{
		 	name: "横倾",
		 	value: 7,
			type: "left",
		 	unit: "°",
			icon: "hengqin"
		},{
		 	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: "hengqin"
		}],
		waterDepth: [{
		 	name: "富余水深",
		 	value: 27,
		 	unit: "M",
			icon: "lunchuan"
		},{
		 	name: "船舶状态",
		 	value: "航行",
		 	unit: "",
			icon: "shipsaili"
		}],
		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, 
		waterDepth, 
		sailForm,
		dayFuelData,
		hourFuelData,
		compFuelData
	} = toRefs(data);
	const getValue = function(value){
		return (value+"").split("")
	}
</script>

<style scoped lang="scss">
	
	.shTitleSty{
		font-size: 1rem;
		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>