<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				{{pageTitle}}
			</view>
		</headers>
		<view class="equip-content">
			<view class="title">
				<!-- <text style="color: #2A2B5B; opacity: 0.4;">·设备列表·</text> -->
				<button type="primary" plain @click="getList()" size="mini" class="searchBluetooth">
					<icon v-show="!isSearching" class="searchIcon" color="#007aff" type="search" size="15" />
					<loadingGig v-show="isSearching"></loadingGig>
					<!-- <image src="/static/loading.png" class="loadingIcon"></image> -->
					{{isSearching?'搜索蓝牙中':'搜索蓝牙'}}
				</button>
			</view>
			<view class="listItem"
				:class="(bleDeviceId==item.deviceId&&isLinkFinished=='连接成功')?'linkFinishedItem':'value'"
				v-for="(item,index) in bluetooth" @click="conn(item)" :key="index">
				<view class="item_name">蓝牙编码：<text class="value">{{item.name?item.name:item.deviceId}}</text></view>
				<view class="item_name">信号强度：<text class="value">{{item.RSSI}}</text></view>
				<!-- <view class="item_name">边接状态：<text class="value">{{isLink[index]==0?'未连接':isLink[index]==1?'连接中...':isLink[index]==2?'连接成功':
				isLink[index]==3?'连接失败':isLink[index]==4?'已断开':''
				}}</text></view> -->
				<view class="item_name">连接状态：<text
						:class="bleDeviceId==item.deviceId?'primaryText':'value'">{{bleDeviceId==item.deviceId?isLinkFinished:'未连接'}}</text>
				</view>
				<view class="animateBox" v-show="bleDeviceId==item.deviceId&&isLinkFinished=='连接中...'">

				</view>
			</view>
			<view class="placeholderBox" v-if="bluetooth.length==0">
				<image class="noDataImg" src="/static/noData.png"></image>
				<view class="text">暂未搜到蓝牙设备</view>
			</view>
		</view>
		<view class="bigOperateBtn" @click="toMeasurePage">
			下一步
		</view>
	</view>
</template>

