<template>
	<view class="container">
		<!-- ========== 状态栏 ========== -->
		<!-- 显示蓝牙适配器和打印机的当前连接状态 -->
		<view class="status-section">
			<view class="status-item">
				<text class="status-label">蓝牙适配器</text>
				<text class="status-value" :class="adapterState.available ? 'available' : ''">
					{{ adapterState.available ? '就绪' : '未就绪' }}
				</text>
			</view>
			<view class="status-item">
				<text class="status-label">打印机</text>
				<text class="status-value" :class="{ connected: connected }">
					{{ connected ? '已连接' : '未连接' }}
				</text>
			</view>
		</view>

		<!-- ========== 蓝牙操作按钮 ========== -->
		<!-- 初始化蓝牙、搜索设备、断开连接 -->
		<view class="action-section">
			<button type="primary" size="mini" @click="initBluetooth" :disabled="isInitializing">
				{{ isInitializing ? '初始化中...' : '初始化蓝牙' }}
			</button>
			<button v-if="adapterState.available && !adapterState.discovering" type="primary" size="mini" @click="startDiscovery">
				搜索打印机
			</button>
			<button v-if="adapterState.discovering" type="default" size="mini" @click="stopDiscovery">
				停止搜索
			</button>
			<button v-if="connected" type="warn" size="mini" @click="disconnectPrinter">
				断开连接
			</button>
		</view>

		<!-- ========== 设备列表 ========== -->
		<!-- 未连接时显示搜索到的蓝牙设备列表 -->
		<view class="section" v-if="!connected">
			<view class="section-header">
				<text class="section-title">可用设备 ({{ deviceList.length }})</text>
			</view>
			<scroll-view class="device-list" scroll-y>
				<view 
					class="device-item" 
					v-for="device in deviceList" 
					:key="device.deviceId"
					:class="{ connecting: connectingDeviceId === device.deviceId }"
					@click="connectDevice(device)">
					<text class="device-name">{{ device.name || device.localName || '未知设备' }}</text>
					<text class="device-id">{{ device.deviceId }}</text>
					<text class="connect-hint" v-if="connectingDeviceId === device.deviceId">连接中...</text>
				</view>
				<view class="empty-tip" v-if="deviceList.length === 0 && !adapterState.discovering">
					<text>暂无设备，请点击搜索</text>
				</view>
			</scroll-view>
		</view>

		<!-- ========== 打印控制区 ========== -->
		<!-- 已连接时显示打印控制界面，包括服务配置、指令模板、打印测试等 -->
		<view class="section print-section" v-else>
			<view class="section-header">
				<text class="section-title">打印控制</text>
				<text class="printer-name">{{ connectedDeviceName }}</text>
			</view>

			<!-- ===== 蓝牙服务配置区域 ===== -->
			<!-- 用于配置蓝牙服务的UUID和特征值，这是蓝牙打印机通信的关键参数 -->
			<view class="service-select-section" v-if="serviceList.length > 0">
				<view class="section-header">
					<text class="section-title">蓝牙服务配置</text>
					<view class="header-actions">
						<!-- 保存当前配置到本地存储，下次可直接使用 -->
						<button size="mini" type="primary" @click="saveCurrentConfig" :disabled="!connected || !writeCharacteristicId">保存配置</button>
					</view>
				</view>
				
				<!-- ===== 打印纸尺寸选择 ===== -->
				<view class="paper-size-section">
					<text class="section-title">打印纸尺寸</text>
					<view class="paper-size-grid">
						<view 
							class="paper-size-item" 
							:class="{ selected: paperWidth === 100 && paperHeight === 100 }"
							@click="selectPaperSize(100, 100)">
							<text class="paper-size-name">100mm x 100mm</text>
						</view>
						<view 
							class="paper-size-item" 
							:class="{ selected: paperWidth === 150 && paperHeight === 150 }"
							@click="selectPaperSize(150, 150)">
							<text class="paper-size-name">150mm x 150mm</text>
						</view>
						<view 
							class="paper-size-item" 
							:class="{ selected: paperWidth === 200 && paperHeight === 200 }"
							@click="selectPaperSize(200, 200)">
							<text class="paper-size-name">200mm x 200mm</text>
						</view>
					</view>
				</view>
				
				<!-- 当前已选择的服务和特征值UUID -->
				<view class="current-config">
					<view class="config-item">
						<text class="config-label">服务UUID:</text>
						<text class="config-value" :class="{ active: writeServiceId }">{{ writeServiceId || '未选择' }}</text>
					</view>
					<view class="config-item">
						<text class="config-label">特征值UUID:</text>
						<text class="config-value" :class="{ active: writeCharacteristicId }">{{ writeCharacteristicId || '未选择' }}</text>
					</view>
				</view>

				<!-- 服务列表，点击可选择服务并获取其特征值 -->
				<view class="service-list">
					<text class="list-title">服务列表 ({{ serviceList.length }})</text>
					<scroll-view class="service-scroll" scroll-x>
						<view 
							class="service-tag" 
							v-for="(service, index) in serviceList" 
							:key="index"
							:class="{ selected: selectedService && selectedService.uuid === service.uuid }"
							@click="selectService(service)">
							<text class="service-index">{{ index + 1 }}</text>
							<text class="service-uuid">{{ service.uuid }}</text>
							<text class="service-type">{{ service.isPrimary ? '主' : '从' }}</text>
						</view>
					</scroll-view>
				</view>

				<!-- 特征值列表，显示每个特征值的属性（write/read/notify等） -->
				<view class="characteristic-list" v-if="characteristicList.length > 0">
					<text class="list-title">特征值列表 ({{ characteristicList.length }})</text>
					<scroll-view class="characteristic-scroll" scroll-y>
						<view 
							class="characteristic-item" 
							v-for="(char, index) in characteristicList" 
							:key="index"
							:class="{ 
								selected: writeCharacteristicId === char.uuid,
								writable: isWritable(char)
							}"
							@click="selectCharacteristic(char, serviceList.find(s => s.uuid === selectedServiceId))">
							<view class="char-info">
								<text class="char-uuid">{{ char.uuid }}</text>
								<view class="char-props">
									<text class="prop-tag" v-if="char.properties.write">write</text>
									<text class="prop-tag" v-if="char.properties.writeNoResponse">writeNoResp</text>
									<text class="prop-tag" v-if="char.properties.writeWithoutResponse">writeWithoutResp</text>
									<text class="prop-tag" v-if="char.properties.read">read</text>
									<text class="prop-tag" v-if="char.properties.notify">notify</text>
									<text class="prop-tag" v-if="char.properties.indicate">indicate</text>
								</view>
							</view>
							<text class="select-btn">{{ writeCharacteristicId === char.uuid ? '已选择' : '选择' }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- ========== 操作日志 ========== -->
		<!-- 记录所有蓝牙操作和打印指令发送的日志信息 -->
		<view class="section log-section">
			<view class="section-header">
				<text class="section-title">操作日志</text>
				<button size="mini" @click="clearLog">清空</button>
			</view>
			<scroll-view class="log-list" scroll-y>
				<text class="log-item" 
                    :class="log.type"
                    v-for="(log, index) in logList"
                    :key="index">
					[{{ log.time }}] {{ log.message }}
				</text>
			</scroll-view>
		</view>

	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

/**
 * 蓝牙标签打印机配置页面
 * 
 * 功能说明：
 * 1. 初始化蓝牙适配器，搜索附近的蓝牙打印机设备
 * 2. 连接选定的打印机，获取并配置蓝牙服务和特征值
 * 3. 支持保存/加载打印机配置到 Vuex store
 * 4. 显示操作日志便于调试
 * 
 * 使用说明：
 * - 首次使用需要初始化蓝牙并搜索设备
 * - 连接设备后选择服务和特征值（通常自动选择可写的）
 * - 点击"保存配置"保存当前配置，下次可直接使用
 */

export default {
	data() {
		return {
			// ========== 蓝牙适配器状态 ==========
			// available: 蓝牙适配器是否可用
			// discovering: 是否正在搜索设备
			adapterState: {
				available: false,
				discovering: false
			},
			isInitializing: false,  // 是否正在初始化蓝牙
			
			// ========== 设备列表 ==========
			deviceList: [],           // 搜索到的蓝牙设备列表
			connectingDeviceId: '',  // 正在连接的设备ID
			
			// ========== 连接状态 ==========
			connectedDeviceId: '',   // 已连接设备ID
			connectedDeviceName: '', // 已连接设备名称
			connected: false,        // 是否已连接打印机
			
			// ========== 服务和特征值 ==========
			// writeServiceId: 可写服务UUID（用于发送数据）
			// writeCharacteristicId: 可写特征值UUID（数据写入点）
			// serviceList: 设备的所有服务列表
			// characteristicList: 当前服务的所有特征值列表
			// selectedService: 当前选中的服务对象
			// selectedServiceId: 当前选中的服务UUID
			writeCharacteristicId: '',
			writeServiceId: '',
			serviceList: [],
			characteristicList: [],
			selectedService: null,
			selectedServiceId: '',
			
			// ========== 操作日志 ==========
			// 记录所有操作和调试信息，最多保留100条
			logList: []

		}
	},
	computed: {
		// 从 Vuex store 映射纸尺寸
		...mapGetters('print', ['paperWidth', 'paperHeight'])
	},
	onLoad() {
		// 页面加载时自动初始化蓝牙
		this.initBluetooth()
		// 设置蓝牙状态变化监听
		this.setupListeners()
		// 加载保存的配置（从 store 获取）
		this.loadSavedConfig()
	},
	onUnload() {
		// 页面卸载时清理资源（断开连接、停止搜索）
		this.cleanup()
	},
	methods: {
		// 映射 Vuex actions
		...mapActions('print', ['updatePaperSize', 'savePrinterConfig']),
		
		/**
		 * 添加日志记录
		 * @param {string} message - 日志消息内容
		 * @param {string} type - 日志类型：info/success/warn/error
		 */
		addLog(message, type = 'info') {
			const now = new Date()
			const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
			this.logList.unshift({ time, message, type })
			// 最多保留100条日志
			if (this.logList.length > 100) {
				this.logList.pop()
			}
			console.log(`[BLE Print] ${message}`)
		},
		
		/**
		 * 清空所有日志
		 */
		clearLog() {
			this.logList = []
		},
		
		/**
		 * 设置蓝牙事件监听器
		 * 包括：适配器状态变化、设备发现、连接状态变化
		 */
		setupListeners() {
			// 监听蓝牙适配器状态变化
			uni.onBluetoothAdapterStateChange((res) => {
				this.addLog(`适配器: available=${res.available}, discovering=${res.discovering}`)
				this.adapterState.available = res.available
				this.adapterState.discovering = res.discovering
			})
			
			// 监听发现新设备
			uni.onBluetoothDeviceFound((res) => {
				const devices = res.devices || []
				devices.forEach(device => {
					// 过滤掉没有名称的设备
					if (!device.name && !device.localName) return
					const index = this.deviceList.findIndex(d => d.deviceId === device.deviceId)
					if (index === -1) {
						this.deviceList.push(device)
						this.addLog(`发现: ${device.name || device.localName}`)
					}
				})
			})
			
			// 监听连接状态变化（用于检测设备被断开的情况）
			uni.onBLEConnectionStateChange((res) => {
				if (!res.connected && this.connectedDeviceId === res.deviceId) {
					this.connected = false
					this.connectedDeviceId = ''
					this.connectedDeviceName = ''
					this.addLog('设备已断开', 'warn')
				}
			})
		},
		
		/**
		 * 初始化蓝牙适配器
		 * 必须在使用任何蓝牙功能前调用
		 */
		initBluetooth() {
			if (this.isInitializing) return
			this.isInitializing = true
			this.addLog('初始化蓝牙...')
			uni.openBluetoothAdapter({
				success: (res) => {
					this.adapterState.available = true
					this.isInitializing = false
					this.addLog('蓝牙初始化成功')
					// 获取已知设备（可能之前已配对）
					this.getKnownDevices()
				},
				fail: (err) => {
					this.isInitializing = false
					this.adapterState.available = false
					this.addLog(`初始化失败: ${err.errMsg}`, 'error')
				}
			})
		},
		
		/**
		 * 获取已知的蓝牙设备
		 * 这些设备可能是之前配对过的
		 */
		getKnownDevices() {
			uni.getBluetoothDevices({
				success: (res) => {
					if (res.devices && res.devices.length > 0) {
						this.deviceList = res.devices.filter(d => d.name || d.localName)
					}
				}
			})
		},
		
		/**
		 * 开始搜索附近的蓝牙设备
		 * 搜索时长默认15秒
		 */
		startDiscovery() {
			if (this.adapterState.discovering) return
			this.deviceList = []
			this.addLog('开始搜索...')
			uni.startBluetoothDevicesDiscovery({
				allowDuplicatesKey: true,  // 允许重复发现同一设备
				success: () => {
					this.adapterState.discovering = true
					this.addLog('搜索中...')
					// 15秒后自动停止搜索
					setTimeout(() => {
						if (this.adapterState.discovering) {
							this.stopDiscovery()
						}
					}, 15000)
				},
				fail: (err) => {
					this.addLog(`搜索失败: ${err.errMsg}`, 'error')
				}
			})
		},
		
		/**
		 * 停止搜索蓝牙设备
		 */
		stopDiscovery() {
			uni.stopBluetoothDevicesDiscovery({
				success: () => {
					this.adapterState.discovering = false
					this.addLog('已停止搜索')
				}
			})
		},
		
		/**
		 * 连接指定的蓝牙设备
		 * @param {Object} device - 设备对象，包含deviceId和name
		 */
		connectDevice(device) {
			if (this.connected) return
			this.connectingDeviceId = device.deviceId
			this.addLog(`连接 ${device.name || device.localName}...`)
			uni.createBLEConnection({
				deviceId: device.deviceId,
				timeout: 10000,  // 10秒超时
				success: () => {
					this.connected = true
					this.connectedDeviceId = device.deviceId
					this.connectedDeviceName = device.name || device.localName
					this.connectingDeviceId = ''
					this.addLog('连接成功')
					// 获取设备的服务列表
					this.getPrinterServices()
				},
				fail: (err) => {
					this.connectingDeviceId = ''
					this.addLog(`连接失败: ${err.errMsg}`, 'error')
				}
			})
		},
		
		/**
		 * 断开当前连接的蓝牙设备
		 */
		disconnectPrinter() {
			if (!this.connectedDeviceId) return
			this.addLog('断开连接...')
			uni.closeBLEConnection({
				deviceId: this.connectedDeviceId,
				success: () => {
					this.connected = false
					this.connectedDeviceId = ''
					this.connectedDeviceName = ''
					this.serviceList = []
					this.characteristicList = []
					this.addLog('已断开')
				},
				fail: (err) => {
					this.addLog(`断开失败: ${err.errMsg}`, 'error')
				}
			})
		},
		
		/**
		 * 获取已连接设备的服务列表
		 */
		getPrinterServices() {
			this.addLog('获取服务...')
			uni.getBLEDeviceServices({
				deviceId: this.connectedDeviceId,
				success: (res) => {
					this.serviceList = res.services
					this.addLog(`找到 ${res.services.length} 个服务`)
					// 自动选择第一个主服务
					const primaryService = res.services.find(s => s.isPrimary)
					if (primaryService) {
						this.selectService(primaryService)
					}
				},
				fail: (err) => {
					this.addLog(`获取服务失败: ${err.errMsg}`, 'error')
				}
			})
		},
		
		/**
		 * 选择服务并获取其特征值列表
		 * @param {Object} service - 选中的服务对象
		 */
		selectService(service) {
			this.selectedService = service
			this.selectedServiceId = service.uuid
			this.addLog(`选择服务: ${service.uuid}`)
			uni.getBLEDeviceCharacteristics({
				deviceId: this.connectedDeviceId,
				serviceId: service.uuid,
				success: (res) => {
                    console.log(res)
					this.characteristicList = res.characteristics
					// 查找可写特征值，按优先级：write > writeNoResponse > writeWithoutResponse
					const writableChar = res.characteristics.find(c => c.properties.write)
					if (writableChar) {
						this.writeCharacteristicId = writableChar.uuid
						this.writeServiceId = service.uuid
						this.addLog(`可写特征值: ${writableChar.uuid}`)
					} else {
						const writeNoRespChar = res.characteristics.find(c => c.properties.writeNoResponse)
						if (writeNoRespChar) {
							this.writeCharacteristicId = writeNoRespChar.uuid
							this.writeServiceId = service.uuid
							this.addLog(`可写特征值(writeNoResp): ${writeNoRespChar.uuid}`)
						} else {
							const writeWithoutRespChar = res.characteristics.find(c => c.properties.writeWithoutResponse)
							if (writeWithoutRespChar) {
								this.writeCharacteristicId = writeWithoutRespChar.uuid
								this.writeServiceId = service.uuid
								this.addLog(`可写特征值(writeWithoutResp): ${writeWithoutRespChar.uuid}`)
							} else {
								this.addLog(`未找到可写特征值，特征值数: ${res.characteristics.length}`, 'warn')
							}
						}
					}
				},
				fail: (err) => {
					this.addLog(`获取特征值失败: ${err.errMsg}`, 'error')
				}
			})
		},
		
		/**
		 * 选择特征值
		 * @param {Object} char - 选中的特征值对象
		 * @param {Object} service - 所属的服务对象
		 */
		selectCharacteristic(char, service) {
			if (!service) {
				this.addLog('请先选择服务', 'warn')
				return
			}
			// 检查是否有任何可写属性
			if (!this.isWritable(char)) {
				this.addLog('该特征值无可写属性', 'warn')
				return
			}
			this.writeCharacteristicId = char.uuid
			this.writeServiceId = service.uuid
			this.addLog(`已选择特征值: ${char.uuid}`)
			uni.showToast({ title: '特征值已选择', icon: 'success' })
		},
		
		/**
		 * 检查特征值是否可写
		 * @param {Object} char - 特征值对象
		 * @returns {boolean} 是否可写
		 */
		isWritable(char) {
			return char.properties && (
				char.properties.write || 
				char.properties.writeNoResponse || 
				char.properties.writeWithoutResponse
			)
		},
		
		/**
		 * 选择打印纸尺寸
		 * @param {number} width - 纸张宽度(mm)
		 * @param {number} height - 纸张高度(mm)
		 */
		async selectPaperSize(width, height) {
			try {
				await this.updatePaperSize({ width, height })
				this.addLog(`已选择纸尺寸: ${width}mm x ${height}mm`)
				uni.showToast({
					title: `已选择 ${width}mm x ${height}mm`,
					icon: 'success',
					duration: 1500
				})
			} catch (error) {
				this.addLog(`选择纸尺寸失败: ${error.message}`, 'error')
			}
		},
		
		/**
		 * 清理资源
		 * 断开连接并停止搜索
		 */
		cleanup() {
			if (this.connected) {
				this.disconnectPrinter()
			}
			if (this.adapterState.discovering) {
				this.stopDiscovery()
			}
		},
		
		/**
		 * 保存当前配置到 Vuex store（自动同步到本地存储）
		 * 包括设备ID、服务UUID、特征值UUID等信息
		 * 保存后可快速加载使用
		 */
		async saveCurrentConfig() {
			if (!this.connected) {
				uni.showToast({ title: '请先连接打印机', icon: 'none' })
				return
			}
			if (!this.writeServiceId || !this.writeCharacteristicId) {
				uni.showToast({ title: '请先选择服务和特征值', icon: 'none' })
				return
			}
			const config = {
				deviceId: this.connectedDeviceId,
				serviceId: this.writeServiceId,
				writeCharId: this.writeCharacteristicId,
				deviceName: this.connectedDeviceName,
				connected: true,
				lastUpdated: new Date().toISOString()
			}
			try {
				await this.savePrinterConfig(config)
				this.addLog(`配置已保存: ${this.connectedDeviceName}`, 'success')
				uni.showToast({
					title: '配置已保存',
					icon: 'success',
					duration: 2000
				})
			} catch (error) {
				this.addLog(`保存配置失败: ${error.message}`, 'error')
			}
		},

		/**
		 * 加载保存的配置
		 * 纸尺寸通过 computed 从 store 获取，无需手动加载
		 */
		loadSavedConfig() {
			// 纸尺寸通过 mapGetters 映射，无需手动加载
			this.addLog(`纸尺寸: ${this.paperWidth}mm x ${this.paperHeight}mm`)
		}
	}
}
</script>

<style scoped>
/* ========== 页面容器 ========== */
.container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;
}

