<template>
	<view class="main-container">
		<view class="centerBody">
			<view class="card">
				<view class="title">终端ID：</view>
				<view class="titleflex">
					<view class="titleInput">
						<u-input disabled v-model="value" />
					</view>
					<u-button type="primary" text="读取" @click="readName"></u-button>
				</view>
			</view>
			
			<view class="card">
				<view class="title">亮度控制</view>
				<view class="titleflex">
					<view>亮度：</view>
					<view class="sliderModel">
						<u-slider v-model="sliderValue" min="0" max="100"></u-slider>
					</view>
					<view class="twoInput">
						<u-input type="number" 
						v-model="sliderValue" 
						inputAlign="center"
						@input='inputClick'
						maxlength="3"
						></u-input>
					</view>
				</view>
				<view class="titleflex">
					<view>色温：</view>
					<view class="sliderModel sliderModel2">
						<u-slider v-model="sliderValue2" min="0" max="100"></u-slider>
					</view>
					<view class="twoInput">
						<u-input type="number" 
						 v-model="sliderValue2"
						 inputAlign="center"
						 @input='inputClick2'
						 maxlength="3"
						 ></u-input>
					</view>
				</view>
				<view class="dimmerbtn">
					<u-button type="primary" text="调光" @click="setDimmer"></u-button>
				</view>
			</view>
		</view>
		
		<view class="card">
		      <view class="title">状态读取</view>
		      <view class="cardList">
					<view class="inputlist">
					  <u-input v-model="status.test_voltage" shape="circle" disabled>
						  <view slot="prefix">电压：</view>
						  <view slot="suffix">
							  V
						  </view>
					  </u-input>
					  <u-input v-model="status.test_current" shape="circle" disabled>
						  <view slot="prefix">
						  		电流：
						  </view>
						  <view slot="suffix">
							  A
						  </view>
					  </u-input>
					</view>
					<view class="inputlist">
						<u-input shape="circle" v-model="status.test_active_power" disabled>
						  <view slot="prefix">有功功率：</view>
						  <view slot="suffix">
							  W
						  </view>
						</u-input>
						<u-input shape="circle" disabled>
						  <view slot="prefix">工作状态：</view>
						  <view slot="suffix">
							  
						  </view>
						</u-input>
					</view>
					<view class="inputlist2">
						<u-input shape="circle" v-model="status.test_dimmer1_read" disabled>
						  <view slot="prefix">调光值：</view>
						  <view slot="suffix">
							  %
						  </view>
						</u-input>
					</view>
				  </view>
				  <view class="u-flex u-row-between" style="margin-top: 20rpx;margin-left: 240px">
				  		<u-button shape="circle" type="primary" @click="getStatus">读取</u-button>
				  </view>
			  </view>
			  <u-overlay class='u-mask' :show="commandmaskshow" :opacity="0.6">
			  	<view>
			  		<u-loading-icon  size='40'></u-loading-icon>
			  	</view>
			  </u-overlay>
			  <u-toast ref="uToast"></u-toast>
		    </view>
		</view>
	</view>
</template>