<script>
	import {
		getBlooth,
		createBLE,
		DeviceFound
	} from '@/static/js/BLEConn.js';
	import loadingGig from "@/components/loadingGig.vue"
	export default {
		data() {
			return {
				pageTitle: '设备列表',
				isSearching: false,
				bleDeviceId: '',
				bluetooth: [],
				bleName: '',
				isLinkFinished: ''
			}
		},
		components: {
			loadingGig
		},
		onLoad(options) {
			this.getList()
		},
		methods: {
			toMeasurePage() {
				uni.navigateTo({
					url: './taskDetails'
				});
			},
			async closeDevConnect(id) {
				if (this.bleDeviceId) {
					let that = this
					uni.closeBLEConnection({
						deviceId: this.bleDeviceId,
						success(res) {
							console.log('断开上一个连接的蓝牙')
							that.bleDeviceId = ''
							that.bleName = ''
							that.isLinkFinished = '未连接'

						}
					})
				}
			},
			// 2. 选中蓝牙并连接
			async conn(item) {
				// console.log(item)
				// uni.showLoading({
				// 	title: "正在连接...",
				// 	icon: "loading",
				// 	mask: true
				// })
				// await this.closeDevConnect(item.deviceId)
				if (this.bleDeviceId) {
					let that = this
					// that.closeBle().then(res => {
					// 	// this.closeDiv = false
					// 	// this.clear()
					// 	// uni.hideLoading()
					// 	console.log('断开蓝牙成功')
					// }).catch(err => {
					// 	// uni.hideLoading()
					// 	console.log('断开蓝牙失败')
					// })

					// return new Promise((resolve, reject) => {
					uni.closeBLEConnection({
						deviceId: this.bleDeviceId,
						success(res) {
							console.log('断开上一个连接的蓝牙')
							if (that.bleDeviceId == item.deviceId && (that.isLinkFinished == '连接成功')) {
								that.bleDeviceId = ''
								that.bleName = ''
								that.isLinkFinished = '未连接'
								uni.showToast({
									title: '已断开连接'
								})
							}
						}
					})
					// })
					if (this.bleDeviceId == item.deviceId && (that.isLinkFinished != '连接失败')) {
						console.log('停止接下来的操作')
						return false
					}
				}
				// console.log('执行完closeDevConnect')
				this.bleDeviceId = item.deviceId
				this.bleName = item.name
				this.isLinkFinished = '连接中...'
				// connBLESuc++
				let create = true // 判断有没有进入createBLE
				// '49535343-FE7D-4AE5-8FA9-9FAFD205E455'
				await createBLE(item, '00001800-0000-1000-8000-00805F9B34FB').then(res => {
					console.log('createBLE ' + res)
					create = false
					this.isLinkFinished = '连接成功'
					// this.addDevice(item.name, item.deviceId)
				}).catch(err => {
					console.log('createBLE error')
					// this.isLinkFinished = '连接失败'
					create = false

				})
			},
			// 搜索蓝牙列表
			async getList() {
				// uni.showLoading({
				// 	title: '蓝牙搜索中...',
				// 	icon: 'none'
				// })
				this.isSearching = true
				var flag = false // 标记是否进入了getBLooth
				this.closeDevConnect()
				await getBlooth().then(res => {
					console.log(res, '6666666666666')
					flag = true
					this.isSearching = false
					uni.showToast({
						title: '蓝牙搜索完成',
						icon: 'none'
					})
					// console.log('第' + times + '次')
					// if (res.devices.length == 0 && times <= 3) {
					// 	times++
					// 	this.getList()
					// } else {
					this.bluetooth = res.devices
					if (res.devices.length == 0) {
						// uni.showToast({
						// 	title: '请先开启手机定位',
						// 	icon: 'none',
						// 	mask: true
						// })
						this.checkOpenGPSServiceByAndroid()
					}
					console.log('蓝牙设备列表')
					console.log(this.bluetooth)
					// uni.hideLoading()
					// times = 1
					// // 打开弹框
					// this.$refs.popup.open()
					// this.scanBLE = true
					// }
				}).catch(err => {
					flag = false
					// times = 1
				})
				// console.log(flag)
				if (!flag) {
					this.isSearching = false
					// uni.hideLoading()
					let txt = ''
					if (this.platform == 'android') {
						txt = '和定位'
					}
					uni.showToast({
						title: '请先开启手机蓝牙' + txt,
						icon: 'none',
						mask: true
					})
					console.log('没有进入getBlooth')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.equip-content {
		.title {
			text-align: right;
			font-size: 30rpx;
			letter-spacing: 1.4px;
			padding: 8rpx 0;
			border-bottom: 1px solid #ccc;

			.searchBluetooth {
				position: relative;

				.searchIcon {
					vertical-align: middle;
					margin-right: 3px;
				}
			}
		}

		.listItem {
			line-height: 26px;
			margin-top: 15px;
			box-shadow: 0 2px 10px 0 rgba(212, 220, 236, 0.65);
			border-radius: 5px;
			padding: 10px 30rpx;
			font-size: 28rpx;
			position: relative;

			.item_name {
				color: rgba(42, 43, 91, 0.6);
			}

			.animateBox {
				position: absolute;
				left: 0;
				top: 5%;
				width: 80px;
				height: 90%;
				background: linear-gradient(to right, rgba(219, 231, 243, 0.2), rgba(219, 231, 243, 0.8), #dbe7f3);
				filter: blur(4px);
				animation: mymove 1s infinite;
			}
		}

		.linkFinishedItem {
			background-color: rgba(219, 231, 243, 0.2);
		}
	}

	.bigOperateBtn {
		position: fixed;
		bottom: 15px;
		left: 15px;
		width: calc(100% - 30px);
		background: #488DEC;
		box-shadow: 0px 4px 8px 0px rgba(43, 141, 243, 0.42);
		border-radius: 25px;
		height: 50px;
		line-height: 50px;
		color: white;
		font-size: 20px;
		text-align: center;
	}
</style>