/* ========== 状态栏 ========== */
.status-section {
	display: flex;
	background: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}
.status-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.status-label {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 8rpx;
}
.status-value {
	font-size: 28rpx;
	font-weight: bold;
	color: #666;
}
.status-value.available {
	color: #007aff;  /* 蓝色 - 适配器就绪 */
}
.status-value.connected {
	color: #34c759;  /* 绿色 - 已连接 */
}

/* ========== 操作按钮区域 ========== */
.action-section {
	display: flex;
	gap: 16rpx;
	margin-bottom: 20rpx;
	flex-wrap: wrap;
}
.action-section button {
	flex: 1;
	min-width: 150rpx;
}

/* ========== 通用区块样式 ========== */
.section {
	background: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 16rpx;
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}
.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}
.printer-name {
	font-size: 24rpx;
	color: #34c759;
}

/* ========== 设备列表 ========== */
.device-list {
	max-height: 300rpx;
}
.device-item {
	padding: 24rpx;
	border-bottom: 1rpx solid #eee;
}
.device-item:active {
	background: #f5f5f5;
}
.device-item.connecting {
	background: #e8f4ff;  /* 连接中高亮 */
}
.device-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
}
.device-id {
	font-size: 22rpx;
	color: #999;
	word-break: break-all;
}
.connect-hint {
	font-size: 24rpx;
	color: #007aff;
}
.empty-tip {
	text-align: center;
	padding: 40rpx;
	color: #999;
}

