<template>
	<div>
		<el-row :gutter="14">
			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<div style="height: calc(100vh - 190px);" class="flex align-center justify-center">
						<div style="position: relative;">
							<div style="position: absolute;left: 8.3%;top: -20px;width: 29.6%;z-index: 111;">
								<div class="text-bold text-bGray margin-bottom-sm">气缸切换：</div>
								<div class="flex justify-around">
									<div v-for="(items,indexs) in 6" :key="indexs" 
										:class="tabActive == indexs?'active':''"
										@click="tabActive = indexs"
										class="text-center padding-tb-xs bg-blue radius pointer" style="width: 11%;">
										{{indexs+1}}
									</div>
								</div>
							</div>
							<div style="position: absolute;right: 0;bottom:44%;width: 62%;text-align: center;">
								轴转速：<span class="flex-sub text-purple text-bold text-xxl">321.2</span> RPM
							</div>
							<el-image style="width: 100%;" :src="propulsionImg"></el-image>
						</div>
					</div>
					<div class="titleSty text-xl text-center">主机结构图</div>
				</el-card>
			</el-col>
			<el-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
				<el-row :gutter="14">
					<template v-for="(item,index) in dataForm" :key="index">
						<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
							<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }"
								 v-for="(vtem,vndex) in item" :key="vndex">
								<div class="titleSty text-xl">{{ vtem.name }}</div>
								<div :style="{ height: vtem.height }"
									class="padding-sm flex flex-direction justify-around">
									<div class="flex align-end" v-for="(stem,sndex) in vtem.data" :key="sndex">
										<div class="flex-twice">{{ stem.name }}：</div>
										<div class="flex-sub text-purple text-bold text-xxl">{{ stem.value }}</div>
										<div class="flex-sub">{{ stem.unit }}</div>
									</div>
								</div>
							</el-card>
						</el-col>
					</template>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	const { proxy } = getCurrentInstance();
	import propulsionImg from "@/assets/images/propulsion.png";
	const tabActive = ref(0);
	const data = reactive({
		dataForm: [[{
			name: "涡轮增压器",
			height: "calc(33vh - 99px)",
			data: [{
				name: "1号废气进口温度",
				value: 123.2,
				unit: "℃"
			},{
				name: "1号废气出口温度",
				value: 123.2,
				unit: "℃"
			},{
				name: "2号废气进口温度",
				value: 123.2,
				unit: "℃"
			},{
				name: "2号废气出口温度",
				value: 123.2,
				unit: "℃"
			}]
		},{
			name: "活塞",
			height: "calc(27vh - 99px)",
			data: [{
				name: "活塞冷却油进口压力",
				value: 123.2,
				unit: "Mpa"
			},{
				name: "活塞冷却油进口压力",
				value: 123.2,
				unit: "℃"
			},{
				name: "活塞冷却油出口温度",
				value: 123.2,
				unit: "℃"
			}]
		},{
			name: "主轴承",
			height: "calc(20vh - 99px)",
			data: [{
				name: "滑油进口压力",
				value: 123.2,
				unit: "Mpa"
			},{
				name: "滑油进口温度",
				value: 123.2,
				unit: "℃"
			}]
		},{
			name: "燃油系统",
			height: "calc(20vh - 99px)",
			data: [{
				name: "燃油进机压力",
				value: 123.2,
				unit: "Mpa"
			},{
				name: "燃油进机压力",
				value: 123.2,
				unit: "℃"
			}]
		}],[{
			name: "气缸",
			height: "calc(33vh - 99px)",
			data: [{
				name: "缸套冷却水进机压力",
				value: 123.2,
				unit: "Mpa"
			},{
				name: "缸套冷却水进机温度",
				value: 123.2,
				unit: "℃"
			},{
				name: "气缸冷却水出口温度",
				value: 123.2,
				unit: "℃"
			},{
				name: "气缸排气温度",
				value: 123.2,
				unit: "℃"
			}]
		},{
			name: "扫气",
			height: "calc(27vh - 99px)",
			data: [{
				name: "主机扫气压力",
				value: 123.2,
				unit: "Mpa"
			},{
				name: "2号扫气箱温度",
				value: 123.2,
				unit: "℃"
			},{
				name: "主机扫气箱温度",
				value: 123.2,
				unit: "℃"
			}]
		},{
			name: "推力轴承",
			height: "calc(20vh - 99px)",
			data: [{
				name: "滑油进口压力",
				value: 123.2,
				unit: "Mpa"
			},{
				name: "滑油进口温度",
				value: 123.2,
				unit: "℃"
			}]
		},{
			name: "滑油系统",
			height: "calc(20vh - 99px)",
			data: [{
				name: "滑油进口压力",
				value: 123.2,
				unit: "Mpa"
			},{
				name: "滑油进口压力",
				value: 123.2,
				unit: "℃"
			}]
		}]]
	});
	const { dataForm } = toRefs(data);
</script>


<style scoped lang="scss">
	.box-card+.box-card{
		margin-top: 15px;
	}
	.active{
		position: relative;
		background-color: var(--purple);
		&::after{
			content: "";
			position: absolute;
			bottom: -26px;
			left: 15%;
			width: 70%;
			border-top: 10px solid var(--purple);
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			border-bottom: 10px solid transparent;
		}
	}
</style>