<template>
	<view class="content">
		<view class="deviceDetail">
			<view class="imgContent">
				<image src="/static/images/BLEAdd/addBleDevice.png" class="titleIco" mode="aspectFit">
				</image>
			</view>
			<view class="deviceName">
				蓝牙名:{{device.name}}
			</view>
			<view class="deviceName">
				设备名:{{device.deviceName}}
			</view>
			<view class="deviceId">
				ID:{{device.deviceId}}
			</view>
			<view class="bound" v-bind:class="boundStatu">
				{{Statu.boundRemark}}
			</view>
		</view>
		<view class="btnLink" @click="Link()">
			连接
		</view>

		<global-loading ref="loading" />
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import bleTool from '@/utils/BleHelper.js';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js';
	
	const pagePath="pages/common/addBLE/LinkBle";
	
	var these = null;
	var eventChannel = null;
	var ble = null;
	export default {
		data() {
			return {
				Statu: {
					bound: null
				},
				device: {
					"deviceId": "",
					"name": "",
					"deviceName": "",
					"RSSI": -37,
					"localName": "",
					"advertisServiceUUIDs": [

					],
					"linkStatu": false,
					"macAddress": ""
				}
			}
		},
		computed: {
			boundStatu: function() {
				if (this.Statu.bound === null) {
					return "displayNone"
				}
				if (this.Statu.bound) {
					return "green"
				} else {
					return "red";
				}
			}
		},
		onBackPress() {
			console.log("返回时断开蓝牙连接,取消订阅");
			ble.disconnectDevice(these.device.deviceId);
			ble.removeReceiveCallback(pagePath);
		},
		onUnload() {
			console.log("返回时断开蓝牙连接,取消订阅");
			ble.removeReceiveCallback(pagePath);
		},
		onLoad(option) {
			these = this;
			ble = bleTool.getBleTool();
			ble.addReceiveCallback((receive,f,path) => {
				console.log("收到设备消息，", receive);
				if (these.device.deviceId == receive.deviceId) {
					// console.log("11111");
			
					if (receive.bytes[0] == 0xFC || receive.str.indexOf('mac address:') == 0) {
						if (f && f.macAddress) {
							these.device.macAddress = f.macAddress;
							// console.log("222222");
							these.initDevice();
						}
					}
				}
			},pagePath);
			eventChannel = this.getOpenerEventChannel();
			eventChannel.on('LinkItem', function(data) {
				console.log("data=",data);
				let f = ble.data.LinkedList.find((v) => {
					return v.deviceId == data.deviceId;
				});
				if (f) {
					let keys=Object.keys(f);
					keys.forEach((v,index)=>{
						these.device[v]=f[v];
					})
					console.log("LinkedList=",ble.data.LinkedList)
					 console.log("f=", f);
					console.log("获取到设备", these.device);
					if (f.macAddress) {
							these.device.macAddress = f.macAddress;
							
							these.initDevice();
						}
				} else {
					console.log("未获取到设备");
				}
			})
		},
		methods: {

			initDevice: function() {
				showLoading(these, {
					text: '正在获取设备信息'
				});
				console.log("these.device=",these.device);
				request({
					url: '/app/device/getDeviceInfoByDeviceMac',
					method: 'GET',
					data: {
						deviceMac: these.device.macAddress
					}
				}).then(res => {
					console.log("获取设备信息", res);
					if (res && res.code == 200) {
						let data = res.data;
						if (data) {
							let keys = Object.keys(data);
							ble.data.LinkedList.find((v) => {
								if(v.deviceId == these.device.deviceId){
									for (var i = 0; i < keys.length; i++) {
										let key = keys[i];
										v[key] = data[key];
										// console.log("key="+key);
										// console.log("value="+data[key]);
									
										
										these.$set(these.device, key, data[key]);
									
									}
									
									ble.setBleData();
								}
							});
							
								console.log("device=",these.device);
								console.log("LinkedList=",ble.data.LinkedList);
							

						}
					}

				}).catch((ex) => {
					console.log("获取设备出现异常:", ex);
				}).finally(() => {
					hideLoading(these);
				});
			},
			Link() {
				// 调用绑定设备接口

				let f = ble.data.LinkedList.find((v) => {
					return v.deviceId == these.device.deviceId;
				});
				if (!f) {
					these.Statu.bound = false;
					these.Statu.boundRemark = "蓝牙连接不成功";
					return;
				}
				if (!f.macAddress) {
					these.Statu.bound = false;
					these.Statu.boundRemark = "设备上报Mac地址异常";
					return;
				}
				these.Statu.bound = null;
				these.Statu.boundRemark = "";
				showLoading(these, {

					text: "连接中..."
				})
				let promise = request({
					url: '/app/device/bind',
					method: 'POST',
					data: {
						deviceImei: '',
						deviceMac: these.device.macAddress,
						communicationMode: '1', //0是4g,1是蓝牙
					}
				});
				promise.then((res) => {
					console.log("1111" + JSON.stringify(res));
					if (res.code == 200) {
						these.Statu.bound = true;
						these.Statu.boundRemark = "设备绑定成功!";
						ble.removeReceiveCallback(pagePath);

						uni.$emit("refreshDeviceList");
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/common/index/index"
							});
						}, 500);
					} else {
						these.Statu.bound = false;
						these.Statu.boundRemark = res.msg;
					}
				}).catch((ex) => {
					these.Statu.bound = false;
					these.Statu.boundRemark = '出现了未知的异常,操作失败';
				}).finally(() => {
					hideLoading(this);
				});
			}
		}
	}
</script>

<style>
	.content {
		background-color: #1d1d1d;
		color: #ffffffde;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		min-height: 100vh;
		height: auto;
		font-family: "PingFang SC";
	}

	.deviceDetail {
		margin: 200rpx auto;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.imgContent,
	.titleIco {
		width: 120rpx;
		height: 120rpx;
	}

	.deviceId {
		color: rgba(255, 255, 255, 0.87);
		font-size: 32rpx;

		line-height: 44rpx;
		letter-spacing: 0.14rpx;
		margin-top: 5rpx;
	}

	.btnLink {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		width: calc(100% - 60rpx);
		border-radius: 91px;
		height: 90rpx;
		background: rgba(187, 230, 0, 1);
		color: rgba(35, 35, 35, 1);


		font-size: 32rpx;
		line-height: 90rpx;
		letter-spacing: 12rpx;
		text-align: center;
	}

	.bound,
	.deviceName {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 44rpx;
		letter-spacing: 0.14rpx;
		margin-top: 5rpx;
	}

	.displayNone {
		display: none !important;
	}

	.green {
		color: rgba(187, 230, 0, 1);
	}

	.red {
		color: rgba(245, 80, 80, 1);
	}
</style>