<script>
	import { hexToString, recv_uart } from '@/common/blue_request.js'
	import { sendLampdimmer, receivecommand, sendReadlampstatus } from "@/common/network/protocol645.js"
	// #ifdef APP
	import ecUI from '@/utils/ecUI.js'
	import ecBLE from '@/utils/ecBLE/ecBLE.js'
	// #endif   
	// #ifdef MP
	const ecUI = require('@/utils/ecUI.js')
	const ecBLE = require('@/utils/ecBLE/ecBLE.js')
	// #endif
	export default{ 
		data(){
			return{
				value: '',
				voltage:'',
				current:'',
				power:'',
				worktype:'',
				dimmer:'',
				sliderValue:0,
				sliderValue2:0,
				commandmaskshow:false,
				status:{
					test_dimmer1_read: "",
					test_dimmer2_read: "",
					test_active_power: "",
					test_voltage: "",
					test_current: "",
					test_temperature: "",
					test_switch: "",
				},
			}
		},
		onLoad() {
			ecBLE.onBLEConnectionStateChange(() => {
				ecUI.showModal('提示', '设备断开连接')
			})
		},
		onShow() {
			if(getApp().globalData.id){
				this.value = getApp().globalData.id;
			}
			ecBLE.offBLEConnectionStateChange();
		},
		methods:{
			setDimmer(){
				this.sliderValue = Number(this.sliderValue);
				this.sliderValue2 = Number(this.sliderValue2)
				let id = getApp().globalData.id.toString();
				let that = this
				if(id!=''){
					if(
						this.sliderValue >= 0 && 
						this.sliderValue <= 100 &&
						this.sliderValue2 >= 0 &&
						this.sliderValue2 <= 100
					){
						id = id.padStart(12, '0')
						let data = {}
						data.id = id
						data.len = 2
						data.msg = hexToString(that.sliderValue) + hexToString(that.sliderValue2)
						this.sendLampdimmer(data)
					}else{
						that.$refs.uToast.show({
							message: "输入数值有误！",
							type: "error",
							icon: false,
						});
					}
				}else{
					that.$refs.uToast.show({
						message: "暂未连接设备！",
						type: "error",
						icon: false,
					});
				}
			},
			inputClick(e){
				if(this.sliderValue<0){
					this.sliderValue = 0
				}else if(this.sliderValue>100){
					this.sliderValue = 100
				}
				let str = this.sliderValue
				if(typeof(str)=="string"){
					if(str.startsWith('00')){
						this.sliderValue = null
					}
				}
			},
			inputClick2(e){
				if(this.sliderValue2<0){
					this.sliderValue2 = 0
				}else if(this.sliderValue2>100){
					this.sliderValue2 = 100
				}
				let str = this.sliderValue2
				if(typeof(str)=="string"){
					if(str.startsWith('00')){
						this.sliderValue2 = null
					}
				}
			},
			sendLampdimmer(data){
				// let strHex = ''
				// let recv_length = strHex.length / 2;
				// for(var i=0 ; i<recv_length; i ++)
				// {
				// 	recv_data[i] = rec.substr(2*i,2);
				// }
				  var that = this
				  this.commandmaskshow = true
				  sendLampdimmer(data)
				  .then((res) => {
					  console.log(res);
					  that.commandmaskshow = false
					  let result = receivecommand(res,data)
						if(result == true){
							that.$refs.uToast.show({
								message: "调光控制命令下发成功！",
								type: "success",
								icon: false,
							});
						}
						else{
							that.$refs.uToast.show({
							  message: "回复超时！",
							  type: "warning",
							  icon: false,
							});	 
						}
				  })
				  .catch((err) => {
				    console.log(err);
				  });
				},
			getStatus(){
				let id = getApp().globalData.id
				let that = this
				if(id!=0){
					id = id.padStart(12, '0')
					let data={}
					data.id = id
				// 读取灯杆信息
				this.sendReadlampstatus(data)
				}else{
					that.$refs.uToast.show({
						message: "暂未连接设备！",
						type: "error",
						icon: false,
					});
				}
				// let str = '689728100800006881123402343B33333333333333333333333397330D16'
				// recv_uart(str);
				// console.log(getApp().globalData.uart_645datalink);
			},
			sendReadlampstatus(data){
			  var that = this
			  this.commandmaskshow = true
			  sendReadlampstatus(data)
			  .then((recv) => {
				that.commandmaskshow = false
				if(recv.id == data.id  && recv.len == 18)
				{
					that.$refs.uToast.show({
						message: "灯状态读取成功！",
						type: "success",
						icon: false,
					});
					that.status.test_dimmer1_read = parseInt(recv.data[14],16).toString()//调光值
					that.status.test_dimmer2_read = parseInt(recv.data[15],16).toString()//色温值
					that.status.test_active_power = that.format1(parseInt(recv.data[13]+recv.data[12]+recv.data[11]+recv.data[10],16).toString(),1)//有功功率
					that.status.test_voltage = that.format2(parseInt(recv.data[9]+recv.data[8],16).toString(),1)//电压
					that.status.test_current = that.format2(parseInt(recv.data[7]+recv.data[6],16).toString(),2)//电流
					if(recv.data[5] == '01')
					{
						that.status.test_temperature = '-'+recv.data[4]//温度 
					}
					else{
						that.status.test_temperature = recv.data[4]//温度  
					}
		
					if(parseInt(recv.data[3],16)&(1))
					{
						that.status.test_error_checked1 = true//灯杆故障
					}
					else{
						that.status.test_error_checked1 = false
					}
					if(parseInt(recv.data[3],16)&(1<<1))
					{
						that.status.test_error_checked2 = true//温度故障  
					}
					else{
						that.status.test_error_checked2 = false		  
					}
				}
				else{
					that.$refs.uToast.show({
					  message: "回复超时！",
					  type: "warning",
					  icon: false,
					});	  
				}	 
			  })
			  .catch((err) => {
				console.log(err);
			  });	  
			},
			format1(str,len){
				let result=[],msg=''
				str = str.padStart(8, '0')
				for(var i=0 ; i<8; i ++)
				{
					result[i] = str.substr(i,1);
				}
				
				for(var i1=0;i1 < 8;i1++)
				{
					if((7-i1) == len)
					{
						msg=msg+result[i1]+'.'
					}
					else{
						msg=msg+result[i1]
					}
				}		
				return msg
				},
			format2(str,len){
				let result=[],msg=''
				str = str.padStart(4, '0')
				for(var i=0 ; i<4; i ++)
				{
					result[i] = str.substr(i,1);
				}
				
				for(var i1=0;i1 < 4;i1++)
				{
					if((3-i1) == len)
					{
						msg=msg+result[i1]+'.'
					}
					else{
						msg=msg+result[i1]
					}
				}		
				return msg
			},
			readName(){
				this.value = getApp().globalData.id;
				// this.value = '12312313'
			},
		}
	}
