<template>
	<el-row :gutter="10">
		<el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
			<el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
				<div class="text-xs text-bold text-bGray">能源输入</div>
				<div class="flex flex-direction justify-center align-center" style="height: calc(66.66vh - 170px);">
					<svg-icon icon-class="PowerSupply" style="font-size: 3.6rem;"/>
					<div class="text-purple text-xl text-bold margin-top">10000</div>
					<div class="text-xs text-bold text-bGray">总能源输入</div>
				</div>
			</el-card>
		</el-col>
		<el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
			<el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
				<div class="text-xs text-bold text-bGray">初级能量消耗端</div>
				<div style="height: calc(66.66vh - 170px);">
					<div :style="{ height: stem.num + '%' }" class="flex flex-direction justify-center align-center"
						v-for="(stem, sndex) in energyStart" :key="sndex">
						<svg-icon :icon-class="stem.icon" style="font-size: 1.8rem;"/>
						<div class="text-purple text-sm text-bold">{{stem.value}}</div>
						<div class="text-xs text-bold text-bGray">{{stem.name}}</div>
					</div>
				</div>
			</el-card>
		</el-col>
		<el-col :xl="11" :lg="11" :md="11" :sm="12" :xs="24">
			<el-card class="text-xs box-card" :body-style="{ padding: '10px !important' }">
				<div class="text-bold text-center text-bGray">能源流传递及损耗</div>
				<div class="grid col-3">
					<div style="height: calc(66.66vh - 170px);padding-right: 8px;">
						<div v-for="(ftem, fndex) in energyFlow1" :key="fndex"
							:style="{ height: ftem.heig + '%' }" class="flex flex-direction"
							:class="fndex == 2?'justify-center':'justify-around'">
							<el-card class="bor-rcard" :body-style="{ padding: '5px !important' }"
								:class="fndex == 2?'margin-top':''"
								 v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
								<div class="flex justify-between align-center">
									<span class="text-bGray">{{ fstem.name }}</span>
									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
								</div>
							</el-card>
						</div>
					</div>
					<div style="height: calc(66.66vh - 170px);padding: 0 4px;">
						<div v-for="(ftem, fndex) in energyFlow2" :key="fndex"
							:style="{ height: ftem.heig + '%' }" class="flex flex-direction"
							:class="fndex == 4?'justify-center':'justify-around'">
							<el-card class="bor-rcard" :body-style="{ padding: '5px !important' }"
								:class="fndex == 4?'margin-top':''"
								 v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
								<div class="flex justify-between align-center">
									<span class="text-bGray">{{ fstem.name }}</span>
									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
								</div>
							</el-card>
						</div>
					</div>
					<div style="height: calc(66.66vh - 170px);padding-left: 8px;">
						<div v-for="(ftem, fndex) in energyFlow3" :key="fndex"
							:style="{ height: ftem.heig + '%' }" class="flex flex-direction"
							:class="fndex == 4?'justify-center':'justify-around'">
							<el-card class="bor-rcard" :body-style="{ padding: '5px !important' }"
								:class="fndex == 4?'margin-top':''"
								 v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
								<div class="flex justify-between align-center">
									<span class="text-bGray">{{ fstem.name }}</span>
									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
								</div>
							</el-card>
						</div>
					</div>
				</div>
			</el-card>
		</el-col>
		<el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12">
			<el-card class="text-xs box-card" :body-style="{ padding: '10px !important' }">
				<div class="text-bold text-center text-bGray">耗能末端</div>
				<div style="height: calc(66.66vh - 170px);" class="flex flex-direction justify-around">
					<el-card class="bor-rcard" :body-style="{ padding: '4px 5px !important' }" 
						v-for="(etem, endex) in energyEnd" :key="endex">
						<div class="flex justify-between align-center">
							<span class="text-bGray">{{ etem.name }}</span>
							<span class="text-purple" style="font-weight: bolder;">{{ etem.value }}</span>
						</div>
					</el-card>
				</div>
			</el-card>
		</el-col>
		<el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
			<el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
				<div class="text-xs text-bold text-bGray">能源有效做功</div>
				<div class="flex flex-direction justify-center align-center" style="height: calc(66.66vh - 170px);">
					<svg-icon icon-class="energy" style="font-size: 3.6rem;"/>
					<div class="text-purple text-xl text-bold margin-top">10000</div>
					<div class="text-xs text-bold text-bGray">能源有效做功</div>
				</div>
			</el-card>
		</el-col>
	</el-row>
	<!-- height:  -->
