<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' @deviceControl='deviceControl'></controlPage>
		<carPage v-if="optionIndex==1" :carData='deviceData'></carPage>
		
		<view class="showToast" v-if="showToastState==1">
			<image :src="showToastIcon=='success'?successIcon:errorIcon"></image>
			<span>{{showToastTitle}}</span>
		</view>
		
		<uni-popup ref="dialogPopup" type="dialog">
			<uni-popup-dialog  title='提示' type="success" :content='popupContent' @confirm='popupConfirm'></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import controlPage from '/components/controlPage/index.vue';
	import carPage from '/components/carPage/index.vue';
	import {httpPost} from '../../utils/requset.js';
	import error from '../../static/image/errorToast.png';
	import successImage from '@/static/image/successToast.png';
	export default {
		components: {
			controlPage,
			carPage,
		},
		data() {
			return {
				optionIndex:0,
				deviceData:{},
				showToastTitle:'',
				showToastIcon:'',
				showToastState:0,
				errorIcon:error,
				successIcon:successImage,
				popupContent:'',
				popupConfirmIndex:-1,
				deviceValue:0
			}
		},
		methods: {
			cutOption(value){
				this.optionIndex=value;
			},
			
			outLogin(){
				this.popupConfirmIndex=2;
				this.popupContent=`是否退出？`;
				this.$refs.dialogPopup.open();
			},
			
			//控制设备执行
			deviceControl(data){
				this.popupConfirmIndex=1;
				this.deviceValue=data.value;
				this.popupContent=`是否执行${data.contents}操作？`;
				this.$refs.dialogPopup.open();
			},
			
			//对话框确认
			popupConfirm(){
				if(this.popupConfirmIndex==1){ 
					this.deviceContrlHttp(this.deviceValue)
				}else{
					plus.runtime.quit(); //直接退出到桌面
				}
			},
			
			//控制设备执行的http请求
			deviceContrlHttp(value){
				let that=this;
				httpPost({
					url:`/zhxx/dt/horizonLoadIControl/${value}`,
					data:{}
				}).then((res)=>{
					console.log(res)
					if(res.data.code==200){
						this.showToat({
							title:res.data.msg,
							icon:'success',
							duration:1000
						})
					}else {
						console.log(res.data.msg)
						this.showToat({
							title:res.data.msg?res.data.msg:'请求失败',
							icon:'error',
							duration:1000
						})
					}
				}).catch((Error)=>{
					// console.log(Error)
					this.showToat({
						title:Error?Error:'请求失败',
						icon:'error',
						duration:1000
					})
				})
			},
			
			deviceAjax(){
				httpPost({
					url:'/zhxx/dt/horizonLoadInfo',
					data:{}
				}).then((res)=>{
					if(res.data.code==200){
						this.deviceData=res.data.data[0];	
					}
				}).catch((err)=>{
					console.log(err)
					if(err.errMsg.includes('Failed to connect')){
						this.showToat({
							title:'请确保成功连接网络',
							icon:'error',
							duration:1800
						})
					}
					
				})
			},
			showToat(value){
				this.showToastState=1;
				this.showToastTitle=value.title;
				this.showToastIcon=value.icon;
				
				setTimeout(()=>{
					this.showToastState=0;
				},value.duration)
			}
		},

		watch: {

		},

		onLoad() {
			plus.screen.lockOrientation('landscape-primary'); //强制横屏
			
			uni.getSystemInfo({
				success: (info) => {
					this.screenHeight = info.windowHeight;
				}
			});
		},
		mounted() {
			this.deviceAjax();
			setInterval(()=>{
				this.deviceAjax();
			},1000)
			// ,{title:res.data.msg?res.data.msg:'请求失败',duration:1000,icon:'error'}
			
			this.$eventBus.on('showToast',(data)=>{
				console.log(3333333);
				this.showToat(data);
				
			})
		}
	}
</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%;
	}
	
	.showToast{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		padding: 16px 12px;
		background-color: rgb(0,0,0,0.7);
		z-index: 2000;
		top: 40%;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	
	.showToast>image{
		width: 40px;
		height: 40px;
		margin-bottom: 20px;
	}
	
	.showToast>span{
		color: #ffffff;
		font-size: 18px;
	}
	
</style>