<template>
	<div class="slantedBorder text-sm text-bold">
		<div class="bodySty">
			<div style="padding: 5px 60px 0;" class="flex justify-between">
				<div v-for="(item,index) in haveData.batteryPack" :key="index" >
					<!-- :style="{ position: 'absolute',top: '10px',left: (index == 0?'60px':'auto'),right: (index == 0?'auto':'60px') }" -->
					<div class="grid col-2 text-right">
						<div>充电量：<span class="valSty" style="width: 90px;">{{item.ChargCapacity}}kw</span></div>
						<div>放电量：<span class="valSty" style="width: 90px;">{{item.DischCapacity}}kw</span></div>
					</div>
					<div class="flex text-bold margin-top-xs">
						<div :class="sindex == 0?'lithiumBatL':'lithiumBatR'" v-for="(sitem,sindex) in item.data" :key="sindex" >
							<div class="text-center margin-bottom-xs text-df">{{sitem.name}}</div>
							<div class="flex">
								<div style="position: relative;width: 74px;height: 118px;">
									<el-image style="position: absolute;z-index: 4;width: 100%;height: 100%;" :src="powerImg"></el-image>
									<div class="voltaSty" :style="{ 'background-image': 'linear-gradient(to top,#0079ce '+(parseFloat(sitem.voltage))+'%, white '+(parseFloat(sitem.voltage))+'%)' }"></div>
								</div>
								<div>
									<div>
										<span style="width: 46px;display: inline-block;">SOC：</span>
										<span class="valSty">{{sitem.soc}}%</span>
									</div>
									<div style="margin: 2px 0;">
										<span style="width: 46px;display: inline-block;">电压：</span>
										<span class="valSty">{{sitem.voltage}}V</span>
									</div>
									<div>
										<span style="width: 46px;display: inline-block;">电流：</span>
										<span class="valSty">{{sitem.current}}A</span>
									</div>
									<div style="margin-top: 2px;">
										<span style="width: 46px;display: inline-block;">功率：</span>
										<span class="valSty">{{sitem.power}}kw</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div style="margin-left: 25%;margin-top: 20px;"><switchBtn :options="item.switch"/></div>
				</div>
			</div>
			<div class="flex justify-between" style="margin-top: -33px;position: relative;">
				<div class="padding-bottom-xs" style="width: calc(50% - 32.5px);border-bottom: 2px solid #9d9d9d;">
					<div class="padding-left-sm">电压：<span class="valSty">{{haveData["voltage1"]}}V</span></div>
				</div>
				<div class="padding-bottom-xs" style="width: calc(50% - 32.5px);border-bottom: 2px solid #9d9d9d;">
					<div class="padding-right-sm text-right">电压：<span class="valSty">{{haveData["voltage2"]}}V</span></div>
				</div>
				<div style="position: absolute;left: calc(50% - 32.5px);bottom:-21px;">
					<switchBtn :options="haveData['km1']"/>
				</div>
			</div>
			<div style="position: relative;">
				<div class="grid col-2">
					<div class="flex" style="position: relative;" v-for="(idtem,inddex) in haveData.busbar" :key="inddex" >
						<div class="flex-sub flex flex-direction"
							:class="inddex == 0?'':'align-end'" v-for="(ictem,indcex) in idtem.data" :key="indcex">
							<div class="" style="width: 138px;">
								<switchBtn style="margin-left: 30px;" :options="ictem.switch"/>
								<div style="border: 2px solid #505050;" class="bg-white text-black radius">
									<div class="text-center" style="border-bottom: 2px solid #505050;">{{ictem.name}}</div>
									<div class="padding-sm">
										<div>状态：<span class="valSta" :class="ictem.status?'bg-theme':'bg-gray'"></span></div>
										<div class="margin-tb-xs">温度：<span class="valSty">{{ictem.temp}}℃</span></div>
										<div>功率：<span class="valSty">{{ictem.power}}kw</span></div>
									</div>
								</div>
								<div class="flex justify-between padding-right bs-g" v-if="ictem.rows.type == 0">
									<div v-for="(irtem,indrex) in ictem.rows.data">
										<switchBtn :options="irtem"/>
										<div>{{irtem.key}}</div>
									</div>	
								</div>
								<div class="flex flex-direction align-center" style="width: 138px;" v-if="ictem.rows.type == 1">
									<switchBtn style="margin-left: -35px;" :options="ictem.rows.switch"/>
									<div class="text-center text-xxl" 
										:style="{ 'background-color': ictem.rows.switch.value == 1?'#20A884':'#9b9da0' }"
										style="width: 50px;height: 50px;border-radius: 50%;line-height: 50px;">
										M
									</div>
									<div>{{ictem.rows.name}}</div>
									<div class="margin-bottom-xs margin-top">功率：<span class="valSty">{{ictem.rows.power}}kw</span></div>
									<div>转速：<span class="valSty">{{ictem.rows.speed}}rpm</span></div>
								</div>
								<div class="flex flex-direction align-center" style="width: 138px;" v-if="ictem.rows.type == 2">
									<switchBtn style="margin-left: -35px;" :options="ictem.rows.switch[0]"/>
									<div class="doubCircle"></div>
									<switchBtn :style="{ 'margin-left': inddex == 0?'-60px':'45px' }" :options="ictem.rows.switch[1]"/>
									<div class="doubCircle"></div>
									<switchBtn :style="{ 'margin-left': inddex == 0?'-60px':'45px' }" :options="ictem.rows.switch[2]"/>
								</div>
							</div>
						</div>
						<div :style="{ position: 'absolute',left: (inddex == 0?'calc(33% - 86px)':'auto'),right: (inddex == 0?'auto':'calc(33% - 71px)') }">{{idtem.name}}</div>
					</div>
				</div>
				<div class="flex" style="position: absolute;top: 55px;left: calc(33.33% + 58px);width:calc(33.33% - 130px);">
					<div style="width:calc(50% - 32.5px);border-top: 2px solid #9d9d9d;"></div>
					<div><switchBtn :options="haveData['km1']"/></div>
					<div style="width:calc(50% - 32.5px);border-top: 2px solid #9d9d9d;"></div>
				</div>
				<div class="acBus text-center">
					<div class="flex">
						<div class="text-right" style="width:calc(50% - 32.5px);border-top: 2px solid #9d9d9d;">1#380V交流母线</div>
						<div style="margin-top: -26px;"><switchBtn :options="haveData['bm3']"/></div>
						<div class="text-left" style="width:calc(50% - 32.5px);border-top: 2px solid #9d9d9d;">2#380V交流母线</div>
					</div>
					<div class="margin-bottom-xs margin-top-xl">日用电功率：<br><span class="valSty">{{haveData['dailyPower1']}}kVA</span></div>
					<div>日用电功率：<br><span class="valSty">{{haveData['dailyPower2']}}kVA</span></div>
					<div style="position: absolute;top: 0;left: -36px;">
						<switchBtn :options="haveData['bs3']"/>
						{{haveData['bs3'].key}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="operationPage">
	import powerImg from "@/assets/images/20240419160939.png";
	import switchBtn from "@/components/switchBtn";
	const haveData = computed(() => {
		let _obj = {
			"batteryPack": [{
				"ChargCapacity": "0000.00",
				"DischCapacity": "0000.00",
				"switch": {	name: 'KB1', value: 1, hevr: true, posit: 'left' },
				"data": [{
					"name": "1#锂电池组",
					"soc": "000.0",
					"voltage": "44.4",
					"current": "000.0",
					"power": "0000"
				},{
					"name": "2#锂电池组",
					"soc": "000.0",
					"voltage": "62.8",
					"current": "000.0",
					"power": "0000"
				}]
			},{
				"ChargCapacity": "0000.00",
				"DischCapacity": "0000.00",
				"switch": {	name: 'KB2', value: 1, hevr: true, posit: 'left' },
				"data": [{
					"name": "3#锂电池组",
					"soc": "000.0",
					"voltage": "10.3",
					"current": "000.0",
					"power": "0000"
				},{
					"name": "4#锂电池组",
					"soc": "000.0",
					"voltage": "3.6",
					"current": "000.0",
					"power": "0000"
				}]
			}],
			"km1": { name: 'KM1', value: 0, hevr: false, posit: 'bottom' },
			"km2": { name: 'KM2', value: 0, hevr: false, posit: 'bottom' },
			"voltage1": "000.0",
			"voltage2": "000.0",
			"bm3": { name: 'BM3', value: 0, hevr: false, posit: 'top' },
			"bs3": { name: 'BS3', value: 0, hevr: true, posit: 'left', key: "岸电电源" },
			"dailyPower1": "000.0",
			"dailyPower2": "000.0",
			"busbar": [{
				"name": "直流汇流排A",
				"data": [{
					"name": "左舷充电机",
					"temp": "000.0",
					"power": "000.0",
					"status": 0,
					"switch": { name: 'KG1', value: 0, hevr: true, posit: 'left' },
					"rows": {
						"type": 0,
						"data": [{ name: 'BS1', value: 0, hevr: true, key: "岸电电源", posit: 'left' },
								 { name: 'BG1', value: 0, hevr: true, key: "柴油发电", posit: 'left' }],
					}
				},{
					"name": "左舷变频器",
					"temp": "000.0",
					"power": "000.0",
					"status": 1,
					"switch": { name: 'KD1', value: 1, hevr: true, posit: 'left' },
					"rows": {
						"type": 1,
						"switch": { name: 'BM1', value: 1, hevr: true, posit: 'left' },
						"name": "主推进电机1",
						"speed": "0000",
						"power": "000.0"
					}
				},{
					"name": "左舷逆变器",
					"temp": "000.0",
					"power": "000.0",
					"status": 0,
					"switch": { name: 'KI1', value: 0, hevr: true, posit: 'left' },
					"rows": {
						"type": 2,
						"switch": [{ name: 'BI1', value: 0, hevr: true, posit: 'left' },
								   { name: '1TQF1', value: 0, hevr: true, posit: 'left' },
								   { name: '1TQL1', value: 0, hevr: true, posit: 'left' }],
					}
				}]
			},{
				"name": "直流汇流排B",
				"data": [{
					"name": "右舷充电机",
					"temp": "000.0",
					"power": "000.0",
					"status": 1,
					"switch": { name: 'KG2', value: 1, hevr: true, posit: 'left' },
					"rows": {
						"type": 2,
						"switch": [{ name: 'BI2', value: 0, hevr: true, posit: 'left' },
								   { name: '1TQF2', value: 0, hevr: true, posit: 'right' },
								   { name: '1TQL2', value: 0, hevr: true, posit: 'right' }],
					}
				},{
					"name": "右舷变频器",
					"temp": "000.0",
					"power": "000.0",
					"status": 0,
					"switch": { name: 'KD2', value: 0, hevr: true, posit: 'left' },
					"rows": {
						"type": 1,
						"switch": { name: 'BM2', value: 0, hevr: true, posit: 'left' },
						"name": "主推进电机2",
						"speed": "0000",
						"power": "000.0"
					}
				},{
					"name": "右舷逆变器",
					"temp": "000.0",
					"power": "000.0",
					"status": 0,
					"switch": { name: 'KI2', value: 0, hevr: true, posit: 'left' },
					"rows": {
						"type": 0,
						"data": [{ name: 'BG2', value: 0, hevr: true, key: "柴油发电", posit: 'left' },
								 { name: 'BS2', value: 0, hevr: true, key: "岸电电源", posit: 'left' }]
					}
				}]
			}]
		};
		return _obj;
	})
</script>

<style scoped lang="scss">
	.slantedBorder {
	    height: 100vh;
		padding: 3px;
		border: 2px solid #757575;
		background-size: 4px 4px;
		background-image: -webkit-gradient(linear, 0 0, 100% 100%,   
							color-stop(.25, #b4b4b4), color-stop(.25, transparent),   
							color-stop(.5, transparent), color-stop(.5, #b4b4b4),   
							color-stop(.75, #b4b4b4), color-stop(.75, transparent),   
							to(transparent));
		.bodySty{
			background-color: #9ccfff;
			height:100%;
			padding: 10px;
			background-image: radial-gradient(circle, black, black 0px, transparent 1px, transparent);
			background-size: 12px 12px;
			background-position: 0 0;
			background-repeat: repeat;
			.valSty{
				display: inline-block;
				background-color: #31cfce;
				border: 1px solid #757575;
				border-radius: 4px;
				padding: 4px;
				font-size: 14px;
				text-align: center;
				width: 70px;
				font-weight: bold;
			}
			.valSta{
				display: inline-block;
				border: 1px solid #757575;
				border-radius: 10px;
				width: 20px;
				height: 20px;
				margin-bottom: -6px;
			}
			.lithiumBatR{
				padding-left: 40px;
				position: relative;
				&::after{
					content: "";
					position: absolute;
					left: 0;
					bottom: -20px;
					width: 77px;
					height: 20px;
					border-bottom: 2px solid #9d9d9d;
					border-right: 2px solid #9d9d9d;
				}
			}
			.lithiumBatL{
				position: relative;
				&::after{
					content: "";
					position: absolute;
					left: 37px;
					bottom: -20px;
					width:calc(100% - 37px);
					height: 20px;
					border-bottom: 2px solid #9d9d9d;
					border-left: 2px solid #9d9d9d;
				}
			}
			.bs-g{
				position: relative;
				padding-top: 60px;
				width: 100%;
				&::after{
					content: "";
					position: absolute;
					left: 37px;
					right: 15px;
					top: 60px;
					width: calc(100% - 75px);
					border-bottom: 2px solid #9d9d9d;
				}
				&::before{
					content: "";
					position: absolute;
					left: 50%;
					right: 15px;
					top: 0;
					height: 60px;
					border-left: 2px solid #9d9d9d;
				}
			}
			.doubCircle{
				position: relative;
				height: 50px;
				width: 40px;
				// opacity: 0.6;
				padding-bottom: 30px;
				margin-top: -8px;
				&::after{
					content: "";
					position: absolute;
					top: 20px;
					height: 30px;
					width: 30px;
					border-radius: 50%;
					background-color: #b3b6b9;
					border: 2px solid #e8e8e8;
				}
				&::before{
					content: "";
					position: absolute;
					top: 0;
					height: 30px;
					width: 30px;
					border-radius: 50%;
					background-color: #b3b6b9;
					border: 2px solid #e8e8e8;
				}
			}
			.acBus {
				position: relative;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
				width: 33.33%;
				padding-bottom: 15px;
				&::after{
					content: "";
					position: absolute;
					bottom: 0;
					left: 7%;
					width: 84%;
					border-bottom: 2px solid #9d9d9d;
				}
			}
			.voltaSty{
				position: absolute;
				bottom: 2px;
				top: 10px;
				left: 6px;
				right: 5px;
				border-radius: 4px;
				
			}
		}
	}
	
</style>