</template>

<script setup>
	const data = reactive({
		energyStart: [{
			name: "主机",
			value: 466.1,
			icon: "engine",
			num: 30.8
		},{
			name: "辅机",
			value: 466.1,
			icon: "engine",
			num: 30.8
		},{
			name: "废气锅炉",
			value: 466.1,
			icon: "boiler1",
			num: 11.55
		},{
			name: "燃油锅炉",
			value: 466.1,
			icon: "boiler2",
			num: 11.55
		},{
			name: "其他装置",
			value: 466.1,
			icon: "equipment",
			num: 15.4
		}],
		energyFlow1: [{
			heig: 30.8,
			rows: [{
				name: "其他损失",
				value: 466.1
			},{
				name: "排烟",
				value: 894.0
			},{
				name: "传动系统",
				value: 12.3
			},{
				name: "冷却损失",
				value: 45.01
			}]
		},{
			heig: 30.8,
			rows: [{
				name: "电站其他损失",
				value: 676.02
			},{
				name: "排烟",
				value: 451.7
			},{
				name: "船舶电网",
				value: 10000
			},{
				name: "冷却电网",
				value: 105.05
			}]
		},{
			heig: 25,
			rows: [{
				name: "蒸汽管路",
				value: 861.2
			},{
				name: "锅炉热量损失",
				value: 164.2
			}],
		},{
			heig: 13.5,
			rows: [{
				name: "能量损失",
				value: 81.3
			}]
		}],
		energyFlow2: [{
			heig: 15.4,
			rows: [{
				name: "排烟损失",
				value: 466.1
			}]
		},{
			heig: 15.4,
			rows: [{
				name: "螺旋桨",
				value: 676.02
			},{
				name: "传动损失",
				value: 451.7
			}]
		},{
			heig: 15.4,
			rows: [{
				name: "排烟损失",
				value: 676.02
			}]
		},{
			heig: 15.4,
			rows: [{
				name: "电力负载",
				value: 676.02
			},{
				name: "电网损失",
				value: 676.02
			}]
		},{
			heig: 25,
			rows: [{
				name: "蒸汽负载",
				value: 861.2
			},{
				name: "管路热量损失",
				value: 164.2
			}],
		}],
		energyFlow3: [{
			heig: 46.2,
			rows: [{
				name: "推进损失",
				value: 466.1
			}]
		},{
			heig: 15.4,
			rows: [{
				name: "负载损失",
				value: 451.7
			}]
		},{
			heig: 25,
			rows: [{
				name: "负载损失",
				value: 164.2
			}],
		}],
		energyEnd: [{
			name: "辅机T/C回收",
			value: 466.1
		},{
			name: "主机T/C回收",
			value: 894.0
		},{
			name: "推进做功",
			value: 12.3
		},{
			name: "机舱辅机",
			value: 45.01
		},{
			name: "甲板机械",
			value: 676.02
		},{
			name: "空调冷藏",
			value: 451.7
		},{
			name: "厨房洗衣",
			value: 10000
		},{
			name: "电器设备",
			value: 105.05
		},{
			name: "货油舱加热",
			value: 861.2
		},{
			name: "机舱加热",
			value: 164.2
		},{
			name: "机械用蒸汽",
			value: 81.3
		},{
			name: "其他用途",
			value: 162.1
		},{
			name: "耗能做功",
			value: 46.21
		}]
	});
	const { energyStart, energyEnd, energyFlow1, energyFlow2, energyFlow3 } = toRefs(data);
</script>

<style scoped lang="scss">
	.box-card{
		border-radius: 16px;
	}
	.bor-rcard{
		border-radius: 7px;
	}
</style>