<template>
	<view class="content">
		<button type="primary" class="button" @tap="Index" size="mini">首页</button>
		<button type="primary" class="button" @click="MechanicalArm1()" size="mini">机械臂1</button>
		<button type="primary" class="button" @click="MechanicalArm2()" size="mini">机械臂2</button>
		<button type="primary" class="button" @click="Download()" size="mini">下载</button> 
		<view v-for="(item,name,index) in 7" :key="index">
			<view class="propertyBox">
				<view class="propertyBox" v-for="(itema,indexa) in xyzr" :key="indexa">
					<text>Axis_{{itema}}{{index + 44}}:</text>
					<view class="text-color">
						<text>{{ Arr[(index * 4) + indexa] }} </text>
					</view>
				</view>
			</view>
			<view class="propertyBox">
				<view class="mytest" v-for="(itemb,indexb) in sandxyzr" :key="indexb">
					<input type="type" v-model="Send[((index) * 4) + indexb]" value="Send[(index * 4) + indexb]" />
				</view>
			</view>
		</view>
		<!-- 		<view class="tex-font" scroll-y="true">
			<text>ROG轴位置</text> 	
		</view>	
		
		<view class="tex-font1">
			<text>3刀-1</text>       
			<text class="f-text" >{{parseInt(_self.Knives3_1,16)}}</text>
			<text class="f-text1" >3刀-2</text>
			<text class="f-text" >{{parseInt(_self.Knives3_2,16)}}</text>
			<text class="f-text1" >4刀-1</text>
			<text class="f-text" >{{parseInt(_self.Knives4_1,16)}}</text>
			<text class="f-text1" >4刀-2</text>
			<text class="f-text" >{{parseInt(_self.Knives4_2,16)}}</text>
			<text class="f-text1" >4刀-3</text>
			<text class="f-text" >{{parseInt(_self.Knives4_3,16)}}</text>
		</view>
		<view class="myKnives">
			<input  class="ROG-color" @input="Knives" placeholder="3刀-1"/>	
			<input  class="ROG-color" @input="Knives1" placeholder="3刀-2"/>	
			<input  class="ROG-color" @input="Knives2" placeholder="4刀-1"/>				
			<input  class="ROG-color" @input="Knives3" placeholder="4刀-2"/>
			<input  class="ROG-color" @input="Knives4" placeholder="4刀-3"/>
		</view>
		<view class="tex-font2" >
			<text class="tex-font2">5刀-1</text>
			<text class="f-text" >{{parseInt(_self.Knives5_1,16)}}</text>
			<text class="f-text1" >5刀-2</text>
			<text class="f-text" >{{parseInt(_self.Knives5_2,16)}}</text>
			<text class="f-text1" >5刀-3</text>
			<text class="f-text" >{{parseInt(_self.Knives5_3,16)}}</text>
			<text class="f-text1" >5刀-4</text>
			<text class="f-text" >{{parseInt(_self.Knives5_4,16)}}</text>
			<text class="f-text1" >5刀-5</text>
			<text class="f-text" >{{parseInt(_self.Knives5_5,16)}}</text>
		</view>	
		 <view class="myKnives">
			<input  class="ROG-color" @input="Knives5" placeholder="5刀-1"/>	
			<input  class="ROG-color" @input="Knives6" placeholder="5刀-2"/>	
			<input  class="ROG-color" @input="Knives7" placeholder="5刀-3"/>				
			<input  class="ROG-color" @input="Knives8" placeholder="5刀-4"/>
		 	<input  class="ROG-color" @input="Knives9" placeholder="5刀-5"/>	
		</view>
		<view class="RoG-text1">
			<text >ROG正转</text>
			<text class="RoG-text" >{{parseInt(_self.ROG1,16)}}</text>
			<text class="RoG-text" >反转</text>
			<text class="RoG-text" >{{parseInt(_self.ROG2,16)}}</text>
		</view>	
		<view class="ROG">
			<input  class="ROG-color" @input="ROGForeward" placeholder="ROG正转"/>
			<input  class="ROG-color" @input="ROGReversal" placeholder="ROG反转"/>
		</view> -->
	</view>
</template>

