<template>
	<view class="device-management">
		<!-- 顶部导航栏 -->
		<u-navbar title="设备管理" :border-bottom="false" :background="{ background: '#1a1a1a' }" back-icon-color="#fff"
			title-color='#fff' title-size='36' height='36' id="navbar">
		</u-navbar>

		<!-- 搜索和筛选区域 -->
		<view class="search-filter">
			<view class="search-box">
				<u-icon name="search" color="#666" size="32"></u-icon>
				<input type="text" placeholder="搜索设备编号" placeholder-style="color: #666;" v-model="searchText"
					@input="handleSearch" />
				<u-icon name="scan" color="#666" @click="saoma" size="32"></u-icon>
			</view>

			<view class="filters">
				<view class="filter-item" @tap="showStorePopup">
					<text>门店：{{storesname}}</text>
					<u-icon name="arrow-down" color="#666" size="28"></u-icon>
				</view>
				<view class="filter-item" @tap="showStatusPopup">
					<text>状态：{{statusname}}</text>
					<u-icon name="arrow-down" color="#666" size="28"></u-icon>
				</view>
			</view>
		</view>

		<!-- 设备列表 -->
		<scroll-view scroll-y class="device-list" @scrolltolower="handqixing" refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white">
			<view v-for="(device,index) in deviceList" :key="index" class="device-item">
				<view class="device-header" @click="btnxq(device.deviceId)">
					<text class="sn">{{device.deviceName == null ? '--' : device.deviceName}}</text>
					<text :class="['status', device.onlineStatus == 1 ? 'online' : 'offline']">
						<view class="status-dot"></view>
						{{device.onlineStatus == 1 ? '在线' : '离线'}}
					</text>
				</view>

				<view class="device-content" @click="btnxq(device.deviceId)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uyKu3YhTED9tkOUSs919" mode="aspectFit"
						class="device-image" />
					<view class="device-info">
						<view class="info-row">
							<text class="label">SN：</text>
							<text class="value">{{device.deviceNo == null ? '--' : device.deviceNo}}</text>
						</view>
						<view class="info-row">
							<text class="label">门店名称：</text>
							<text class="value">{{device.storeName == null ? '--' : device.storeName}}</text>
						</view>
						<view class="info-row">
							<text class="label">设备状态：</text>
							<text class="value" v-if="device.status == 1">正常</text>
							<text class="value" v-if="device.status == 2">使用中</text>
							<text class="value" v-if="device.status == 3">维修中</text>
						</view>
						<view class="info-row">
							<text class="label">亮灯时长：</text>
							<text class="value">{{device.duration == null ? 0 : device.duration}}s</text>
						</view>
					</view>
				</view>
				<view class="device-footer">
					<view class=""></view>
					<view class="" style="display: flex;align-items: center;">
						<u-switch v-model="device.powerStatus == 1"
							@change="(e) => handleSwitch(e, device.deviceId,index)" style="transform:scale(0.8);"
							active-color="#FF4D7D"></u-switch>
						<button class="code-btn" @tap="showDeviceCode(device.deviceNo)">设备码</button>
					</view>
				</view>
			</view>
			<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;text-align: center;width: 100%;">
				没有更多设备了...</view>
		</scroll-view>
		<!-- 弹出层 -->
		<u-popup v-model="showStorePicker" mode="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text>选择门店</text>
					<u-icon name="close" @tap="showStorePicker = false"></u-icon>
				</view>
				<view class="popup-list">
					<view v-for="(store, index) in stores" :key="index" class="popup-item"
						:class="{ active: selectedStore === index }" @tap="selectStore(index)">
						{{store.name}}
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showStatusPicker" mode="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text>选择状态</text>
					<u-icon name="close" @tap="showStatusPicker = false"></u-icon>
				</view>
				<view class="popup-list">
					<view v-for="(status, index) in statusOptions" :key="index" class="popup-item"
						:class="{ active: selectedStatus === index }" @tap="selectStatus(index)">
						{{status}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js")
	export default {
		data() {
			return {
				searchText: '',
				stores: [{
					name: '全部',
					id: ''
				}],
				storesname: '全部',
				statusname: '全部',
				statusOptions: ['全部', '在线', '离线'],
				selectedStore: 0,
				selectedStatus: 0,
				deviceList: [],
				showStorePicker: false,
				showStatusPicker: false,
				bgc: {
					background: '#1a1a1a'
				},
				storeId: '',
				devicestatus: '',
				bdsn: '',
				user: {},
				pagesum:'',
				total:'',
				isRefreshing:false
			}
		},
		onLoad(option) {
			// xBlufi.initXBlufi(1)
            if(option.storeId){
				this.storeId = option.storeId
				this.storesname = option.tit
			}
		},
		onShow() {
			this.pagesum = 1
			this.getinfo()
			this.getlist()
			this.getshop()
			this.
			xBlufi.notifyStartDiscoverBle({
				'isStart': true
			})
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.pageNum = 1
				this.getlist()
				setTimeout(() => {
					this.isRefreshing = false
				}, 1000)
			},
			// 点击扫码绑定设备
			saoma() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log(res);
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						this.bdsn = getQueryParam(decodedValue, 's')
						console.log(this.bdsn, 'snsnsnsnsn');
						let data = {
							deviceNo: this.bdsn
						}
						this.$u.put(`/bst/device/bindMch?mchId=${this.user.userId}`, data).then(res => {
							if (res.code == 200) {
                                uni.showToast({
                                	title: '操作成功',
                                	icon: 'success',
                                	duration: 2000
                                })
								this.pagesum = 1
								this.getlist()
							} else if (res.msg == null) {
								uni.showToast({
									title: '未知错误',
									icon: 'none',
									duration: 2000
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			// 获取用户信息
			getinfo() {
				this.$u.get(`/getInfo`).then(res => {
					if (res.code == 200) {
						this.user = res.user
					}
				})
			},
			// 查询设备列表
			getlist() {
				this.$u.get(`/bst/device/list?pageNum=${this.pagesum}&pageSize=20&storeId=${this.storeId}&onlineStatus=${this.devicestatus}&deviceNo=${this.searchText}`).then(res => {
					if (res.code == 200) {
						this.total = res.total
						if(this.pagesum == 1){
							this.deviceList = res.rows
							this.pagesum++
						}else{
							this.deviceList = this.deviceList.concat(res.rows)
							this.pagesum++
						}
					} else if (res.msg == null) {
						uni.showToast({
							title: '未知错误',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 获取所有店铺
			getshop() {
				this.$u.get(`/bst/store/list?pageNum=1&pageSize=999`).then(res => {
					if (res.code == 200) {
						res.rows.forEach((item) => {
							this.stores.push({
								name: item.storeName,
								id: item.storeId
							})
						})
					}
				})
			},
			// 点击跳转到详情
			btnxq(deviceId) {
				// uni.navigateTo({
				// 	url: '/page_shanghu/device/devicexq?deviceId=' + deviceId
				// })
				uni.navigateTo({
					url: '/page_user/devicekzxq?deviceId=' + deviceId
				})
				// console.log('跳转到详情');
			},
			// 滚动骑行订单到底部分页请求
			handqixing() {
				if(this.total > this.deviceList.length){
					this.getlist()
				}else{
					console.log(11);
				}
			},
			// 进行搜索
			handleSearch(e) {
				this.pagesum = 1
				this.searchText = e.detail.value
				this.getlist()
			},
			// 选择店铺
			showStorePopup() {
				this.showStorePicker = true
			},
			//选择状态
			showStatusPopup() {
				this.showStatusPicker = true
			},
			//筛选门店条件
			selectStore(index) {
				this.storesname = this.stores[index].name
				this.storeId = this.stores[index].id
				console.log(this.storesname, this.storeId, '0000')
				this.selectedStore = index
				this.showStorePicker = false
				this.pagesum = 1
				this.getlist()
			},
			// 筛选在线离线条件
			selectStatus(index) {
				this.statusname = this.statusOptions[index]
				this.selectedStatus = index
				if (index == 0) {
					this.devicestatus = ''
				} else if (index == 1) {
					this.devicestatus = 1
				} else if (index == 2) {
					this.devicestatus = 0
				}
				this.showStatusPicker = false
				this.pagesum = 1
				this.getlist()
			},
			// 点击开关
			handleSwitch(e, deviceId, index) {
				console.log(e, deviceId, index)
				if (this.deviceList[index].powerStatus == 0) {
					this.$u.put(`/bst/device/iot/${deviceId}/switch?open=true`).then(res => {
						if (res.code == 200) {
							this.deviceList[index].powerStatus = 1
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else {
					this.$u.put(`/bst/device/iot/${deviceId}/switch?open=false`).then(res => {
						if (res.code == 200) {
							this.deviceList[index].powerStatus = 0
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			// 点击设备码
			showDeviceCode(sn) {
				uni.navigateTo({
					url: '/page_shanghu/ewm?sn=' + sn
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-iconfont {
		color: #fff !important;
	}

	.device-management {
		min-height: 100vh;
		background-color: #1a1a1a;

		.search-filter {
			padding: 20rpx;
			background-color: #1a1a1a;

			.search-box {
				display: flex;
				align-items: center;
				background-color: #2c2c2c;
				padding: 15rpx 30rpx;
				border-radius: 40rpx;
				margin-bottom: 30rpx;

				input {
					flex: 1;
					font-size: 28rpx;
					color: #fff;
					margin: 0 20rpx;
				}
			}

			.filters {
				display: flex;
				justify-content: space-between;

				.filter-item {
					flex: 1;
					margin: 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #2c2c2c;
					padding: 15rpx 30rpx;
					border-radius: 40rpx;

					text {
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
		}

		.device-list {
			width: 680rpx;
			margin: auto;
			height: 76vh;
			overflow: scroll;

			.device-item {
				background-color: #2c2c2c;
				margin-bottom: 20rpx;
				padding: 30rpx;
				border-radius: 20rpx;

				.device-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.sn {
						font-size: 32rpx;
						color: #fff;
						font-weight: 600;
					}

					.status {
						font-size: 24rpx;
						display: flex;
						align-items: center;

						.status-dot {
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						&.online {
							color: #67C23A;

							.status-dot {
								background-color: #67C23A;
							}
						}

						&.offline {
							color: #909399;

							.status-dot {
								background-color: #909399;
							}
						}
					}
				}

				.device-content {
					display: flex;
					margin-bottom: 20rpx;

					.device-image {
						width: 170rpx;
						height: 170rpx;
						margin-right: 30rpx;
						background-color: #1a1a1a;
						border-radius: 10rpx;
					}

					.device-info {
						flex: 1;

						.info-row {
							margin-bottom: 15rpx;
							display: flex;
							align-items: center;

							.label {
								color: #909399;
								font-size: 26rpx;
								width: 140rpx;
							}

							.value {
								color: #fff;
								font-size: 26rpx;
							}
						}
					}
				}

				.device-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.code-btn {
						width: 152rpx;
						// height: 64rpx;
						background-color: #2c2c2c;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						border: 2rpx solid #FF8998;
						font-size: 32rpx;
						color: #FF8998;
						text-align: center;
						margin-left: 30rpx;
					}
				}
			}
		}
	}

	.popup-content {
		background-color: #2c2c2c;
		border-radius: 20rpx 20rpx 0 0;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 2rpx solid #3a3a3a;

			text {
				color: #fff;
				font-size: 32rpx;
			}
		}

		.popup-list {
			padding: 20rpx 0;

			.popup-item {
				padding: 30rpx;
				color: #fff;
				font-size: 28rpx;

				&.active {
					color: #FF4D7D;
				}
			}
		}
	}
</style>