/* ========== 打印控制区 ========== */
.print-section {
	min-height: 200rpx;
}

/* ========== 打印纸尺寸选择 ========== */
.paper-size-section {
	margin-bottom: 20rpx;
}
.paper-size-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
	margin-top: 12rpx;
}
.paper-size-item {
	flex: 1;
	min-width: 200rpx;
	padding: 20rpx;
	background: #f0f0f0;
	border-radius: 8rpx;
	border: 2rpx solid transparent;
	text-align: center;
}
.paper-size-item.selected {
	background: #e8f4ff;
	border-color: #007aff;
}
.paper-size-name {
	font-size: 26rpx;
	color: #333;
}
.paper-size-item.selected .paper-size-name {
	color: #007aff;
	font-weight: bold;
}

/* ========== 日志区域 ========== */
.log-section {
	min-height: 200rpx;
}
.log-list {
	height: 250rpx;
	background: #1c1c1c;  /* 深色背景 */
	border-radius: 8rpx;
	padding: 16rpx;
}
.log-item {
	display: block;
	font-size: 22rpx;
	font-family: 'Courier New', monospace;
	color: #fff;
	margin-bottom: 8rpx;
	line-height: 1.4;
}
.log-item.success {
	color: #34c759;  /* 绿色 */
}
.log-item.warn {
	color: #ff9500;  /* 橙色 */
}
.log-item.error {
	color: #ff3b30;  /* 红色 */
}