</script>

<style scoped>
	.main-container {
		padding: 28rpx 0 1px;
		background: linear-gradient(
		  180deg,
		  rgba(235, 241, 255, 0.5) 0%,
		  #e4ebff 100%
		);
		height: 100%;
	}
	.title{
		margin-bottom: 24rpx;
		
	  font-size: 38rpx;
	  font-weight: bold;
	  line-height: 50rpx;
	}
	.card {
	  margin: 0 32rpx 28rpx;
	  padding: 28rpx;
	
	  background-color: #ffffff;
	  border-radius: 10rpx;
	}
	.titleflex{
		display: flex;
		height: 100rpx;
		align-items: center;
	}
	.titleflex button{
		width: 160rpx;
	}
	.titleInput{
		margin-right: 30px;
	}
	.sliderModel >>> uni-slider .uni-slider-handle-wrapper{
		height: 20rpx;
		width: 350rpx;
	}
	.sliderModel2 >>> uni-slider .uni-slider-track{
		background: linear-gradient(270deg, #fff7e5 0%, #f7c23f 100%) !important;
	}
	.twoInput{
		width: 110rpx;
	}
	.twoInput >>> .u-input--square{
		border: 2rpx solid #4e73df !important;
	}
	.dimmerbtn{
		text-align: center;
	}
	.dimmerbtn button{
		width: 400rpx;
	}
	.centerBody{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 50rpx;
	}
	.centerBody2{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
	}
	.cardList{
		
	}
	.titOne{
		width: 150rpx;
		text-align: center;
	}
	.inputlist{
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.inputlist view:first-child{
		margin-right: 18rpx;
	}
	.inputlist2{
		width: 310rpx;
		margin-top: 20rpx;
	}
	.inputlist >>> .u-input__content__prefix-icon{
		color: #8d92a6;
	}
	.inputlist2 >>> .u-input__content__prefix-icon{
		color: #8d92a6;
	}
	.u-mask{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.u-mask >>> .u-loading-icon__dot:before{
		width: 3px;
	}
	.u-mask >>> .u-loading-icon__dot{
		color: #fff;
	}
</style>