<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==7||index==11?'mm':index==9?'°':''}}</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==7||index==11?'mm':index==9?'°':''}}</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==7||index==11?'mm':index==9?'°':''}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			carData1:{
				type:Array
			},
			carData2:{
				type:Array
			},
			carData3:{
				type:Array
			},
		},
		data(){
			return{
				dataInter:[
					{
						name:'支架车在线状态：',
						width:0,
						val:'离线'
					},{
						name:'左横移限位：',
						width:1,
						val:'2'
					},{
						name:'右横移限位：',
						width:1,
						val:'3'
					},{
						name:'上限位：',
						width:1,
						val:'3'
					},{
						name:'下限位：',
						width:1,
						val:'3'
					},{
						name:'左滚转限位：',
						width:1,
						val:'3'
					},{
						name:'右滚转限位：',
						width:1,
						val:'3'
					},{
						name:'行进位置：',
						width:1,
						val:'3'
					},{
						name:'横移位置：',
						width:1,
						val:'3'
					},{
						name:'滚转位置：',
						width:1,
						val:'3'
					},{
						name:'超重限位：',
						width:1,
						val:'3'
					},{
						name:'升降位置：',
						width:0,
						val:'3'
					}
				],
				carDetail1:[],
				carDetail2:[],
				carDetail3:[],
			}
		},
		
		watch:{
			carData1:{
				handler(newVal,oldVal){
					if(newVal){
						this.carDetail1=newVal
					}
				}
			},
			carData2:{
				handler(newVal,oldVal){
					if(newVal){
						this.carDetail2=newVal
					}
				}
			},
			carData3:{
				handler(newVal,oldVal){
					if(newVal){
						this.carDetail3=newVal
					}
				}
			}
		},
		
		mounted() {
			this.carDetail1=this.dataInter; //初始化1号车数据
			this.carDetail2=this.dataInter; //初始化2号车数据
			this.carDetail3=this.dataInter; //初始化3号车数据
		}
	}
</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>