/* ========== 蓝牙服务配置区域 ========== */
.service-select-section {
	margin-bottom: 20rpx;
	padding: 16rpx;
	background: #f8f8f8;
	border-radius: 8rpx;
}
.current-config {
	padding: 16rpx;
	background: #fff;
	border-radius: 8rpx;
	margin-bottom: 16rpx;
}
.config-item {
	display: flex;
	margin-bottom: 8rpx;
}
.config-label {
	font-size: 24rpx;
	color: #666;
	min-width: 140rpx;
}
.config-value {
	font-size: 24rpx;
	color: #999;
	font-family: 'Courier New', monospace;
	word-break: break-all;
	flex: 1;
}
.config-value.active {
	color: #34c759;  /* 已选择状态 */
}
.service-list {
	margin-bottom: 16rpx;
}
.list-title {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 12rpx;
	display: block;
	font-weight: bold;
}
.service-scroll {
	width: 100%;
	white-space: nowrap;
}
.service-tag {
	display: inline-flex;
	align-items: center;
	padding: 12rpx 20rpx;
	background: #fff;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	margin-right: 16rpx;
	white-space: nowrap;
}
.service-tag.selected {
	border-color: #007aff;
	background: #e8f4ff;
}
.service-index {
	font-size: 24rpx;
	color: #007aff;
	font-weight: bold;
	margin-right: 12rpx;
}
.service-uuid {
	font-size: 22rpx;
	font-family: 'Courier New', monospace;
	color: #333;
	max-width: 300rpx;
	overflow: hidden;
	text-overflow: ellipsis;
}
.service-type {
	font-size: 20rpx;
	color: #fff;
	background: #34c759;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
	margin-left: 12rpx;
}

/* ========== 特征值列表 ========== */
.characteristic-list {
	margin-bottom: 16rpx;
}
.characteristic-scroll {
	max-height: 300rpx;
	background: #fff;
	border-radius: 8rpx;
}
.characteristic-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx;
	border-bottom: 1rpx solid #eee;
}
.characteristic-item:last-child {
	border-bottom: none;
}
.characteristic-item.selected {
	background: #e8f4ff;
}
.characteristic-item.writable {
	border-left: 4rpx solid #34c759;  /* 可写特征值左侧标记 */
}
.char-info {
	flex: 1;
}
.char-uuid {
	font-size: 24rpx;
	font-family: 'Courier New', monospace;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
	word-break: break-all;
}
.char-props {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
}
.prop-tag {
	font-size: 20rpx;
	padding: 4rpx 8rpx;
	background: #f0f0f0;
	border-radius: 4rpx;
	color: #666;
}
.select-btn {
	font-size: 24rpx;
	color: #007aff;
	padding: 8rpx 16rpx;
}
</style>
