<template>
	<view class="deviceInfo">
		<view class="deviceContent">
			<view class="infoShow">
				<view class="deviceitle info">设备数据</view>
				<view class="deivceData">
					<view class='left'>
						<view class="left_top">
							<view>
								<span>设备状态：</span>
								<image class="Icon" :src="deviceData.lightFlag==0?normalIcon:errorIcon"/>
							</view>
							<view>
								<span>自动对接：</span>
								<image class="Icon" :src="deviceData.autoDockLightFlag==0?errorIcon:normalIcon"/>
							</view>
							<view>
								<span>急停有效：</span>
								<image class="Icon" :src="deviceData.stopLightFlag==0?errorIcon:normalIcon"/>
							</view>
							<view>
								<span>自动装填：</span>
								<image class="Icon" :src="deviceData.autoFillLightFlag==0?errorIcon:normalIcon"/>
							</view>
							<view>
								<span>控制模式：</span>
								<span>{{deviceData.ctrlFlag==1?'自动':'手动'}}</span>
							</view>
							<view>
								<span>自动退货：</span>
								<image class="Icon" :src="deviceData.autoReturnLightFlag==0?errorIcon:normalIcon"/>
							</view>
						</view>
						
						<view class="left-bottom">
							<view>
								<view style="width: 25%;">设备状态:</view>
								<view>
									<image class="Icon" :src="normalIcon"/>：
									<span>正常</span>
								</view>
								<view>
									<image class="Icon" :src="errorIcon"/>：
									<span>异常</span>
								</view>
							</view>
							
							<view>
								<view style="width: 25%;">急停有效:</view>
								<view >
									<image class="Icon" :src="normalIcon"/>：
									<span>有效</span>
								</view>
								<view >
									<image class="Icon" :src="errorIcon"/>：
									<span>无效</span>
								</view>
								
							</view>
							
							<view>
								<view style="width: 25%;">自动对接:</view>
								<view>
									<image class="Icon" :src="normalIcon"/>：
									<span>有动作</span>
								</view>
								<view >
									<image class="Icon" :src="errorIcon"/>：
									<span>无动作</span>
								</view>
							</view>
							
							<view>
								<view style="width: 25%;">自动装填:</view>
								<view >
									<image class="Icon" :src="normalIcon"/>：
									<span>有动作</span>
								</view>
								<view >
									<image class="Icon" :src="errorIcon"/>：
									<span>无动作</span>
								</view>
							</view>
							
							<view>
								<view style="width: 25%;">自动退货:</view>
								<view >
									<image class="Icon" :src="normalIcon"/>：
									<span>有动作</span>
								</view>
								<view >
									<image class="Icon" :src="errorIcon"/>：
									<span>无动作</span>
								</view>
							</view>
							
							
							
						</view>
					</view>
					
					<view class="right">
						<view class="cameraInfo">
							<view style="width: 22%;">
								<span class="infoTitle">设备在线状态：</span>
								<span class="detail">{{deviceData.isOnline?'在线':'不在线'}}</span>
							</view>
							<view style="width: 22%;">
								<span class="infoTitle">相机1状态：</span>
								<span class="detail">{{cameraState(deviceData.cameraOneState)}}</span>
							</view>
							<view style="width: 22%;">
								<span class="infoTitle">相机2状态：</span>
								<span class="detail">{{cameraState(deviceData.cameraTwoState)}}</span>
							</view>
						</view>
						<view class="directionInfo">
							<view style="width: 22%;">
								<span class="infoTitle">X方向距离：</span>
								<span class="detail">{{deviceData.xAxisDistance}}mm</span>
							</view>
							<view style="width: 22%;">
								<span class="infoTitle">Y方向距离：</span>
								<span class="detail">{{deviceData.yAxisDistance}}mm</span>
							</view>
							<view style="width: 22%;">
								<span class="infoTitle">Z方向距离：</span>
								<span class="detail">{{deviceData.zAxisDistance}}mm</span>
							</view>
						</view>
						<view class="angleInfo">
							<view style="width: 22%;">
								<span class="infoTitle" >滚转角度：</span>
								<span >{{deviceData.horizontalTurnAngle?deviceData.horizontalTurnAngle:'0'}}°</span>
							</view>
							<view style="width: 22%;">
								<span class="infoTitle" >俯仰角度：</span>
								<span >{{deviceData.upDownAngle?deviceData.upDownAngle:'0'}}°</span>
							</view>
							<view style="width: 22%;">
								<span class="infoTitle" >方位角度：</span>
								<span class="detail">{{deviceData.directionAngle?deviceData.directionAngle:'0'}}°</span>
							</view>
						</view>
						<view class="encoderInfo">
							<view style="width: 28%;">
								<span class="infoTitle" >编码器在线状态：</span>
								<span class="detail">{{deviceData.encoderOnlineState==1?'在线':'离线'}}</span>
							</view>
							<view style="width: 24%;">
								<span class="infoTitle">编码器位置：</span>
								<span class="detail">{{deviceData.encoderPosition}}mm</span>
							</view>
							<view style="width: 10%;opacity: 0;">
								
							</view>
						</view>
						<view class="encoderInfo">
							<view style="width: 28%;">
								<span class="infoTitle">变频器在线状态：</span>
								<span class="detail">{{deviceData.vfdOnlineState==1?'在线':'离线'}}</span>
							</view>
							<view style="width: 24%;">
								<span class="infoTitle">变频器故障码：</span>
								<span class="detail">{{deviceData.vfdFaultCode}}</span>
							</view>
							<view style="width: 10%;opacity: 0;">
								
							</view>
						</view>
						<view class="angleInfo">
							<view style="width: 28%;">
								<span class="infoTitle">电机实际运行电流：</span>
								<span class="detail">{{deviceData.trueEleCurrent}}</span>
							</view>
							<view style="opacity: 0;">
								
							</view>
							<view style="opacity: 0;">
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="controlButton">
				<view class="deviceitle control">设备控制</view>
				<view class="controlContent">
					<view @click="controlDevice(1)">对接</view>
					<view @click="controlDevice(2)">装填</view>
					<view @click="controlDevice(3)">退货</view>
					<view @click="controlDevice(4)">急停</view>
					<view @click="controlDevice(5)">恢复</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {httpPost} from '../../utils/requset.js';
	export default{
		props:{
			Data:{
				type:Object
			}
		},
		data(){
			return{
				deviceData:{
					trueEleCurrent:'', //电机实际运行电流
					vfdOnlineState:'', //变频器在线状态
					vfdFaultCode: 1,//变频器故障码
					encoderPosition: 100,//编码器位置，单位mm
					encoderOnlineState: 0,//编码器在线状态：0-离线，1-在线
				
					upDownAngle:'', //俯仰角度
					directionAngle: 100,//方位角度，单位°
					horizontalTurnAngle: 100,//滚装角度，单位°
				
					cameraOneState: 1,//相机1状态：0:正常，1：通讯异常，2：无图像，3：光强饱和，4：缺少目标点
					cameraTwoState: 1,//相机2状态：0:正常，1：通讯异常，2：无图像，3：光强饱和，4：缺少目标点
				
					yAxisDistance: 100,//Y方向距离，单位mm
					xAxisDistance: 100,//X方向距离，单位mm
					zAxisDistance: 100,//Z方向距离，单位mm
				
					isOnline: false,//在线状态：true-在线、false
					
					autoDockLightFlag: 0,//自动对接：0：无动作、1：有动作
					stopLightFlag: 0,//急停有效：0：无效、1：有效
					autoReturnLightFlag: 0,//自动退货： 0：无动作、1：有动作
					autoFillLightFlag: 0,//自动装填： 0：无动作、1：有动作
					ctrlFlag: 0,//控制模式：0-手动、1-自动
					lightFlag: 1,//设备状态：0-正常、1-异常
				},
				errorIcon:'../../static/image/error.png',
				normalIcon:'../../static/image/normal.png'
			}
		},
		methods:{
			controlDevice(value){
				console.log(value)
				httpPost({
					url:`/zhxx/dt/horizonLoadIControl/${value}`,
					data:{}
				}).then((res)=>{
					console.log(res)
					
					if(res.data.code==200){
						this.$eventBus.emit('showToast',{title:res.data.msg,duration:1000,icon:'success'})
					}else {
						console.log(22222)
						this.$eventBus.emit('showToast',{title:res.data.msg?res.data.msg:'请求失败',duration:1000,icon:'error'})
					}
				}).catch((Error)=>{
					// console.log(Error)
						uni.showToast({
							title: Error,
							icon: "error",
							duration: 1000
						})
					})
			}
		},
		computed:{
			cameraState(){
				return function(value){
					let cameraData='';
					switch(value){
						case 0:
							cameraData='正常';
						break;
						case 1:
							cameraData='通讯异常';
						break;
						case 2:
							cameraData='无图像';
						break;
						case 3:
							cameraData='光强饱和';
						break;
						case 4:
							cameraData='缺少目标点';
						break;
					}
					
					return cameraData;
				}
			}
		},
		watch:{
			Data:{
				immediate:true,
				handler(newVal,oldVal){
					if(newVal){
						this.deviceData=newVal
					}
				}
			}
		}
	}