<script>
	var _self;
	import process from '../../utils/process.js'
	const db = uniCloud.database();
	export default {
		data() {
			return {
				xyzr: ['X', 'Y', 'Z', 'R'],
				sandxyzr: ['x', 'y', 'z', 'r'],
				Arr: [],
				Send: [],
				timer: null,
				// Knives3_1:'',    //3刀-1
				// Knives3_2:'',    //3刀-2
				// Knives4_1:'',    //4刀-1
				// Knives4_2:'',    //4刀-2
				// Knives4_3:'',    //4刀-2
				// Knives5_1:'',    //5刀-1
				// Knives5_2:'',    //5刀-2
				// Knives5_3:'',    //5刀-3
				// Knives5_4:'',    //5刀-4
				// Knives5_5:'',    //5刀-5
				// ROG1:'',         //ROG正转
				// ROG2:''          //ROG反转
			}
		},
		onShow() {
			console.log(process.bushu)
			process.bushu = 0	
			//手动刷新数据框得数据
			for (let cnta = 0; cnta < 8; cnta++) {
				this.Send[cnta * 4 + 0] = process.glbStrSendData_FFCC.sendAxis_x[44 + cnta]
				this.Send[cnta * 4 + 1] = process.glbStrSendData_FFCC.sendAxis_y[44 + cnta]
				this.Send[cnta * 4 + 2] = process.glbStrSendData_FFCC.sendAxis_z[44 + cnta]
				this.Send[cnta * 4 + 3] = process.glbStrSendData_FFCC.sendAxis_r[44 + cnta]
			}
			 this.timer = setInterval(() => {
			 this.ReadData();           //显示数据
			 this.InputCoordinate();    //发送数据
			}, 100);
		},
		onLoad(option) {
			_self = this;	
		},
		onHide() {
			console.log('onHide');
			//关闭定时器
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			// Knives:function(event) {
			// 	_self.Knives3_1  = event.detail.value             // 3-1刀
			// },
			// Knives1:function(event) {
			// 	_self.Knives3_2  = event.detail.value             // 3-1刀
			// },
			// Knives2:function(event) {
			// 	_self.Knives4_1  = event.detail.value             // 3-1刀  
			// },
			// Knives3:function(event) {
			// 	_self.Knives4_2  = event.detail.value             // 3-1刀 
			// },
			// Knives4:function(event) {
			// 	_self.Knives4_3  = event.detail.value             // 3-1刀
			// },
			// Knives5:function(event) {
			// 	_self.Knives5_1  = event.detail.value             // 3-1刀
			// },
			// Knives6:function(event) {
			// 	_self.Knives5_2  = event.detail.value             // 3-1刀
			// },
			// Knives7:function(event) {
			// 	_self.Knives5_3  = event.detail.value             // 3-1刀
			// },
			// Knives8:function(event) {
			// 	_self.Knives5_4  = event.detail.value             // 3-1刀
			// }, 
			// Knives9:function(event) {
			// 	_self.Knives5_5  = event.detail.value             // 3-1刀
			// },
			// ROGForeward:function(event) {
			// 	_self.ROG1  = event.detail.value                 // 3-1刀
			// },
			// ROGReversal:function(event) {
			// 	_self.ROG2  = event.detail.value                  // 3-1刀
			// },
			//跳转到首页
			Index() {
				uni.navigateTo({
					url: '/pages/cottonCandy/index'
				})
			},
			//跳转机械臂1界面
			MechanicalArm1() {
				uni.navigateTo({
					url: '/pages/cottonCandy/MechanicalArm1'
				})
			},
			//跳转机械臂2界面
			MechanicalArm2() {
				uni.navigateTo({
					// uni.navigateBack({
					url: '/pages/cottonCandy/MechanicalArm2'
				})
			},
			Download() {
				db.collection('DataSave').where('machine_id == "001"').get().then((res) => {
					const DownloadData = res.result.data[0] 		
					//从数据库下载的数据传个 输入框的数组xyzr轴坐标里
					for (let cnti = 0; cnti < 8 ; cnti++) {                                  //xyzr轴坐标		
					    _self.Send[cnti * 4 + 0] = DownloadData.SavteData.sendAxis_x[44 + cnti]
					    _self.Send[cnti * 4 + 1] = DownloadData.SavteData.sendAxis_y[44 + cnti]
					    _self.Send[cnti * 4 + 2] = DownloadData.SavteData.sendAxis_z[44 + cnti]
					    _self.Send[cnti * 4 + 3] = DownloadData.SavteData.sendAxis_r[44 + cnti]    
					}
				})		
			},
			//显示对应的步数的xyzr值
			//处理数据
			ReadData() {
				_self.Arr = [0];
				for (let cnti = 0; cnti < 7; cnti++) {
					_self.Arr[cnti * 4 + 0] = process.recData.recAxis_x[44 + cnti]
					_self.Arr[cnti * 4 + 1] = process.recData.recAxis_y[44 + cnti]
					_self.Arr[cnti * 4 + 2] = process.recData.recAxis_z[44 + cnti]
					_self.Arr[cnti * 4 + 3] = process.recData.recAxis_r[44 + cnti]
				}
			},
			InputCoordinate() {
				//用for循环 把输入框中的数存在ByteArr数组中发送
				for (let cnta = 0; cnta < 8; cnta++) {
					// 判断 当前步数 是多少步  process.recData1.recCurrentSteps
					if ( 1 === process.bushu)  {
							 // if ((44 + cnta) === (process.SetSteps[0]))  {
							 _self.Send[cnta * 4 + 0] = process.glbStrSendData_FFCC.sendAxis_x[44 + cnta]  
							 _self.Send[cnta * 4 + 1] = process.glbStrSendData_FFCC.sendAxis_y[44 + cnta]  
							 _self.Send[cnta * 4 + 2] = process.glbStrSendData_FFCC.sendAxis_z[44 + cnta]  
							 _self.Send[cnta * 4 + 3] = process.glbStrSendData_FFCC.sendAxis_r[44 + cnta]   
						}			
					 if(0 === process.bushu ){
							process.glbStrSendData_FFCC.sendAxis_x[44 + cnta]  =  _self.Send[cnta * 4 + 0]
							process.glbStrSendData_FFCC.sendAxis_y[44 + cnta]  =  _self.Send[cnta * 4 + 1]
							process.glbStrSendData_FFCC.sendAxis_z[44 + cnta]  =  _self.Send[cnta * 4 + 2]
							process.glbStrSendData_FFCC.sendAxis_r[44 + cnta]  =  _self.Send[cnta * 4 + 3] 
					}
		        }		
			}
		}
	}
