<template>
	<view class="voice-control">
		<!-- 设备状态卡片 -->
		<view class="card">
			<view class="status-titletop">{{ title }}</view>
			<view style="padding:20rpx;">
				<u--form labelPosition="left" labelWidth="100"
					:labelStyle="{ marginRight: '16px', lineHeight: '32px', width: '50px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: '#000000' }">
					<view class="version-wrap">
						<u-form-item :label="$tt('status.deviceVersion')">
							<u-row>
								<u-col span="8">
									<u--text :text="'Version ' + device.firmwareVersion"></u--text>
								</u-col>
							</u-row>
						</u-form-item>
					</view>
				</u--form>
			</view>
		</view>
		<button @click="print()">测试打印</button>
		<!-- 基础信息 -->
		<view class="card basic-info">
			<view class="section-title">基础信息</view>
			<view class="info-content">
				<!-- 音量控制 -->
				<view class="volume-slider">
					<view class="volume-icon">
						<image src="https://iot-xcwl.cn/doc/photo/voice.svg" mode="aspectFit" class="volume-svg">
						</image>
					</view>
					<view class="slider-container">
						<u-slider v-model="volume" :min="0" :max="100" :step="1" @change="volumeChange"
							:disabled="device.status !== 3" height="4" activeColor="#2979ff" blockSize="18"
							:showValue="false">
						</u-slider>
						<view class="volume-marks">
							<text>0</text>
							<text>50</text>
							<text>100</text>
						</view>
					</view>
					<view class="volume-value">{{ volume }}%</view>
				</view>

				<!-- 音频开关 -->
				<view class="audio-switch">
					<text>音频开关</text>
					<u-switch v-model="audioEnabled" @change="audioSwitchChange" :disabled="device.status !== 3"
						size="22"></u-switch>
				</view>
			</view>
		</view>

		<!-- 音频列表 -->
		<view class="card audio-list">
			<view class="section-title">
				<text>音频列表</text>
				<image src="https://iot-xcwl.cn/doc/photo/add.svg" mode="aspectFit" class="add-icon"
					@click="showAddAudioModal"></image>
			</view>
			<view class="list-container">
				<view class="empty-tip" v-if="audioList.length === 0">
					<u-icon name="music" size="50" color="#c0c4cc"></u-icon>
					<text>暂无音频文件</text>
				</view>
				<view class="audio-item" v-for="(item, index) in audioList" :key="index">
					<view class="audio-info">
						<u-icon name="play-right" size="18" color="#2979ff"></u-icon>
						<text class="audio-name">{{ item.name }}</text>
					</view>
					<view class="audio-actions">
						<text class="audio-duration">{{ item.duration }}</text>
						<u-icon name="trash" size="18" color="#ff4d4f" @click="deleteAudio(index)"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 默认音频列表 -->
		<view class="card default-list">
			<view class="section-title">
				<text>默认列表</text>
				<image src="https://iot-xcwl.cn/doc/photo/add.svg" mode="aspectFit" class="add-icon"
					@click="showAddDefaultModal"></image>
			</view>
			<view class="list-container">
				<view class="empty-tip" v-if="defaultList.length === 0">
					<u-icon name="star" size="50" color="#c0c4cc"></u-icon>
					<text>暂无默认音频</text>
				</view>
				<view class="audio-item" v-for="(item, index) in defaultList" :key="index">
					<view class="audio-info">
						<u-icon name="star-fill" size="18" color="#ff9900"></u-icon>
						<text class="audio-name">{{ item.name }}</text>
					</view>
					<view class="audio-actions">
						<text class="audio-duration">{{ item.duration }}</text>
						<u-icon name="trash" size="18" color="#ff4d4f" @click="deleteDefault(index)"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 远程喊话 -->
		<view class="card remote-talk">
			<view class="section-title">远程喊话</view>
			<view class="talk-container">
				<view class="talk-tip">按住按钮开始录音，松开结束录音</view>
				<view class="talk-button" :class="{ recording: isRecording }" @touchstart="startRecording"
					@touchend="stopRecording" @touchcancel="cancelRecording">
					<u-icon :name="isRecording ? 'mic-filled' : 'mic'" size="28"
						:color="isRecording ? '#ff4d4f' : '#2979ff'"></u-icon>
					<text>{{ isRecording ? '录音中...' : '按住说话' }}</text>
				</view>
			</view>
		</view>

		<!-- 添加音频弹窗 -->
		<u-popup :show="showAddAudio" mode="center" @close="showAddAudio = false" round="8">
			<view class="add-audio-modal">
				<view class="modal-title">添加音频</view>
				<view class="modal-content">
					<u-form :model="newAudio" ref="audioForm">
						<u-form-item label="备注名" prop="name" borderBottom>
							<u-input v-model="newAudio.name" placeholder="请输入备注名"></u-input>
						</u-form-item>
						<u-form-item label="主持人" prop="per" borderBottom>
							<u-radio-group v-model="newAudio.per">
								<u-radio label="小美" name="0"></u-radio>
								<u-radio label="小宇" name="1"></u-radio>
								<u-radio label="逍遥" name="3"></u-radio>
								<u-radio label="丫丫" name="4"></u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="合成语速" prop="spd" borderBottom>
							<view class="slider-with-value">
								<u-slider v-model="newAudio.spd" :min="0" :max="15" :step="1" :showValue="true" class="custom-slider"></u-slider>
							</view>
						</u-form-item>
						<u-form-item label="合成音调" prop="pit" borderBottom>
							<view class="slider-with-value">
								<u-slider v-model="newAudio.pit" :min="0" :max="15" :step="1" :showValue="true" class="custom-slider"></u-slider>
							</view>
						</u-form-item>
						<u-form-item label="合成音量" prop="vol" borderBottom>
							<view class="slider-with-value">
								<u-slider v-model="newAudio.vol" :min="0" :max="15" :step="1" :showValue="true" class="custom-slider"></u-slider>
							</view>
						</u-form-item>
						<u-form-item label="合成文本" prop="text" borderBottom>
							<u-input v-model="newAudio.text" type="textarea" placeholder="请输入合成文本" height="100"></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view class="modal-footer">
					<u-button @click="showAddAudio = false" plain size="small">取消</u-button>
					<u-button type="primary" @click="confirmAddAudio" size="small">确定</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 添加默认音频弹窗 -->
		<u-popup :show="showAddDefault" mode="center" @close="showAddDefault = false" round="8">
			<view class="add-audio-modal">
				<view class="modal-title">添加默认音频</view>
				<view class="modal-content">
					<u-form :model="newDefault" ref="defaultForm">
						<u-form-item label="开始时间" prop="startTime" borderBottom>
							<picker mode="time" :value="newDefault.startTime" start="00:00" end="23:59"
								@change="startTimeChange">
								<view class="picker-value">{{ newDefault.startTime || '请选择开始时间' }}</view>
							</picker>

						</u-form-item>
						<u-form-item label="结束时间" prop="endTime" borderBottom>
							<picker mode="time" :value="newDefault.endTime" start="00:00" end="23:59"
								@change="endTimeChange">
								<view class="picker-value">{{ newDefault.endTime || '请选择结束时间' }}</view>
							</picker>
						</u-form-item>
						<u-form-item label="重复" prop="repeat" borderBottom>
							<view class="week-picker">
								<view class="week-item" v-for="(day, index) in weekDays" :key="index"
									:class="{ active: newDefault.repeatDays.includes(index) }"
									@click="toggleWeekDay(index)">
									{{ day }}
								</view>
							</view>
						</u-form-item>
						<u-form-item label="雷达开关" prop="radarEnabled" borderBottom>
							<u-switch v-model="newDefault.radarEnabled" @change="radarSwitchChange"></u-switch>
						</u-form-item>
						<template v-if="newDefault.radarEnabled">
							<u-form-item label="速度范围" prop="speedRange" borderBottom>
								<view class="speed-range">
									<u-input v-model="newDefault.minSpeed" type="number" placeholder="最小速度"></u-input>
									<text class="separator">-</text>
									<u-input v-model="newDefault.maxSpeed" type="number" placeholder="最大速度"></u-input>
									<text class="unit">km/h</text>
								</view>
							</u-form-item>
						</template>
						<u-form-item label="选择音频" prop="audioFile" borderBottom>
							<picker :range="audioList" range-key="name" :value="audioIndex" @change="audioChange">
								<view class="picker-value">{{ selectedAudioName || '请选择音频' }}</view>
							</picker>
						</u-form-item>
					</u-form>
				</view>
				<view class="modal-footer">
					<u-button @click="showAddDefault = false" plain size="small">取消</u-button>
					<u-button type="primary" @click="confirmAddDefault" size="small">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		serviceInvoke
	} from '@/apis/modules/runtime.js';

	export default {
		name: 'VoiceControl',
		props: {
			device: {
				type: Object,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: function(newVal, oldVal) {
				if (newVal.deviceName !== '') {
					this.deviceInfo = newVal;
					if (this.deviceInfo.deviceType != 3) {
						//分-属性和操作
						this.operateList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
								item) =>
							item.isReadonly == '0');
						this.attributeList = this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.filter((
								item) =>
							item.isReadonly == '1');
						//排序
						this.attributeList = this.attributeList.sort((a, b) => b.order - a.order);
						this.operateList = this.operateList.sort((a, b) => b.order - a.order);
					}
					this.updateDeviceStatus(this.deviceInfo);
					this.updateBasicSettings();

					console.log("wumoxing", JSON.stringify(this.deviceInfo.thingsModels))
				}
			}
		},
		data() {
			return {
				title: '设备离线',
				volume: 50,
				audioEnabled: true,
				isRecording: false,
				recorderManager: null,
				tempFilePath: '',
				showAddAudio: false,
				showAddDefault: false,
				showStartTimePicker: false,
				showEndTimePicker: false,
				showAudioPicker: false,
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				audioIndex: -1,
				newAudio: {
					name: '',
					per: '0',
					spd: '5',
					pit: '5',
					vol: '5',
					text: '',
					file: null
				},
				deviceInfo: {
					chartList: [],
				},
				newDefault: {
					startTime: '',
					endTime: '',
					repeatDays: [],
					radarEnabled: false,
					minSpeed: '',
					maxSpeed: '',
					audioFile: null
				},
				audioFiles: [],
				audioList: [{
						name: '欢迎语.mp3',
						duration: '00:15'
					},
					{
						name: '提示音.mp3',
						duration: '00:05'
					},
					{
						name: '背景音乐.mp3',
						duration: '03:45'
					}
				],
				defaultList: [{
						name: '默认欢迎语.mp3',
						duration: '00:10'
					},
					{
						name: '默认提示音.mp3',
						duration: '00:03'
					}
				]
			};
		},
		created() {
			if (this.device !== null && Object.keys(this.device).length !== 0) {
				this.deviceInfo = this.device;
				this.updateDeviceStatus(this.deviceInfo);
				// this.initChart();
				// console.log("deviceinfo", JSON.stringify(this.deviceInfo))
			};
			this.mqttCallback();
			this.recorderManager = uni.getRecorderManager();
			this.initRecorder();
			this.updateBasicSettings();
			// this.print();

		},
		methods: {
			print() {

				console.log("测试打印", JSON.stringify(this.deviceInfo.thingsModels))
			},
			checkOnline(callback, ...args) {
				if (this.device.status !== 3) {
					uni.showToast({
						title: '设备离线，无法操作',
						icon: 'none'
					});
					return false;
				}
				if (typeof callback === 'function') {
					return callback.apply(this, args);
				}
				return true;
			},
			async volumeChange(value) {
				if (!this.checkOnline()) return;
				try {
					const volumeModel = this.device.thingsModels.find(item => item.id === 'volume');
					if (volumeModel) {
						volumeModel.shadow = value.toString();
						await this.mqttPublish(this.device, volumeModel);
					}
				} catch (error) {
					console.error('调整音量失败:', error);
					uni.showToast({
						title: '操作失败: ' + error.message,
						icon: 'none'
					});
				}
			},
			/* Mqtt回调处理 */
			mqttCallback() {
				this.$mqttTool.client.on('message', (topic, message, buffer) => {
					let topics = topic.split('/');
					let productId = topics[1];
					let deviceNum = topics[2];
					message = JSON.parse(message.toString());
					if (topics[3] == 'status') {
						console.log('接收到【设备状态-运行】主题：', topic);
						console.log('接收到【设备状态-运行】内容：', message);
						// 更新列表中设备的状态
						if (this.deviceInfo.serialNumber == deviceNum) {
							this.deviceInfo.status = message.status;
							this.deviceInfo.isShadow = message.isShadow;
							this.deviceInfo.rssi = message.rssi;
							this.updateDeviceStatus(this.deviceInfo);
							this.updateBasicSettings();
							console.log("wumoxing", JSON.stringify(this.deviceInfo.thingsModels))
						}
					}
					//兼容设备回复
					if (topics[4] == 'reply') {
						uni.showToast({
							icon: 'none',
							title: message,
						})
					}
					if (topics[3] == 'property' || topics[3] == 'function' || topic.endsWith(
							'ws/service')) {
						console.log('接收到【物模型】主题：', topic);
						console.log('接收到【物模型】内容：', message);
						// 更新列表中设备的属性
						if (this.deviceInfo.serialNumber == deviceNum) {
							for (let j = 0; j < message.message.length; j++) {
								let isComplete = false;
								// 设备状态
								for (let k = 0; k < this.deviceInfo.thingsModels.length && !
									isComplete; k++) {
									if (this.deviceInfo.thingsModels[k].id == message.message[j].id) {
										// 普通类型
										this.deviceInfo.thingsModels[k].shadow = message.message[j].value;
										if (message.message[j].id === 'mp3_list') {
											console.log('收到mp3_list更新:', message.message[j].value);
										}
										isComplete = true;
										break;
									} else if (this.deviceInfo.thingsModels[k].datatype.type ==
										"object") {
										// 对象类型
										for (let n = 0; n < this.deviceInfo.thingsModels[k]
											.datatype.params
											.length; n++) {
											if (this.deviceInfo.thingsModels[k].datatype.params[n]
												.id == message.message[j]
												.id) {
												this.deviceInfo.thingsModels[k].datatype.params[n]
													.shadow =
													message.message[j].value;
												isComplete = true;
												break;
											}
										}
									} else if (this.deviceInfo.thingsModels[k].datatype.type ==
										"array") {
										// 数组类型
										if (this.deviceInfo.thingsModels[k].datatype.arrayType ==
											"object") {
											// 1.对象类型数组,id为数组中一个元素,例如：array_01_gateway_temperature
											if (String(message.message[j].id).indexOf("array_") == 0) {
												for (let n = 0; n < this.deviceInfo.thingsModels[k]
													.datatype
													.arrayParams.length; n++) {
													for (let m = 0; m < this.deviceInfo
														.thingsModels[k].datatype
														.arrayParams[n].length; m++) {
														if (this.deviceInfo.thingsModels[k]
															.datatype.arrayParams[n]
															[m].id == message.message[j].id) {
															this.deviceInfo.thingsModels[k]
																.datatype.arrayParams[n]
																[m].shadow = message.message[j].value;
															isComplete = true;
															break;
														}
													}
													if (isComplete) {
														break;
													}
												}
											} else {
												// 2.对象类型数组，例如：gateway_temperature,消息ID添加前缀后匹配
												for (let n = 0; n < this.deviceInfo.thingsModels[k]
													.datatype
													.arrayParams.length; n++) {
													for (let m = 0; m < this.deviceInfo
														.thingsModels[k].datatype
														.arrayParams[n].length; m++) {
														let index = n > 9 ? String(n) : '0' + k;
														let prefix = 'array_' + index + '_';
														if (this.deviceInfo.thingsModels[k]
															.datatype.arrayParams[n]
															[m].id == prefix + message.message[j].id) {
															this.deviceInfo.thingsModels[k]
																.datatype.arrayParams[n]
																[m].shadow = message.message[j].value;
															isComplete = true;
														}
													}
													if (isComplete) {
														break;
													}
												}
											}
										} else {
											// 整数、小数和字符串类型数组
											for (let n = 0; n < this.deviceInfo.thingsModels[k]
												.datatype.arrayModel
												.length; n++) {
												if (this.deviceInfo.thingsModels[k].datatype
													.arrayModel[n].id ==
													message.message[j].id) {
													this.deviceInfo.thingsModels[k].datatype
														.arrayModel[n].shadow =
														message.message[j].value;
													isComplete = true;
													break;
												}
											}
										}
									}
								};
								// 监测数据
								for (let k = 0; k < this.deviceInfo.chartList.length && !
									isComplete; k++) {
									if (this.deviceInfo.chartList[k].id.indexOf("array_") == 0) {
										// 数组类型匹配,例如：array_00_gateway_temperature
										if (this.deviceInfo.chartList[k].id == message.message[j].id) {
											// let shadows = message[j].value.split(",");
											this.deviceInfo.chartList[k].shadow = message.message[j].value;
											// 更新图表
											for (let m = 0; m < this.monitorChart.length; m++) {
												if (this.deviceInfo.chartList[k].id == this
													.monitorChart[m].id) {
													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
													let value = (Number(message.message[j].value) + Math
														.abs(this
															.deviceInfo.chartList[k].datatype
															.min)) / (Math.abs(
															this.deviceInfo.chartList[k]
															.datatype.min) + Math
														.abs(this.deviceInfo.chartList[k]
															.datatype.max));
													this.monitorChart[m].data.series[0].data =
														value;
													this.monitorChart[m].opts.title.name = message.message[
															j].value + ' ' +
														this.deviceInfo.chartList[k].datatype.unit;
													break;
												}
											}
											isComplete = true;
											break;
										}
									} else {
										// 普通类型匹配
										if (this.deviceInfo.chartList[k].id == message.message[j].id) {
											this.deviceInfo.chartList[k].shadow = message.message[j].value;
											// 更新图表
											for (let m = 0; m < this.monitorChart.length; m++) {
												if (this.deviceInfo.chartList[k].id == this
													.monitorChart[m].id) {
													// uchart中data取值范围0-1，需要最小数+监测值，然后除于区间值
													let value = (Number(message.message[j].value) + Math
														.abs(this
															.deviceInfo.chartList[k].datatype
															.min)) / (Math.abs(
															this.deviceInfo.chartList[k]
															.datatype.min) + Math
														.abs(this.deviceInfo.chartList[k]
															.datatype.max));
													this.monitorChart[m].data.series[0].data =
														value;
													this.monitorChart[m].opts.title.name = message.message[
															j].value + ' ' +
														this.deviceInfo.chartList[k].datatype.unit;
													break;
												}
											}
											isComplete = true;
											break;
										}
									}
									if (isComplete) {
										break;
									}
								};
							}
						}
						this.updateBasicSettings();
					}
				});
			},
			async mqttPublish(device, model) {
				const command = {};
				command[model.id] = model.shadow;
				const data = {
					serialNumber: device.serialNumber,
					productId: device.productId,
					remoteCommand: command,
					identifier: model.id,
					modelName: model.name,
					isShadow: device.status != 3,
					type: model.type
				};
				serviceInvoke(data).then(response => {
					if (response.code === 200) {
						uni.showToast({
							icon: 'none',
							title: this.$tt('status.service')
						});
					}
				});
			},
			updateDeviceStatus(device) {
				if (device.status === 3) {
					this.title = this.$tt('status.online');
				} else {
					this.title = device.isShadow === 1 ? this.$tt('status.shadow') : this.$tt('status.deviceOffline');
				}
			},
			initRecorder() {
				this.recorderManager.onStart(() => console.log('录音开始'));
				this.recorderManager.onStop(res => {
					console.log('录音结束', res);
					this.tempFilePath = res.tempFilePath;
					this.uploadAudio(res.tempFilePath);
				});
				this.recorderManager.onError(res => {
					console.error('录音错误', res);
					uni.showToast({
						title: '录音失败',
						icon: 'none'
					});
				});
			},
			startRecording() {
				if (!this.checkOnline()) return;
				this.isRecording = true;
				this.recorderManager.start({
					format: 'mp3',
					duration: 60000,
					sampleRate: 16000,
					numberOfChannels: 1,
					encodeBitRate: 48000,
					frameSize: 1
				});
			},
			stopRecording() {
				if (!this.isRecording) return;
				this.isRecording = false;
				this.recorderManager.stop();
			},
			cancelRecording() {
				if (!this.isRecording) return;
				this.isRecording = false;
				this.recorderManager.stop();
				uni.showToast({
					title: '已取消录音',
					icon: 'none'
				});
			},
			async uploadAudio(filePath) {
				try {
					uni.showLoading({
						title: '正在上传...'
					});
					const uploadRes = await uni.uploadFile({
						url: 'YOUR_UPLOAD_API_URL',
						filePath: filePath,
						name: 'file',
						formData: {
							deviceId: this.device.deviceId
						}
					});
					if (uploadRes.statusCode === 200) {
						const result = JSON.parse(uploadRes.data);
						const audioListModel = this.device.thingsModels.find(item => item.id === 'audio_list');
						if (audioListModel) {
							audioListModel.shadow = JSON.stringify({
								...JSON.parse(audioListModel.shadow || '{}'),
								files: [...(JSON.parse(audioListModel.shadow || '{}').files || []), {
									name: result.fileName,
									url: result.fileUrl,
									duration: result.duration
								}]
							});
							await this.mqttPublish(this.device, audioListModel);
						}
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});
					} else {
						throw new Error('上传失败');
					}
				} catch (error) {
					console.error('上传音频失败:', error);
					uni.showToast({
						title: '上传失败: ' + error.message,
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			showAddAudioModal() {
				this.showAddAudio = true;
			},
			showAddDefaultModal() {
				this.showAddDefault = true;
			},
			async confirmAddAudio() {
				if (!this.checkOnline()) return;
				
				try {
					// 获取当前的 mp3_list 模型
					const mp3ListModel = this.deviceInfo.thingsModels.find(model => model.id === 'mp3_list');
					if (!mp3ListModel) {
						throw new Error('未找到 mp3_list 模型');
					}

					// 解析当前的 mp3_list 数据
					const jsonStr = mp3ListModel.shadow.replace('JSON=', '');
					const data = JSON.parse(jsonStr);
					
					// 获取当前最大的 id
					let maxId = 0;
					if (data.sound_card && data.sound_card.mp3_list) {
						data.sound_card.mp3_list.forEach(item => {
							const id = parseInt(item.split('_')[0]);
							if (!isNaN(id) && id > maxId) {
								maxId = id;
							}
						});
					}
					
					// 生成新的 id
					const newId = maxId + 1;
					
					// 构建 TTS 请求数据
					const ttsData = {
						JSON_id: 1,
						sound_card: {
							TTS: {
								per: parseInt(this.newAudio.per),
								spd: parseInt(this.newAudio.spd),
								pit: parseInt(this.newAudio.pit),
								vol: parseInt(this.newAudio.vol),
								tex_utf8: this.newAudio.text,
								filename: `${newId}_${this.newAudio.name}`
							}
						}
					};

					// 更新 shadow 值并发送
					mp3ListModel.shadow = 'JSON=' + JSON.stringify(ttsData);
					await this.mqttPublish(this.device, mp3ListModel);

					// 重置表单
					this.newAudio = {
						name: '',
						per: '0',
						spd: '5',
						pit: '5',
						vol: '5',
						text: '',
						file: null
					};

					// 关闭弹窗
					this.showAddAudio = false;

					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('添加音频失败:', error);
					uni.showToast({
						title: '添加失败: ' + error.message,
						icon: 'none'
					});
				}
			},
			confirmAddDefault() {
				if (!this.checkOnline()) return;
				uni.showToast({
					title: '默认音频添加成功',
					icon: 'success'
				});
				this.showAddDefault = false;
			},
			async deleteAudio(index) {
				if (!this.checkOnline()) return;
				
				try {
					uni.showModal({
						title: '提示',
						content: '确定要删除该音频吗？',
						cancelText: '取消',
						confirmText: '确定',
						success: async (res) => {
							if (res.confirm) {
								// 获取当前的 mp3_list 模型
								const mp3ListModel = this.deviceInfo.thingsModels.find(model => model.id === 'mp3_list');
								if (mp3ListModel && mp3ListModel.shadow) {
									try {
										// 解析当前的 JSON 数据
										const jsonStr = mp3ListModel.shadow.replace('JSON=', '');
										const data = JSON.parse(jsonStr);
										
										// 从音频列表中删除指定索引的项
										if (data.sound_card && data.sound_card.mp3_list) {
											data.sound_card.mp3_list.splice(index, 1);
											
											// 更新 shadow 值
											mp3ListModel.shadow = 'JSON=' + JSON.stringify(data);
											
											// 发送更新到设备
											await this.mqttPublish(this.device, mp3ListModel);
											
											// 更新本地音频列表
											this.audioList.splice(index, 1);
											
											uni.showToast({
												title: '删除成功',
												icon: 'success'
											});
										}
									} catch (error) {
										console.error('删除音频失败:', error);
										uni.showToast({
											title: '删除失败: ' + error.message,
											icon: 'none'
										});
									}
								}
							}
						}
					});
				} catch (error) {
					console.error('删除音频失败:', error);
					uni.showToast({
						title: '删除失败: ' + error.message,
						icon: 'none'
					});
				}
			},
			deleteDefault(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该默认音频吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: (res) => {
						if (res.confirm) {
							this.defaultList.splice(index, 1);
						}
					}
				});
			},
			afterAudioRead(file) {
				this.audioFiles.push(file);
			},
			deleteAudioFile(index) {
				this.audioFiles.splice(index, 1);
			},
			beforeAudioUpload(file) {
				const isValidType = file.name.toLowerCase().endsWith('.mp3');
				const isValidSize = file.size / 1024 / 1024 < 10;

				if (!isValidType) {
					uni.showToast({
						title: '只能上传MP3格式',
						icon: 'none'
					});
					return false;
				}
				if (!isValidSize) {
					uni.showToast({
						title: '文件大小不能超过10MB',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			async audioSwitchChange() {
				if (!this.checkOnline()) return;
				try {
					const playEnModel = this.device.thingsModels.find(item => item.id === 'play_en');
					if (playEnModel) {
						playEnModel.shadow = this.audioEnabled ? '1' : '0';
						await this.mqttPublish(this.device, playEnModel);
					}
				} catch (error) {
					console.error('切换音频开关失败:', error);
					uni.showToast({
						title: '操作失败: ' + error.message,
						icon: 'none'
					});
				}
			},
			formatTime(timestamp) {
				const date = new Date(timestamp);
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},
			startTimeChange(e) {
				this.newDefault.startTime = e.detail.value;
			},
			endTimeChange(e) {
				this.newDefault.endTime = e.detail.value;
			},
			toggleWeekDay(index) {
				const position = this.newDefault.repeatDays.indexOf(index);
				if (position === -1) {
					this.newDefault.repeatDays.push(index);
				} else {
					this.newDefault.repeatDays.splice(position, 1);
				}
			},
			radarSwitchChange(value) {
				this.newDefault.radarEnabled = value;
				if (!value) {
					this.newDefault.minSpeed = '';
					this.newDefault.maxSpeed = '';
				}
			},
			audioChange(e) {
				this.audioIndex = e.detail.value;
				this.newDefault.audioFile = this.audioList[this.audioIndex];
			},
			updateBasicSettings() {
				if (!this.deviceInfo.thingsModels) return;

				// 更新音频开关状态
				const playEnModel = this.deviceInfo.thingsModels.find(model => model.id === 'play_en');
				if (playEnModel) {
					this.audioEnabled = playEnModel.shadow === '1';
				}

				// 更新音量设置
				const volumeModel = this.deviceInfo.thingsModels.find(model => model.id === 'volume');
				if (volumeModel) {
					this.volume = parseInt(volumeModel.shadow) || 50;
				}

				// 更新音频列表
				const mp3ListModel = this.deviceInfo.thingsModels.find(model => model.id === 'mp3_list');
				console.log('mp3ListModel:', mp3ListModel);
				
				if (mp3ListModel && mp3ListModel.shadow) {
					try {
						// 解析 JSON 字符串
						const jsonStr = mp3ListModel.shadow.replace('JSON=', '');
						console.log('jsonStr:', jsonStr);
						
						const data = JSON.parse(jsonStr);
						console.log('parsed data:', data);

						// 获取 mp3_list 数组
						if (data.sound_card && data.sound_card.mp3_list) {
							console.log('mp3_list:', data.sound_card.mp3_list);
							
							// 更新音频列表
							this.audioList = data.sound_card.mp3_list.map((item, index) => {
								// 从 "1_def" 格式中提取名称
								const name = item.split('_')[1] || item;
								console.log('item:', item, 'name:', name);
								return {
									id: index + 1,
									name: name
								};
							});
							console.log('updated audioList:', this.audioList);
						} else {
							console.log('no mp3_list found in data');
						}
					} catch (error) {
						console.error('解析音频列表失败:', error);
						console.error('原始数据:', mp3ListModel.shadow);
					}
				} else {
					console.log('no mp3ListModel or shadow is empty');
				}
			}
		},
		computed: {
			startTimeLabel() {
				return this.newDefault.startTime ? this.formatTime(this.newDefault.startTime) : '请选择开始时间';
			},
			endTimeLabel() {
				return this.newDefault.endTime ? this.formatTime(this.newDefault.endTime) : '请选择结束时间';
			},
			selectedAudioName() {
				return this.audioIndex >= 0 ? this.audioList[this.audioIndex].name : '';
			}
		}
	};
</script>

<style lang="scss" scoped>
	// @import "@/uni_modules/uview-ui/scss/index.scss";

	.voice-control {
		padding: 20rpx;
		background-color: #f7f8fa;
		min-height: 100vh;

		.card {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			overflow: hidden;
		}

		.status-titletop {
			font-weight: bold;
			font-size: 15px;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			padding: 15rpx 28rpx;
			background-color: #eef6ff;
			border-bottom: 1rpx solid #dceaff;
		}

		.version-wrap {
			background-color: #F7F7F7;
			border-radius: 10rpx;
			padding: 0 42rpx;
			font-size: 24rpx;
			color: #000000;
			line-height: 42rpx;
		}

		.section-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			padding: 24rpx;
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			align-items: center;

			.add-icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}
		}

		.info-content {
			padding: 16rpx 24rpx 24rpx;
		}

		.volume-slider {
			display: flex;
			align-items: center;
			gap: 16rpx;
			margin-bottom: 20rpx;
			padding: 16rpx 0;
			background-color: #f9f9f9;
			border-radius: 16rpx;

			.volume-icon {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.volume-svg {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.slider-container {
				flex: 1;
				position: relative;

				.volume-marks {
					display: flex;
					justify-content: space-between;
					margin-top: 8rpx;
					padding: 0 8rpx;

					text {
						font-size: 22rpx;
						color: #999;
					}
				}
			}

			.volume-value {
				min-width: 72rpx;
				text-align: right;
				color: #2979ff;
				font-size: 26rpx;
				font-weight: 500;
			}
		}

		.audio-switch {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 0;

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

		.audio-list,
		.default-list {
			.list-container {
				padding: 0 24rpx 16rpx;
			}

			.empty-tip {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 60rpx 0;
				color: #c0c4cc;
				font-size: 28rpx;
				gap: 20rpx;
				opacity: 0.8;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
					opacity: 0.6;
				}
			}

			.audio-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.audio-info {
					display: flex;
					align-items: center;
					gap: 16rpx;
					flex: 1;
					overflow: hidden;

					.audio-name {
						font-size: 26rpx;
						color: #333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.audio-actions {
					display: flex;
					align-items: center;
					gap: 24rpx;
					margin-left: 16rpx;

					.audio-duration {
						font-size: 24rpx;
						color: #999;
						min-width: 72rpx;
						text-align: right;
					}
				}
			}
		}

		.remote-talk {
			.talk-container {
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20rpx;

				.talk-tip {
					font-size: 26rpx;
					color: #999;
					text-align: center;
				}

				.talk-button {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					background-color: #f0f6ff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 10rpx;
					transition: all 0.3s ease;

					&.recording {
						background-color: #fff1f0;
						transform: scale(1.05);
					}

					text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.add-audio-modal {
			width: 80vw;
			max-width: 600rpx;
			padding: 0;
			border-radius: 16rpx;
			background-color: #fff;
			overflow: hidden;

			.modal-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				padding: 28rpx 28rpx 20rpx;
				text-align: center;
				border-bottom: 1rpx solid #f5f5f5;
			}

			.modal-content {
				padding: 0 28rpx;
				margin: 20rpx 0;
				max-height: 60vh;
				overflow-y: auto;

				.u-form-item {
					padding: 20rpx 0;

					:deep(.u-form-item__body) {
						padding: 0;
					}

					:deep(.u-form-item__body__left) {
						width: 160rpx;
					}

					:deep(.u-form-item__body__right) {
						flex: 1;
					}
				}

				.slider-with-value {
					display: flex;
					align-items: center;
					width: 100%;
					
					.custom-slider {
						flex: 1;
						margin-right: 20rpx;
					}
				}
				
				:deep(.u-radio-group) {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
				}
			}

			.modal-footer {
				display: flex;
				justify-content: space-between;
				padding: 16rpx 28rpx 28rpx;
				border-top: 1rpx solid #f5f5f5;

				.u-button {
					width: 48%;
					height: 72rpx;
					font-size: 26rpx;
					border-radius: 40rpx;
				}
			}
		}

		.week-picker {
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;
			padding: 10rpx 0;

			.week-item {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 30rpx;
				background-color: #f5f5f5;
				font-size: 24rpx;
				color: #666;
				transition: all 0.3s ease;

				&.active {
					background-color: #2979ff;
					color: #fff;
				}
			}
		}

		.speed-range {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.u-input {
				flex: 1;
			}

			.separator {
				color: #666;
				padding: 0 10rpx;
			}

			.unit {
				color: #666;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}

		.picker-value {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #333;
			padding: 0 20rpx;
			background-color: #f9f9f9;
			border-radius: 8rpx;
		}
	}
</style>