<template>
	<view class="carInfo">
		<view class="carContent">
			<view>
				<view class="carTitle">
					1号支架车
				</view>
				<view class="carDetail">
					<view v-for="item,index in carDetail1" :key="index" :class="item.width==0?'optionWidth':''">
						<span>{{item.name}}</span>
						<span style="padding-right:4px ;">{{item.val}}</span>
						<span>{{index>=9?'mm':index==8?'°':''}}</span>
					</view>
				</view>
			</view>
			<view>
				<view class="carTitle">
					2号支架车
				</view>
				<view class="carDetail">
					<view v-for="item,index in carDetail2" :key="index" :class="item.width==0?'optionWidth':''">
						<span>{{item.name}}</span>
						<span style="padding-right:4px ;">{{item.val}}</span>
						<span>{{index>=9?'mm':index==8?'°':''}}</span>
					</view>
				</view>
			</view>
			<view>
				<view class="carTitle">
					3号支架车
				</view>
				<view class="carDetail">
					<view v-for="item,index in carDetail3" :key="index" :class="item.width==0?'optionWidth':''">
						<span>{{item.name}}</span>
						<span style="padding-right:4px ;">{{item.val}}</span>
						<span>{{index>=9?'mm':index==8?'°':''}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			carData:{
				type:Object
			}
		},
		data(){
			let dataInter1=[
				{
					name:'支架车在线状态：',
					width:0,
					val:''
				},{
					name:'左横移限位：',
					width:1,
					val:''
				},{
					name:'右横移限位：',
					width:1,
					val:''
				},{
					name:'上限位：',
					width:1,
					val:''
				},{
					name:'下限位：',
					width:1,
					val:''
				},{
					name:'左滚转限位：',
					width:1,
					val:''
				},{
					name:'右滚转限位：',
					width:1,
					val:''
				},{
					name:'超重限位：',
					width:1,
					val:''
				},{
					name:'滚转位置：',
					width:1,
					val:''
				},{
					name:'行进位置：',
					width:0,
					val:''
				},{
					name:'横移位置：',
					width:0,
					val:''
				},{
					name:'升降位置：',
					width:0,
					val:''
				}
			]
			let dataInter2=[
				{
					name:'支架车在线状态：',
					width:0,
					val:''
				},{
					name:'左横移限位：',
					width:1,
					val:''
				},{
					name:'右横移限位：',
					width:1,
					val:''
				},{
					name:'上限位：',
					width:1,
					val:''
				},{
					name:'下限位：',
					width:1,
					val:''
				},{
					name:'左滚转限位：',
					width:1,
					val:''
				},{
					name:'右滚转限位：',
					width:1,
					val:''
				},{
					name:'超重限位：',
					width:1,
					val:''
				},{
					name:'滚转位置：',
					width:1,
					val:''
				},{
					name:'行进位置：',
					width:0,
					val:''
				},{
					name:'横移位置：',
					width:0,
					val:''
				},{
					name:'升降位置：',
					width:0,
					val:''
				}
			]
			let dataInter3=[
				{
					name:'支架车在线状态：',
					width:0,
					val:''
				},{
					name:'左横移限位：',
					width:1,
					val:''
				},{
					name:'右横移限位：',
					width:1,
					val:''
				},{
					name:'上限位：',
					width:1,
					val:''
				},{
					name:'下限位：',
					width:1,
					val:''
				},{
					name:'左滚转限位：',
					width:1,
					val:''
				},{
					name:'右滚转限位：',
					width:1,
					val:''
				},{
					name:'超重限位：',
					width:1,
					val:''
				},{
					name:'滚转位置：',
					width:1,
					val:''
				},{
					name:'行进位置：',
					width:0,
					val:''
				},{
					name:'横移位置：',
					width:0,
					val:''
				},{
					name:'升降位置：',
					width:0,
					val:''
				}
			]
			return{
				carDetail1:dataInter1,
				carDetail2:dataInter2,
				carDetail3:dataInter3,
			}
		},
		
		methods:{
			
			// 处理支架车数据数据
			carEntsorgen(value){ 
				this.carDetail1[0].val=value.online==1?'在线':'离线';
				this.carDetail1[1].val=value.leftHorizontalLimit;
				this.carDetail1[2].val=value.rightHorizontalLimit;
				this.carDetail1[3].val=value.downLimit;
				this.carDetail1[4].val=value.upLimit;
				this.carDetail1[5].val=value.leftTurnLimit;
				this.carDetail1[6].val=value.rightTurnLimit;
				this.carDetail1[7].val=value.overWeightLimit;
				this.carDetail1[8].val=value.turnPosition;
				this.carDetail1[9].val=value.walkAxisPosition;
				this.carDetail1[10].val=value.horizontalAxisPosition;
				this.carDetail1[11].val=value.liftPosition;
				
				this.carDetail2[0].val=value.onlineTwo==1?'在线':'离线';
				this.carDetail2[1].val=value.leftHorizontalLimitTwo;
				this.carDetail2[2].val=value.rightHorizontalLimitTwo;
				this.carDetail2[3].val=value.downLimitTwo;
				this.carDetail2[4].val=value.upLimitTwo;
				this.carDetail2[5].val=value.leftTurnLimitTwo;
				this.carDetail2[6].val=value.rightTurnLimitTwo;
				
				this.carDetail2[7].val=value.overWeightLimitTwo;
				this.carDetail2[8].val=value.turnPositionTwo;
				this.carDetail2[9].val=value.walkAxisPositionTwo;
				this.carDetail2[10].val=value.horizontalAxisPositionTwo;
				this.carDetail2[11].val=value.liftPositionTwo;
				
				

				this.carDetail3[0].val=value.onlineThree==1?'在线':'离线';
				this.carDetail3[1].val=value.leftHorizontalLimitThree;
				this.carDetail3[2].val=value.rightHorizontalLimitThree;
				this.carDetail3[3].val=value.downLimitThree;
				this.carDetail3[4].val=value.upLimitThree;
				this.carDetail3[5].val=value.leftTurnLimitThree;
				this.carDetail3[6].val=value.rightTurnLimitThree;
				this.carDetail3[7].val=value.overWeightLimitThree;
				this.carDetail3[8].val=value.turnPositionThree;
				this.carDetail3[9].val=value.walkAxisPositionThree;
				this.carDetail3[10].val=value.horizontalAxisPositionThree;
				this.carDetail3[11].val=value.liftPositionThree;
			}
		},
		
		
		
		watch:{
			
			carData:{
				immediate:true,
				handler(newVal,oldVal){
					if(newVal){
						this.carEntsorgen(newVal);
						// console.log(this.carDetail1)
						// console.log(this.carDetail2)
						// console.log(this.carDetail3)
					}
				}
			}
		},
		
		mounted() {
			
		}
	}
</script>

<style scoped>
	.optionWidth{
		width: 92% !important;
	}
	.carInfo{
		width: 100%;
		height: 90%;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.carContent{
		width: 98%;
		height: 98%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	
	.carContent>view{
		width: 33%;
		height: 100%;
		border-radius: 10px;
		background-color: #ffffff;
	}
	
	.carTitle{
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #ccc;
		width: 100%;
		height: 8%;
		font-size: 24px;
		background-color: rgb(204, 204, 204,0.4);
		border-radius: 10px 10px 0 0;
	}
	
	.carDetail{
		width: 100%;
		height: 92%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.carDetail>view{
		width: 42%;
		height: 8%;
		border-radius: 10px;
		border: 1px solid #ccc;
		box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.12);
		display: flex;
		justify-content: start;
		align-items: center;
		padding-left: 4%;
		font-size: 18px;
	}
	.carDetail>view>span{
		display: flex;
		height: 50%;
		align-items: end;
	}
</style>