<template>
	<view class="page">
		<u-navbar title="语音详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>

		<!-- <scroll-view class="detail-container" scroll-y v-if="!isEdit">
			<view class="detail-section">
				<view class="detail-item">
					<view class="detail-label">语音编号</view>
					<view class="detail-value">{{ voiceDetail.no || '-' }}</view>
				</view>
				<view class="detail-item">
					<view class="detail-label">运营区</view>
					<view class="detail-value">{{ voiceDetail.areaName || '-' }}</view>
				</view>
				<view class="detail-item" v-if="voiceDetail.remark">
					<view class="detail-label">备注</view>
					<view class="detail-value">{{ voiceDetail.remark }}</view>
				</view>
				<view class="detail-item" v-if="voiceDetail.fileUrl">
					<view class="detail-label">语音文件</view>
					<view class="detail-value file-url" @click="playAudio">
						<u-icon name="play-circle" color="#3996FD" size="32"></u-icon>
						<text>点击播放</text>
					</view>
				</view>
			</view>

			<view class="action-section">
				<view class="action-btn edit-btn" @click="toEdit">
					修改
				</view>
				<view class="action-btn delete-btn" @click="deleteVoice">
					删除
				</view>
			</view>
		</scroll-view> -->

		<!-- 编辑表单：与新增页一致，无语音名称/运营区，编号弹窗+语音预览 -->
		<scroll-view class="form-container" scroll-y>
			<view class="form-card">
				<view class="form-item">
					<view class="form-label">
						<text class="label-text">语音文件</text>
						<text class="required">*</text>
					</view>
					<view hover-class="app-tap-hover" class="upload-box" @click="!editForm.fileUrl && uploadFile()">
						<view v-if="!editForm.fileUrl" class="upload-placeholder">
							<u-icon name="plus-circle" color="#3996FD" size="64"></u-icon>
							<text class="upload-tip">点击上传MP3文件</text>
						</view>
						<view v-else class="audio-bar">
							<view hover-class="app-tap-hover" class="audio-remove" @click.stop="removeFile">
								<u-icon name="close-circle-fill" color="#ff4444" size="36"></u-icon>
							</view>
							<view hover-class="app-tap-hover" class="audio-play-btn" @click="togglePreviewPlay">
								<u-icon 
									:name="previewPlaying ? 'pause-circle-fill' : 'play-circle-fill'" 
									:color="previewPlaying ? '#64B6A7' : '#3996FD'" 
									size="52"
								></u-icon>
							</view>
							<view class="audio-progress-wrap">
								<slider 
									class="audio-slider"
									:value="previewProgress" 
									:min="0" 
									:max="100" 
									:step="0.1"
									activeColor="#3996FD"
									backgroundColor="#E5E7EB"
									@change="onPreviewSeek"
									@changing="onPreviewSeekChanging"
								/>
								<view class="audio-time">
									<text>{{ formatTime(previewCurrentTime) }}</text>
									<text>/ {{ formatTime(previewDuration) }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="form-tip">仅支持MP3格式文件</view>
				</view>
			</view>

			<view class="form-card">
				<view class="form-item">
					<view class="form-label">
						<text class="label-text">语音编号</text>
						<text class="required">*</text>
					</view>
					<view hover-class="app-tap-hover" class="picker-box" @click="openNoPicker">
						<text :class="['picker-text', editForm.no ? '' : 'placeholder']">
							{{ editForm.no || '请选择语音编号(11-40)' }}
						</text>
						<u-icon name="arrow-right" color="#C0C4CC" size="20"></u-icon>
					</view>
				</view>
			</view>

			<view class="form-card">
				<view class="form-item">
					<view class="form-label">
						<text class="label-text">备注</text>
						<text class="label-tip">（可选）</text>
					</view>
					<textarea 
						class="form-textarea" 
						v-model="editForm.remark" 
						placeholder="请输入备注信息" 
						maxlength="200"
						:auto-height="true"
					></textarea>
				</view>
			</view>

			<view class="form-actions">
				<view hover-class="app-tap-hover" class="form-btn cancel-btn" style="background: red;color: #fff;" @click="deleteVoice">删除</view>
				<view hover-class="app-tap-hover" class="form-btn submit-btn" @click="submitEdit">保存</view>
			</view>
		</scroll-view>

		<!-- 语音编号选择弹窗：与新增页一致 -->
		<view hover-class="app-tap-hover" class="no-picker-mask" v-if="showNoPicker" @click="closeNoPicker"></view>
		<view hover-class="app-tap-hover" class="no-picker-modal" v-if="showNoPicker" @click.stop="">
			<view class="no-picker-title">选择语音编号</view>
			<scroll-view class="no-picker-list" scroll-y>
				<view hover-class="app-tap-hover" 
					class="no-picker-item" 
					:class="{ active: editForm.no === item.label, disabled: isNoConfigured(item.label) }"
					v-for="(item, idx) in noOptions" 
					:key="idx"
					@click="selectNo(idx)"
				>
					<text>{{ item.label }}</text>
					<view class="no-picker-right">
						<text class="configured-tag" v-if="isNoConfigured(item.label)">已配置</text>
						<u-icon v-else-if="editForm.no === item.label" name="checkmark" color="#3996FD" size="20"></u-icon>
					</view>
				</view>
			</scroll-view>
			<view hover-class="app-tap-hover" class="no-picker-cancel" @click="closeNoPicker">取消</view>
		</view>
		<qiniu-upload-progress />
	</view>
</template>

<script>
	import { showQiniuUploadProgress, hideQiniuUploadProgress } from '@/common/qiniuUploadProgress.js'

	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				voiceId: '',
				voiceDetail: {},
				isEdit: false,
				noOptions: [],
				noIndex: -1,
				editForm: {
					fileUrl: '',
					no: '',
					areaId: '',
					remark: ''
				},
				fileName: '',
				token: '',
				upurl: '',
				showNoPicker: false,
				configuredNoSet: {},
				previewAudio: null,
				previewPlaying: false,
				previewProgress: 0,
				previewCurrentTime: 0,
				previewDuration: 0,
				previewSeekChanging: false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.voiceId = options.id
				this.initNoOptions()
				this.getQiniuToken()
				this.getDetail()
			}
		},
		onUnload() {
			this.destroyPreviewAudio()
		},
		methods: {
			// 初始化编号选项
			initNoOptions() {
				for (let i = 11; i <= 40; i++) {
					this.noOptions.push({
						value: i,
						label: i.toString()
					})
				}
			},
			// 获取详情
			getDetail() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$u.get(`/bst/voice/${this.voiceId}`).then((res) => {
					if (res.code == 200) {
						this.voiceDetail = res.data || {}
						this.editForm = {
							fileUrl: this.voiceDetail.fileUrl || '',
							no: this.voiceDetail.no != null ? this.voiceDetail.no.toString() : '',
							areaId: this.voiceDetail.areaId || '',
							remark: this.voiceDetail.remark || ''
						}
						this.fileName = this.voiceDetail.fileUrl ? 'audio.mp3' : ''
						const noIdx = this.noOptions.findIndex(item => item.label === this.editForm.no)
						if (noIdx >= 0) this.noIndex = noIdx
						this.loadConfiguredNos()
					} else {
						uni.showToast({
							title: res.msg || '获取详情失败',
							icon: 'none',
							duration: 2000
						})
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 拉取当前运营区已配置编号，编辑时排除当前语音的 no
			loadConfiguredNos() {
				const areaId = this.voiceDetail.areaId || this.editForm.areaId
				if (!areaId) return
				this.$u.get('/bst/voice/list?areaId=' + areaId).then(res => {
					if (res.code != 200) return
					const rows = Array.isArray(res.data) ? res.data : (res.rows || [])
					const set = {}
					rows.forEach(item => {
						if (item && item.id == this.voiceId) return
						const no = item && (item.no != null ? String(item.no) : '')
						if (no) set[no] = true
					})
					this.configuredNoSet = set
					this.$forceUpdate()
				}).catch(() => {})
			},
			isNoConfigured(label) {
				return !!(this.configuredNoSet && this.configuredNoSet[String(label)])
			},
			openNoPicker() {
				if (this.voiceDetail.areaId && (!this.configuredNoSet || Object.keys(this.configuredNoSet).length === 0)) {
					this.loadConfiguredNos()
				}
				this.showNoPicker = true
			},
			closeNoPicker() {
				this.showNoPicker = false
			},
			selectNo(index) {
				const item = this.noOptions[index]
				if (item && this.isNoConfigured(item.label)) {
					uni.showToast({ title: '该编号已配置', icon: 'none' })
					return
				}
				this.noIndex = index
				this.editForm.no = this.noOptions[index].label
				this.showNoPicker = false
			},
			// 获取七牛云token
			getQiniuToken() {
				this.$u.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.token = res.data
						this.upurl = res.domain
					}
				})
			},
			// 播放音频
			playAudio() {
				if (this.voiceDetail.fileUrl) {
					// #ifdef H5
					const audio = new Audio(this.voiceDetail.fileUrl)
					audio.play()
					// #endif
					// #ifndef H5
					uni.downloadFile({
						url: this.voiceDetail.fileUrl,
						success: (res) => {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: () => {
									console.log('打开文档成功')
								}
							})
						}
					})
					// #endif
				}
			},
			// 进入编辑模式
			toEdit() {
				this.isEdit = true
				this.$nextTick(() => {
					if (this.editForm.fileUrl) this.preloadPreviewDuration()
				})
			},
			// 取消编辑
			cancelEdit() {
				this.destroyPreviewAudio()
				this.isEdit = false
				this.getDetail()
			},
			// 上传文件
			uploadFile() {
				// #ifdef H5
				if (!this.token) {
					uni.showToast({
						title: '上传token获取失败，请重试',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// H5使用input选择文件
				const input = document.createElement('input')
				input.type = 'file'
				input.accept = 'audio/mp3,audio/mpeg'
				input.onchange = (e) => {
					const file = e.target.files[0]
					if (file) {
						if (!file.name.toLowerCase().endsWith('.mp3')) {
							uni.showToast({
								title: '仅支持MP3格式文件',
								icon: 'none',
								duration: 2000
							})
							return
						}
						this.uploadToQiniu(file)
					}
				}
				input.click()
				// #endif
				
				// #ifdef MP-WEIXIN
				// 微信小程序使用wx.chooseMessageFile选择文件
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						const file = res.tempFiles[0]
						if (file) {
							// 检查文件类型
							if (!file.name.toLowerCase().endsWith('.mp3')) {
								uni.showToast({
									title: '仅支持MP3格式文件',
									icon: 'none',
									duration: 2000
								})
								return
							}
							this.uploadToQiniu(file.path)
						}
					},
					fail: (err) => {
						console.log('选择文件失败', err)
						uni.showToast({
							title: '选择文件失败，请从聊天中选择文件',
							icon: 'none',
							duration: 2000
						})
					}
				})
				// #endif
				
				// #ifndef H5 || MP-WEIXIN
				// 其他平台（如APP）使用uni.chooseFile
				// #ifdef APP-PLUS
				uni.chooseFile({
					count: 1,
					type: 'file',
					extension: ['.mp3'],
					success: (res) => {
						const file = res.tempFiles[0]
						if (file) {
							this.uploadToQiniu(file.path)
						}
					},
					fail: (err) => {
						console.log('选择文件失败', err)
						uni.showToast({
							title: '选择文件失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
				// #endif
				// #endif
			},
			// 上传到七牛云
			uploadToQiniu(filePath) {
				let _this = this
				let math = 'static/' + _this.$u.guid(20) + '.mp3'
				let key = 'bike/audio/' + math

				// #ifdef H5
				const reader = new FileReader()
				reader.onload = (e) => {
					showQiniuUploadProgress('上传语音')
					const blob = e.target.result
					const formData = new FormData()
					formData.append('file', blob)
					formData.append('token', _this.token)
					formData.append('key', key)

					fetch('https://up-z2.qiniup.com', {
						method: 'POST',
						body: formData
					}).then(res => res.json()).then(data => {
						if (!data || !data.key) {
							throw new Error('upload failed')
						}
						hideQiniuUploadProgress()
						_this.destroyPreviewAudio()
						_this.editForm.fileUrl = _this.upurl + '/' + data.key
						_this.fileName = filePath.name || 'audio.mp3'
						_this.preloadPreviewDuration()
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 2000
						})
					}).catch(err => {
						hideQiniuUploadProgress()
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 2000
						})
					})
				}
				reader.readAsArrayBuffer(filePath)
				// #endif

				// #ifndef H5
				;(async () => {
					try {
						const url = await _this.$uploadQiniuFile({
							filePath,
							key,
							title: '上传语音',
							showProgress: true
						})
						_this.destroyPreviewAudio()
						_this.editForm.fileUrl = url
						_this.fileName = 'audio.mp3'
						_this.preloadPreviewDuration()
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 2000
						})
					} catch (e) {
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 2000
						})
					}
				})()
				// #endif
			},
			// 移除文件
			removeFile() {
				this.destroyPreviewAudio()
				this.editForm.fileUrl = ''
				this.fileName = ''
			},
			togglePreviewPlay() {
				if (!this.editForm.fileUrl) return
				if (this.previewPlaying) this.pausePreview()
				else this.playPreview()
			},
			playPreview() {
				if (!this.editForm.fileUrl) return
				if (this.previewAudio) {
					this.previewAudio.play()
					this.previewPlaying = true
					return
				}
				const ctx = uni.createInnerAudioContext()
				ctx.src = this.editForm.fileUrl
				ctx.autoplay = false
				ctx.onTimeUpdate(() => {
					if (this.previewSeekChanging) return
					this.previewCurrentTime = ctx.currentTime
					this.previewDuration = ctx.duration || 0
					if (ctx.duration > 0) this.previewProgress = (ctx.currentTime / ctx.duration) * 100
				})
				ctx.onEnded(() => {
					this.previewPlaying = false
					this.previewProgress = 0
					this.previewCurrentTime = 0
				})
				ctx.onError(() => {
					this.previewPlaying = false
					uni.showToast({ title: '播放失败', icon: 'none' })
				})
				ctx.onCanplay(() => {
					if (ctx.duration > 0) this.previewDuration = ctx.duration
				})
				ctx.play()
				this.previewAudio = ctx
				this.previewPlaying = true
			},
			pausePreview() {
				if (this.previewAudio) {
					this.previewAudio.pause()
					this.previewPlaying = false
				}
			},
			onPreviewSeekChanging() {
				this.previewSeekChanging = true
			},
			onPreviewSeek(e) {
				const p = Number(e.detail.value) || 0
				this.previewSeekChanging = false
				if (!this.previewAudio || !this.editForm.fileUrl) return
				const duration = this.previewAudio.duration || this.previewDuration
				if (duration <= 0) return
				const seekTo = (p / 100) * duration
				if (typeof this.previewAudio.seek === 'function') this.previewAudio.seek(seekTo)
				this.previewCurrentTime = seekTo
				this.previewProgress = p
			},
			formatTime(seconds) {
				if (seconds == null || isNaN(seconds) || seconds < 0) return '00:00'
				const s = Math.floor(seconds)
				const m = Math.floor(s / 60)
				const sec = s % 60
				return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
			},
			destroyPreviewAudio() {
				if (this.previewAudio) {
					this.previewAudio.stop()
					this.previewAudio.destroy()
					this.previewAudio = null
				}
				this.previewPlaying = false
				this.previewProgress = 0
				this.previewCurrentTime = 0
				this.previewDuration = 0
			},
			// 与语音列表 index 预加载时长一致：只创建上下文设 src，不 play，在 onCanplay/onTimeUpdate 取 duration
			preloadPreviewDuration() {
				if (!this.editForm.fileUrl) return
				const audioContext = uni.createInnerAudioContext()
				audioContext.src = this.editForm.fileUrl
				audioContext.autoplay = false
				let hasGotDuration = false
				const trySetDuration = () => {
					if (hasGotDuration) return
					if (audioContext.duration > 0) {
						hasGotDuration = true
						this.previewDuration = audioContext.duration
						this.$forceUpdate()
						setTimeout(() => {
							try { audioContext.destroy() } catch (e) {}
						}, 100)
					}
				}
				audioContext.onCanplay(trySetDuration)
				audioContext.onTimeUpdate(trySetDuration)
				audioContext.onError(() => {
					try { audioContext.destroy() } catch (e) {}
				})
				setTimeout(() => {
					if (!hasGotDuration) {
						try { audioContext.destroy() } catch (e) {}
					}
				}, 3000)
			},
			// 提交修改
			submitEdit() {
				if (!this.editForm.fileUrl) {
					uni.showToast({ title: '请上传语音文件', icon: 'none', duration: 2000 })
					return
				}
				if (!this.editForm.no) {
					uni.showToast({ title: '请选择语音编号', icon: 'none', duration: 2000 })
					return
				}
				const areaId = this.editForm.areaId || this.voiceDetail.areaId
				if (!areaId) {
					uni.showToast({ title: '未获取到运营区信息', icon: 'none', duration: 2000 })
					return
				}
				const data = {
					id: this.voiceId,
					fileUrl: this.editForm.fileUrl,
					no: parseInt(this.editForm.no),
					areaId: areaId,
					remark: this.editForm.remark || ''
				}
				
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				
				this.$u.post('/bst/voice', data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success',
							duration: 3000
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					} else {
						uni.showToast({
							title: res.msg || '修改失败',
							icon: 'none',
							duration: 5000
						})
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 删除语音
			deleteVoice() {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条语音吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							this.$u.delete(`/bst/voice/${this.voiceId}`).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								} else {
									uni.showToast({
										title: res.msg || '删除失败',
										icon: 'none',
										duration: 2000
									})
								}
							}).finally(() => {
								uni.hideLoading()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.page {
		width: 100%;
		min-height: 100vh;
		padding: 20rpx;
	}

	.detail-container {
		height: 100vh;
	}

	.detail-section {
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 28rpx;
			bottom: 28rpx;
			width: 6rpx;
			border-radius: 3rpx;
		}
	}

	.detail-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
	}

	.detail-label {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 12rpx;
	}

	.detail-value {
		font-size: 30rpx;
		color: #262B37;
		font-weight: 500;
	}

	.file-url {
		display: flex;
		align-items: center;
		gap: 12rpx;
		color: #3996FD;
	}

	.action-section {
		display: flex;
		gap: 20rpx;
		padding: 20rpx 0;
	}

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 600;
	}

	.edit-btn {
		background: linear-gradient(135deg, #3996FD 0%, #64B6A7 100%);
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(57, 150, 253, 0.25);
	}

	.delete-btn {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.2);
	}

	.form-container {
		height: 100vh;
		padding-bottom: 40rpx;
	}

	.form-card {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.form-item {
		.form-label {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			padding-left: 8rpx;
			.label-text { font-size: 30rpx; color: #333; font-weight: 600; }
			.required { color: #FF4444; margin-left: 8rpx; font-size: 28rpx; }
			.label-tip { font-size: 24rpx; color: #909399; margin-left: 8rpx; font-weight: 400; }
		}
	}

	.upload-box {
		width: 100%;
		min-height: 200rpx;
		background: #F5F7FA;
		border: 3rpx dashed #D3D4D6;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		padding: 40rpx;
		.upload-tip { font-size: 28rpx; color: #666; font-weight: 500; }
	}
	.audio-bar {
		width: 100%;
		display: flex;
		align-items: flex-end;
		gap: 20rpx;
		padding: 28rpx 24rpx;
	}
	.audio-remove, .audio-play-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
	.audio-play-btn { width: 52rpx; height: 52rpx; margin-right: 50rpx; }
	.audio-progress-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
	.audio-slider { width: 100%; margin: 0; }
	.audio-time { font-size: 22rpx; color: #909399; margin-top: 6rpx; margin-left: 50rpx; }

	.picker-box {
		width: 100%;
		height: 96rpx;
		background: #F5F7FA;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		.picker-text { font-size: 30rpx; color: #333; font-weight: 500; &.placeholder { color: #C0C4CC; } }
	}

	.form-tip {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #909399;
		padding-left: 8rpx;
	}

	.form-textarea {
		width: 100%;
		min-height: 160rpx;
		padding: 24rpx;
		background: #F5F7FA;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}

	.form-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.form-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 600;
	}

	.cancel-btn {
		background: #f0f0f0;
		color: #666;
	}

	.submit-btn {
		background: linear-gradient(135deg, #3996FD 0%, #64B6A7 100%);
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(57, 150, 253, 0.25);
	}

	.no-picker-mask {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9998;
	}
	.no-picker-modal {
		position: fixed;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		width: 560rpx;
		max-height: 70vh;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		z-index: 9999;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
	}
	.no-picker-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #262B37;
		padding: 32rpx;
	}
	.no-picker-list { max-height: 480rpx; }
	.no-picker-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 32rpx;
		font-size: 30rpx;
		color: #333;
		border-top: 1px solid #f3f1f1;
		&.active { color: #3996FD; font-weight: 600; background: #EFF6FF; }
		&.disabled { color: #B0B0B0; background: #F7F7F7; }
	}
	.no-picker-right { display: flex; align-items: center; }
	.configured-tag {
		font-size: 22rpx;
		color: #999;
		padding: 6rpx 12rpx;
		background: #EFEFEF;
		border-radius: 999rpx;
	}
	.no-picker-cancel {
		text-align: center;
		font-size: 30rpx;
		color: #999;
		padding: 24rpx;
		border-top: 1rpx solid #f0f0f0;
	}
</style>