<template>
	<view class="main-container">
		<view class="headbtn">
			<button @click="searchDevice">搜索设备</button>
		</view>
		<scroll-view  scroll-y="true"
			:refresher-enabled="false">
			<view v-for="(item, index) in deviceListDataShow" :key="item.id" class="list-item" hover-class="list-item-hover"
				hover-start-time="0" hover-stay-time="100" @click="listViewTap(item)">
				<!-- <image v-if="item.manufacturer==='eciot'" src="/static/img/ecble.png" class="list-item-img"></image> -->
				<image src="/static/img/ble.png" class="list-item-img"></image>
				<text class="list-item-name">{{item.name}}</text> 
				<image v-if="item.rssi >= -41" src="/static/img/s5.png" mode="aspectFit" class="list-item-rssi-img"></image>
				<image v-else-if="item.rssi >= -55" src="/static/img/s4.png" mode="aspectFit" class="list-item-rssi-img"></image>
				<image v-else-if="item.rssi >= -65" src="/static/img/s3.png" mode="aspectFit" class="list-item-rssi-img"></image>
				<image v-else-if="item.rssi >= -75" src="/static/img/s2.png" mode="aspectFit" class="list-item-rssi-img"></image>
				<image v-else="item.rssi < -75" src="/static/img/s1.png" mode="aspectFit" class="list-item-rssi-img"></image>
				<text class="list-item-rssi">{{item.rssi}}</text>
				<view class="list-item-line"></view>
			</view>
			<view v-if="deviceListDataShow.length==0" class="notice"> - 未发现设备，请确认蓝牙是否打开 -</view>
			<view class="gap"></view>
			<u-toast ref="uToast"></u-toast>
		</scroll-view>
	</view>
	
</template>

<script> 
// #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
	let ctx
	let deviceListData = []
	export default {  
		data() {
			return {
				deviceListDataShow: []
			}
		},
		onLoad() {
			ctx = this
			setInterval(() => {
				ctx.deviceListDataShow = JSON.parse(JSON.stringify(deviceListData))
			}, 800)
			this.requestAndroidPermission();
		},
		onShow() {
			setTimeout(() => {
				ctx.openBluetoothAdapter()
			}, 100)
			this.requestAndroidPermission().then((res)=>{
				console.log(res);
			}).catch((error)=>{
				console.log(error);
			})
		},
		onHide() {
			setTimeout(()=>{
				ctx.stopBluetoothDevicesDiscovery()
			},100)
		},
		methods: {
			requestAndroidPermission(permissionID){
				return new Promise((resolve, reject) => {
					plus.android.requestPermissions(
						['android.permission.WRITE_EXTERNAL_STORAGE',
						'android.permission.BLUETOOTH_ADMIN',
						'android.permission.ACCESS_FINE_LOCATION'
						], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
						function(resultObj) {
							for (var i = 0; i < resultObj.granted.length; i++) {
								var grantedPermission = resultObj.granted[i];
								result = 1
								console.log('已获取的权限：' + result);
							}
							for (var i = 0; i < resultObj.deniedPresent.length; i++) {
								var deniedPresentPermission = resultObj.deniedPresent[i];
								result = 0
								console.log('拒绝本次申请的权限：' + result);
							}
							for (var i = 0; i < resultObj.deniedAlways.length; i++) {
								var deniedAlwaysPermission = resultObj.deniedAlways[i];
								result = -1
								console.log('永久拒绝申请的权限：' + result);
							}
							resolve(result);
							// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
						},
						function(error) {
							console.log('申请权限错误：' + error.code + " = " + error.message);
							resolve({
								code: error.code,
								message: error.message
							});
						}
					);
				});
				},
			listViewTap(item){
				let name = item.name.split('XS')[1];
				let that = this;
				getApp().globalData.id = name
				getApp().globalData.deviceInfo = item
				ecUI.showLoading('设备连接中');
				ecBLE.onBLEConnectionStateChange(res => {
					if (res.ok) {
						ecUI.hideLoading()
						ecBLE.stopBluetoothDevicesDiscovery()
						uni.switchTab({
							url: '/pages/configuration/index',
						})
					} else if(res.errCode!=0) {
						ecUI.showModal(
							'提示',
							'连接失败,errCode=' + res.errCode + ',errMsg=' + res.errMsg
						)
					}else{
						getApp().globalData.id=''
					}
				})
				ecBLE.createBLEConnection(item.id)
			},
			openBluetoothAdapter() {
				ecBLE.onBluetoothAdapterStateChange(res => {
					if (res.ok) {
						console.log('Bluetooth adapter ok')
						ctx.startBluetoothDevicesDiscovery()
					} else {
						ecUI.showModal(
							'提示',
							`Bluetooth adapter error | ${res.errCode} | ${res.errMsg}`,
							() => {

							}
						)
					}
				})
				ecBLE.openBluetoothAdapter()
			},
			startBluetoothDevicesDiscovery() {
				console.log('start search')
				ecBLE.onBluetoothDeviceFound(res => {
					// if(res.id==="EC:22:05:13:78:49")
					// console.log(`id:${res.id},name:${res.name},rssi:${res.rssi}`)
					for (const item of deviceListData) {
						if (item.id === res.id) {
							item.name = res.name
							item.rssi = res.rssi
							return
						}
					}
					if (res.name.startsWith('XS')){
						deviceListData.push({
							id: res.id,
							name: res.name,
							rssi: res.rssi,
						})
					}
				})
				ecBLE.startBluetoothDevicesDiscovery()
			},
			searchDevice(){
				ctx.deviceListDataShow = []
				ecBLE.stopBluetoothDevicesDiscovery()
				ecBLE.openBluetoothAdapter()
			}
		}
	}
</script>

<style>
	.main-container {
		/* height: 100vh; */
	}

	.list-item {
		height: 57px;
		position: relative;
	}

	.list-item-hover {
		background-color: #e5e4e9;
	}

	.list-item-img {
		position: absolute;
		width: 36px;
		height: 36px;
		left: 20px;
		top: 10px;
	}

	.list-item-name {
		position: absolute;
		font-size: 22px;
		left: 76px;
		top: 0px;
		line-height: 56px;
		width: 290px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.list-item-rssi-img {
		position: absolute;
		width: 20px;
		height: 20px;
		right: 20px;
		top: 13px;
	}

	.list-item-rssi {
		position: absolute;
		width: 40px;
		height: 20px;
		right: 10px;
		top: 33px;
		font-size: 12px;
		font-weight: bold;
		display: flex;
		justify-content: center;
	}

	.list-item-line {
		position: absolute;
		height: 1px;
		width: 100vw;
		left: 20px;
		top: 56px;
		background-color: #c6c6c8;
	}

	.notice {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
		font-size: 13px;
		color: #909399;
	}

	.gap {
		height: 57px;
	}
	.headbtn{
		margin: 40rpx;
		width: 200rpx;
	}
	.headbtn button{
		background-color: #92CDDC;
		color: #fff;
	}
</style>
