<template>
	<view class="content" style='background-color:#09154F;height: 784px;'>
		<image src="../../static/image/taitou.png" style="width: 100%;height:7%;position: absolute;"></image>
		<view class="title">
			<text>控制终端</text>
		</view>
		<view class="optionButton">
			<span :class="optionIndex==0?'pitch':''" @click="cutOption(0)">控制面板</span>
			<span :class="optionIndex==1?'pitch':''" @click="cutOption(1)">车辆面板</span>
		</view>
		<!-- <view class="outButton">
			<span :class="optionIndex==2?'pitch':''" @click="outLogin()">退出</span>
		</view> -->
		<controlPage v-if="optionIndex==0" :Data='deviceData'></controlPage>
		<carPage v-if="optionIndex==1" :carData1='carData1' :carData2='carData2' :carData3='carData3'></carPage>
	</view>
</template>

<script>
	import controlPage from '/components/controlPage/index.vue';
	import carPage from '/components/carPage/index.vue';
	import {httpPost} from '../../utils/requset.js';
	export default {
		components: {
			controlPage,
			carPage,
		},
		data() {
			return {
				optionIndex:0,
				dataInter:[
					{
						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:1,
						val:''
					},{
						name:'超重限位：',
						width:1,
						val:''
					},{
						name:'升降位置：',
						width:0,
						val:''
					}
				],
				carData1:[],
				carData2:[],
				carData3:[],
				deviceData:{},
			}
		},
		methods: {
			cutOption(value){
				this.optionIndex=value
			},
			outLogin(){
				uni.showModal({
					title: '提示',
					content: '是否退出',
					success: (res)=>{
						if (res.confirm) {
							httpPost({
								url:'/logout',
								data:{}
							}).then((res)=>{
								console.log(res)
								uni.reLaunch({
									url:"/pages/login/LoginPage"
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			
			deviceAjax(){
				httpPost({
					url:'/zhxx/dt/horizonLoadInfo',
					data:{}
				}).then((res)=>{
					if(res.code==200){
						this.deviceData=res.data;
						this.carData1=this.carEntsorgen(res.data,1);
						this.carData2=this.carEntsorgen(res.data,2);
						this.carData3=this.carEntsorgen(res.data,3);
					}
				})
			},
			
			carEntsorgen(value,type){
				let data=value;
				let arrData=this.dataInter;
				if(type==1){
					arrData[0].val=value.online==1?'在线':'离线';
					arrData[1].val=value.leftHorizontalLimit;
					arrData[2].val=value.rightHorizontalLimit;
					arrData[3].val=value.downLimit;
					arrData[4].val=value.upLimit;
					arrData[5].val=value.leftTurnLimit;
					arrData[6].val=value.rightTurnLimit;
					arrData[7].val=value.walkAxisPosition;
					arrData[8].val=value.horizontalAxisPosition;
					arrData[9].val=value.turnPosition;
					arrData[10].val=value.overWeightLimit;
					arrData[11].val=value.liftPosition;
				}else if(type==2){
					arrData[0].val=value.onlineTwo==1?'在线':'离线';
					arrData[1].val=value.leftHorizontalLimitTwo;
					arrData[2].val=value.rightHorizontalLimitTwo;
					arrData[3].val=value.downLimitTwo;
					arrData[4].val=value.upLimitTwo;
					arrData[5].val=value.leftTurnLimitTwo;
					arrData[6].val=value.rightTurnLimitTwo;
					arrData[7].val=value.walkAxisPositionTwo;
					arrData[8].val=value.horizontalAxisPositionTwo;
					arrData[9].val=value.turnPositionTwo;
					arrData[10].val=value.overWeightLimitTwo;
					arrData[11].val=value.liftPositionTwo;
				}else{
					arrData[0].val=value.onlineThree==1?'在线':'离线';
					arrData[1].val=value.leftHorizontalLimitThree;
					arrData[2].val=value.rightHorizontalLimitThree;
					arrData[3].val=value.downLimitThree;
					arrData[4].val=value.upLimitThree;
					arrData[5].val=value.leftTurnLimitThree;
					arrData[6].val=value.rightTurnLimitThree;
					arrData[7].val=value.walkAxisPositionThree;
					arrData[8].val=value.horizontalAxisPositionThree;
					arrData[9].val=value.turnPositionThree;
					arrData[10].val=value.overWeightLimitThree;
					arrData[11].val=value.liftPositionThree;
				}
				return arrData;
			}
		},

		watch: {

		},

		onLoad() {
			plus.screen.lockOrientation('landscape-primary'); //强制横屏
			
			uni.getSystemInfo({
				success: (info) => {
					this.screenHeight = info.windowHeight;
				}
			});
		},
		mounted() {
			this.deviceAjax();
			setInterval(()=>{
				this.deviceAjax();
			},1000)
		}
	}
</script>

<style scoped>
	.pitch {
		color: #0372D7;
	}
	.content {
		position: relative;
		width: 100%;
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #ffffff;
		top: 0;
		font-size: 34px;
		letter-spacing: 4px;
		z-index: 99;
	}
	
	.optionButton{
		width: 20%;
		height: 5%;
		position: absolute;
		top: 5.6%;
		font-size: 24px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #ffffff;
	}
	
	.outButton{
		font-size: 24px;
		color: #ffffff;
		position: absolute;
		top: 5.6%;
		right: 2%;
	}
	
</style>