</script>

<style scoped>
	.deviceInfo{
		width: 100%;
		height: 90%;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.deviceContent{
		width: 98%;
		height: 98%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	.infoShow{
		width: 100%;
		height: 72%;
		border-radius: 10px;
		background-color: #ffffff;
	}
	
	.controlButton{
		width: 100%;
		height: 26%;
		border-radius: 10px;
		background-color: #ffffff;
	}
	
	.deviceitle{
		width: 100%;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28px;
		font-weight: bold;
		letter-spacing: 10px;
		background-color: rgb(204, 204, 204,0.4);
		border-radius: 10px 10px 0 0;
	}
	
	.info{
		height: 10%;
	}
	
	.control{
		height: 28%;
	}
	
	.deivceData{
		width: 100%;
		height: 88%;
		display: flex;
		align-items: center;
	}
	.left{
		width: 32%;
		height: 100%;
		border-right: 1px solid #ccc;
		font-size: 18px;
	}
	
	.left_top{
		width: 100%;
		height: 58%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid #ccc;
		
	}
	
	.left_top>view{
		width: 40%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		border:1px solid #ccc;
		border-radius: 10px;
		box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.12);
	}
	
	.Icon{
		width: 24px;
		height: 24px;
	}
	
	.left-bottom{
		width: 100%;
		height: 36%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 16px;
		padding-top: 2%;
	}
	
	.left-bottom>view{
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	
	.left-bottom>view>view{
		width: 32%;
		display: flex;
		justify-content: start;
		align-items: center;
		
	}
	
	.controlContent{
		width: 100%;
		height: 74%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.controlContent>view{
		width: 12%;
		height: 40%;
		background-color: #42B983;
		color: #ffffff;
		font-size: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}
	
	.controlContent>view:active{
		opacity: 0.6;
	}
	
	.right{
		width: 68%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 18px;
	}
	
	.cameraInfo,.directionInfo,.angleInfo,.encoderInfo{
		width: 96%;
		height: 11%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.cameraInfo>view,.directionInfo>view,.angleInfo>view,.encoderInfo>view{
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: start;
		align-items: center;
		border-radius: 10px;
		border: 1px solid #ccc;
		box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.12);
		padding: 0 3%;
	}
	
	.infoTitle{
		/* width: 52%; */
		
		display: flex;
		justify-content: center;
		align-items: center
	}
	
	.detail{
		/* width: 28%; */
		/* background-color: #ccc; */
	}
</style>