</script>

<style scoped>
	.button {
		height: 60rpx;
		width: 200rpx;
		margin-top: 30rpx;
		margin-left: 40rpx;
		border-radius: 10px;
	}

	.propertyBox {
		margin-top: 5rpx;
		flex-flow: row;
		justify-content: space-evenly;
		display: flex;
	}

	.text-color {
		border: 3rpx solid dodgerblue;
	}

	.mytest input {
		border: 1rpx solid black;
		width: 100rpx;
	}

	.tex-font {
		margin-top: 20rpx;
		font-size: 30rpx;
		text-align: center;
	}

	.tex-font1 {
		margin-left: 30rpx;
		font-size: 28rpx;
		margin-top: 15px;
	}

	.tex-font2 {
		font-size: 28rpx;
		margin-left: 15rpx;
		margin-top: 60rpx;
	}

	.f-text1 {
		margin-top: 10px;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.f-text {
		border: 2rpx solid dodgerblue;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.RoG-text {
		border: 2rpx solid dodgerblue;
		font-size: 28rpx;
		margin-left: 60rpx;
	}

	.RoG-text1 {
		margin-top: 60rpx;
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.myKnives {
		margin-top: 10rpx;
		width: 800rpx;
	}

	.myKnives input {
		border: 2rpx solid black;
		width: 115rpx;
		float: left;
		color: crimson;
	}

	.ROG-color {
		margin-left: 30rpx;
	}

	.ROG {
		margin-top: 15rpx;
		width: 900rpx;
	}

	.ROG input {
		border: 2rpx solid black;
		width: 335rpx;
		float: left;
		color: crimson;
	}
</style>
