MoeNovaClient/pages/makedetail/intelligentMusicProduction.vue

<template>
	<view class="dialog-generation">
		<view class="subject-matter-ofText" :style="{ paddingBottom: keyboardHeight + 'px' }">
			<!-- 顶部导航栏 -->
			<div class="navbar">
				<view class="navbar-left">
					<image @click="goBack()" class="back" src="../../static/vip/hy_icon_jiantou.png"></image>
					<view class="elf-name">精灵·小萌</view>
					<image class="deepseek" src="../../static/makedetail/deepseek-logo.png"></image>
				</view>
				<view class="navbar-right">
					<image @click="switchToNormal()" class="primary" src="../../static/makedetail/primary.png"></image>
					<image @click="newChar()" class="createChat" src="../../static/makedetail/createChat.png"></image>
				</view>
			</div>

			<!-- <view class="navbar-reserveASeat"> </view>  -->
			<!-- 聊天内容区 -->
			<!-- <scroll-view class="chat-content" :scroll-into-view="toView" scroll-y scroll-with-animation="true"
				:style="{ height: stateType === 3 ? 'calc(100% - 180rpx)' : `calc(100% - ${370 + textareaHeight}rpx)` }"
				@scroll="onChatScroll"> -->
			<scroll-view class="chat-content" :scroll-into-view="toView" scroll-y scroll-with-animation="true"
				:style="{ height:  `calc(100% - ${370 + textareaHeight}rpx)` }"
				@scroll="onChatScroll">
				<template v-if="messages && messages.length > 0">
					<!-- <scroll-view class="chat-content" scroll-y> -->
					<view v-for="(msg, idx) in messages" :key="idx" :class="['chat-bubble', msg.role]">
						<template v-if="msg.role === 'user'">
							<uv-text size="32rpx" color="rgba(255, 255, 255, 0.7)" :text="msg.content"></uv-text>
						</template>
						<template v-else-if="msg.role === 'ai'">
							<view class="ai-bubble-row">
								<view class="ai-avatar">
									<image src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill">
									</image>
								</view>
								<!-- 第一句话 -->
								<view v-if="msg.type == 0" class="ai-bubble-content">
									<view>欢迎来到萌创星球AI写歌🎉🎉🎉！这里能满足你创作音乐🎸、释放灵感🎵，创造独属于你的音乐旋律！
									</view>
									<br>
									<view>
										可以根据自己的喜好点击下方的选项，快速开始创作🎼，
									</view>
								 
									<div @click="onCateSent('纯音乐')" class="btn-box"> 纯音乐
									</div>
									<div @click="onCateSent('AI生成歌词')" class="btn-box" style="margin:0 20rpx"> AI生成歌词
									</div>
									<div @click="onCateSent('自定义歌词')" class="btn-box"> 自定义歌词
									</div>
								</view>
								<!-- 第二句话 -->
								<view class="ai-bubble-content" v-else-if="msg.type == 1">
									<text>{{ msg.content }}</text>
								</view>
								<!-- 第三句话 -->
								<view class="ai-bubble-content"
									style="border-radius: 12rpx 36rpx 36rpx 36rpx;border: 1px solid rgba(255,255,255,0.1);"
									v-else-if="msg.type == 2">
									<!-- <text>{{ msg.content }}</text> -->
									<view class="lyrics-input-title">
										<view>歌词</view>
										<view class="right-btn" :class="{'right-btn-active': isLyricConfirmActive}" @click="onLyricSent()" @touchstart="isLyricConfirmActive = true" @touchend="isLyricConfirmActive = false" @touchcancel="isLyricConfirmActive = false">确认</view>
									</view>
									<scroll-view scroll-y class="lyricsInputBox" style=""> 
										<textarea  v-if="idx == (messages.length - 1 )" v-model="lyricData" class="lyric-editor" auto-height
											:adjust-position="false" placeholder="修改歌词..." maxlength="-1" />
											<uv-text v-else size="32rpx" color="rgba(255, 255, 255, 0.7)" :text="msg.content"></uv-text>
									</scroll-view>

								</view>
								<view class="ai-bubble-content" v-else-if="msg.type == 4">
									<view>请输入音乐的风格</view>
									<br>
									<view>
										也可以根据自己的喜好点击下方的选项，快速开始创作🎼，
									</view>
									<div @click="openTagPopup()" class="btn-box">
										选择标签
									</div>
								</view>

								<!-- <view class="ai-bubble-content" v-else-if="msg.type == 1">
									<template v-if="idx === lastAiIndex && isLoading">
										<text>{{ displayText }}</text>
										<text v-if="isLoading" class="loading-dot">...</text>
									</template>
<template v-else>
										<text>{{ msg.content }}</text>
									</template>
</view> -->

								<view v-else-if="msg.type == 20" class="ai-bubble-content">
									<text>OK!~小萌开始生成音乐啦！</text><br>
									<div v-if="msg.isStartGenerating && msg.startGeneratingId == 0" class="btn-box">
										点击查看
										({{ countdown }}) s</div>
									<div v-else
										@click="goPage(`/pages/makedetail/makeMusicDetail?id=${msg.startGeneratingId}`)"
										class="btn-box"> 点击查看
									</div>
								</view>
							</view>
						</template>
					</view>
					<view id="bottom-anchor"></view>
					<view v-if="error" class="chat-bubble ai error">{{ error }}</view>
					<view  :style="{ height: stateType !== 3 || musicGenre == '自定义歌词' ? '200rpx' : '80rpx' }"></view>
					<image v-if="showToBottomBtn && keyboardHeight === 0" class="to-bottom-btn" @click="scrollToBottom"
						src="../../static/makedetail/toBottomBtn.png"></image>
				</template>
				<template v-else>
					<view class="chat-content-empty">
						<image src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill"></image>
						<view class="chat-content-empty-title">嗨！我是创梦精灵</view>
						<view class="chat-content-empty-desc">与我聊聊你想要生成的角色吧！</view>
					</view>
				</template>
			</scroll-view>
			<!-- <view class="bom-reserveASeat"></view> -->

			<view v-if="stateType !== 3 || musicGenre == '自定义歌词'" class="bom-box"
				:style="{ bottom: 0 + 'px', height: `${190 + textareaHeight}rpx` }">
				<view class="bom-box-bg">
					<c-lottie ref="cLottieRef" :src='"/static/lottie/xiaomeng.json"' class="icon-img" height="108rpx"
						width="112rpx" :loop="true" :autoPlay="false"></c-lottie>

				</view>
				<!-- 底部输入区 -->
				<view class="input-bar">
					<!-- <image class="icon-img" src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill">
					</image> -->


					<textarea :autoHeight="true" class="input-box" :adjust-position="false" v-model="question"
						:disabled="isLoading" placeholder="给我发送消息吧..." maxlength="400" @input="onTextareaInput"
						confirm-type="search" @confirm="onSend" rows="1"
						style="overflow-y:auto;max-height:176rpx;min-height:44rpx;" />
					<!-- <button class="send-btn" :disabled="isLoading || !question.trim()" @click="onSend">{{ isLoading ?
						'生成中...' :
						'发送' }}</button> -->
					<image v-if="isLoading" class="stop" src="../../static/makedetail/stop.png" mode=""
						@click="stopStreamAnswer" />
					<image v-else-if="!isLoading && !question.trim() && keyboardHeight === 0" class="keyboard"
						src="../../static/makedetail/keyboard.png" mode="" />

					<image v-else-if="!isLoading && question.trim() && keyboardHeight !== 0" class="send"
						src="../../static/makedetail/send.png" mode="" @click="onSend" />
				</view>
				<!-- 底部提示 -->
				<view class="footer-tip">内容由AI生成，禁用相关功能请联系管理员。</view>
			</view>
		</view>

		<DialogBox ref="DialogBox"></DialogBox>
		<multi-select-popup ref="tagPopup" :initial-options="tagOptions" @selection-confirmed="handleTagSelection"
			@popup-closed="handlePopupClosed"></multi-select-popup>
	</view>
</template>
<script>
import websocket from '@/common/websocket.js';
import MultiSelectPopup from '@/components/MultiSelectPopup/MultiSelectPopup.vue';

export default {
	components: {
		MultiSelectPopup
	},
	data() {
		return {
			question: '',
			answer: '',
			displayText: '',
			isComplete: false,
			isLoading: false,
			loadingText: '正在生成歌词，请稍候',
			loadingDots: '...',
			loadingTimer: null,
			error: null,
			retryCount: 0,
			maxRetries: 3,
			timer: null,
			lastResponseTime: 0,
			timeout: 30000,
			typingSpeed: 50,
			messages: [],
			lastAiIndex: -1,
			keyboardHeight: 0,
			statusBarHeight: 0,
			windowBottom: 0,
			toView: '',
			showToBottomBtn: false,
			textareaHeight: 0,
			isConnected: false,
			isStartGenerating: false,
			countdown: 0,
			stateType: 1,
			isLyricConfirmActive: false, // 用于歌词确认按钮的点击反馈
			stateTypeArray: ['clear', 'cate', 'getLyrics', 'setLyrics', 'getTags', 'setTags', 'setContent', '', '', '', '', 'setContent'],
			content: '',
			musicGenre: '',
			lyricData: '',
			tagsData: '',
			tagOptions: [], // 用于存储多选弹窗的选项 
			// type = clear   清除|cate 第一句话选择 |getLyrics 获取歌词(需要上传描述)|setLyrics 修改歌词(再去判断是否有* 有重复没有下一步 没有展示标签)|setTags(修改标签) (下发一个static 失败有提示 成功就正常生成)|getTags 获取标签
		};
	},
	methods: {
		// /Work/streamAnswerMusicLast
		// /Work/streamAnswerMusic
		// {type:'',content:''}
		// type = clear  清除|cate 第一句话选择 |getLyrics 获取歌词(需要上传描述)|setLyrics 修改歌词(再去判断是否有* 有重复没有下一步 没有展示标签)|setTags(修改标签) (下发一个static 失败有提示 成功就正常生成)|getTags 获取标签
		formatMsgContent(content) {
			if (!content) return [];
			// 将换行符替换为 <br/>
			return content.replace(/\n/g, '<br/>');
			;
		},
		scrollToBottom() {
			this.toView = '';
			this.$nextTick(() => {
				this.toView = 'bottom-anchor';
			});
		},
		async initWebSocket() {
			if (this.isConnected) return;

			try {
				// 发送初始化消息
				websocket.onOpen(() => {
					// setTimeout(() => {
					// 	websocket.send(JSON.stringify({ type: 'getTags', content: '' }));
					// }, 1000)
				});

				await websocket.connect('wss://e.zhichao.art/Gapi/Work/streamAnswerMusic', {
					uuid: getApp().globalData.uuid
				});

				this.isConnected = true;
				// 设置消息处理回调
				websocket.onMessage((data) => {
					console.log("data:", data);
					if (data && data.includes('{')) {
						var data = JSON.parse(data);
					}
					var type = data && data.type || '';
					var content = data && data.content || '';
					
					// type = error,
					// content=no_cate(首次分类没有设置)
					// content="歌词不合规，请重新输入"|"歌词中有违规禁词，请修改！"
					// type='lyrics',content=具体歌词
					// type=success,content='OKOKOK'：提交成功
					// type=result,content=ID



					// 111111111111111111111111111111111
					// if (type === 'success' && content === 'OKOKOK') {
					// 	// 音乐生成开始，AI消息加载中提示
					// 	const aiMsg = this.messages[this.lastAiIndex];
					// 	if (aiMsg) {
					// 		aiMsg.isStartGenerating = true;
					// 		aiMsg.content = '音乐生成中，请稍候...';
					// 	}
					// 	this.isStartGenerating = true;
					// 	this.countdownFun(20);
					// }
					// if (type === 'result' && content) {
					// 	// 音乐生成中，显示跳转到音乐详情页按钮
					// 	const aiMsg = this.messages[this.lastAiIndex];
					// 	if (aiMsg) {
					// 		aiMsg.isStartGenerating = false;
					// 		aiMsg.startGeneratingId = content;
					// 		aiMsg.content = '音乐已生成，点击跳转到详情页';
					// 	}
					// }
					if (this.isLoading) {
						if (type == 'cate' && content == 'success') {
							// {"type":"setContent","content":content}
							// 此时 第第一步选择完成
							if (this.musicGenre == '纯音乐') {
								// 跳过获取 修改 歌词
								this.stateType = 11;
								this.messages.push({ role: 'ai', type: 1, content: '输入描述生成音乐' });
							}


							if (this.musicGenre == 'AI生成歌词') {
								this.messages.push({ role: 'ai', type: 1, content: '请描述歌词' });
								this.stateType = 2;
							}
							if (this.musicGenre == '自定义歌词') {
								this.messages.push({ role: 'ai', type: 1, content: '请输入歌词' });
								this.stateType = 3;
							}

							console.log(type, content);

							// {"type":"lyrics","content":"《古风之约》\n\n青山绿水间 桃花映人面\n清风拂衣袖 相思绕指尖\n亭台楼阁畔 琴声悠扬传\n往事如烟云 飘散在天边\n\n红墙绿瓦下 谁在等归雁\n明月照窗前 孤影难入眠\n一纸素笺上 写满了思念\n岁月如流水 匆匆又一年\n\n我与你共赴 这一场古风之约\n看那春花秋月 浪漫又缠绵\n执手相看泪眼 无语凝噎\n只愿与你相伴 直到永远\n\n我与你共赴 这一场古风之约\n听那琵琶弦上 倾诉着哀怨\n举杯对饮成三人 醉在花间\n只愿与你相守 岁岁年年"}
						}
						// if (data.includes('[DONE]')) {
						// 	// 结束生成
						// 	this.completeAnswer();
						// }  else if (data.includes('ID:')) {
						// 	// 提取ID
						// 	const aiMsg = this.messages[this.lastAiIndex];
						// 	if (aiMsg) {
						// 		aiMsg.startGeneratingId = data.split(':')[1];
						// 	}
						// }  else if (data.includes('OKOKOK')) {
						// 	const aiMsg = this.messages[this.lastAiIndex];
						// 	if (aiMsg) {
						// 		aiMsg.isStartGenerating = true;
						// 	}
						// 	this.isStartGenerating = true;
						// 	this.countdownFun(20);
						// } else {
						// 	const aiMsg = this.messages[this.lastAiIndex];
						// 	if (aiMsg) {
						// 		aiMsg.isStartGenerating = false;
						// 		this.displayText += data;
						// 		this.answer += data;
						// 		aiMsg.content += data;
						// 		this.retryCount = 0;
						// 		this.lastResponseTime = Date.now();
						// 		this.scrollToBottom();
						// 	}
						// }
						this.isLoading = false;
					}

					if (type == 'lyrics' && content) {
						console.log('获取到歌词', content);
						// 替换加载中的消息
						const lastMessageIndex = this.messages.length - 1;
						// 替换加载中的消息
						this.stopLoadingAnimation();
						// Find and remove the loading message
						for (let i = this.messages.length - 1; i >= 0; i--) {
							if (this.messages[i].isGeneratingLyrics) {
								this.messages.splice(i, 1);
								break;
							}
						}
 					// 移除 isProcessing 的消息
						for (let i = this.messages.length - 1; i >= 0; i--) {
							if (this.messages[i].isProcessing) {
								this.messages.splice(i, 1);
								break;
							}
						}
						this.messages.push({ role: 'ai', type: 2, content: content });
						this.stateType = 3;
						this.lyricData = content;
						console.log(this.messages, 24);

					}
					if (type == 'tags' && content) {
						// 移除 isProcessing 的消息
						for (let i = this.messages.length - 1; i >= 0; i--) {
							if (this.messages[i].isProcessing) {
								this.messages.splice(i, 1);
								break;
							}
						}
						// 此时歌词合法 下一步获取标签
						this.stateType = 4;
						this.messages.push({ role: 'ai', type: 4, content: '请输入标签' });
					}
					// if (type == 'getTags' && content && !this.tagsData) { //确保只处理一次 
					// 	// 获取标签成功
					// 	this.tagsData = JSON.parse(content);
					// 	console.log('获取到标签', this.tagsData);
					// 	// 将获取到的标签数据转换为 MultiSelectPopup 需要的格式
					// 	this.tagOptions = this.formatTagOptions(this.tagsData);
					// }
					// {"type":"success","content":"OKOKOK"}	 
					// {"type":"result","content":"208"}
					if (type == 'success' && (content == 'OKOKOK' || content == 'OK')) {
						// 音乐生成开始，AI消息加载中提示
						this.messages.push({ role: 'ai', type: 20, content: '', isStartGenerating: true, startGeneratingId: 0 });
						this.isStartGenerating = true;
						this.countdownFun(3);
						this.startLoadingAnimation();
					}
					if (type == 'result' && content) {
						// 生成完成，AI消息中显示立即查看按钮
						this.stopLoadingAnimation();
						const aiMsg = this.messages.find(msg => msg.isStartGenerating);
						if (aiMsg) {
							aiMsg.isStartGenerating = false;
							aiMsg.startGeneratingId = content;
						}
						this.isStartGenerating = false;
					}
					if (type == 'error' && content) {
						uni.showToast({
							title: content,
							icon: 'none'
						})
					}
					this.scrollToBottom();
				});

				// 设置错误处理回调
				websocket.onError((error) => {
					console.error('WebSocket错误:', error);
					this.isConnected = false;
					this.handleError(error);
				});

				// 设置关闭处理回调
				websocket.onClose(() => {
					console.log('WebSocket已关闭');
					this.isConnected = false;
					this.isLoading = false;
				});


			} catch (error) {
				console.error('WebSocket初始化失败:', error);
				this.isConnected = false;
				this.handleError(error);
			}
		},
		async startStreamAnswer(content) {
			if (!content.trim()) {
				uni.showToast({
					title: '请输入问题',
					icon: 'none'
				});
				return;
			}

			// 检查连接状态，如果断开则重连
			if (!this.isConnected) {
				try {
					await this.initWebSocket();
				} catch (error) {
					console.error('重连失败:', error);
					uni.showToast({
						title: '连接已断开，请重试',
						icon: 'none'
					});
					return;
				}
			}
			console.log('发送消息：', content);

			this.resetState();
			if (this.stateTypeArray[this.stateType] != 'setLyrics' || this.musicGenre == '自定义歌词') {

				this.messages.push({ role: 'user', content });
			}

			try {
				this.isLoading = true;

				if (false) {
					let aiMsg = {
						role: 'ai',
						content: '',
						isStartGenerating: false,
						startGeneratingId: 0
					};
					this.messages.push(aiMsg);
					this.lastAiIndex = this.messages.length - 1;
					this.content = content;
				}
				// 发送消息
				const messageType = this.stateTypeArray[this.stateType];

				let messageToSend = { type: messageType, content: content };

				// 特殊处理 stateType 11 (纯音乐描述)
				if (this.stateType === 11) {
					messageToSend = { type: 'setContent', content: content };
				}

				websocket.send(JSON.stringify(messageToSend));

				// 如果是获取歌词，则显示加载中
				if (messageType === 'getLyrics') {
					this.messages.push({ role: 'ai', type: 1, content: this.loadingText + this.loadingDots, isGeneratingLyrics: true });
					this.startLoadingAnimation();
					this.scrollToBottom();
				} else if (messageType === 'setLyrics') {
					this.messages.push({ role: 'ai', type: 1, content: '正在处理中...', isProcessing: true });
					this.scrollToBottom();
				}

			} catch (error) {
				console.error('发送消息失败:', error);
				this.handleError(error);
			}
		},
		onSend() {
			if (!this.question.trim() || this.isLoading) return;

			if (this.stateType === 4) { // 当前状态是等待输入标签
				const userTagInput = this.question.trim();
				this.messages.push({ role: 'user', content: userTagInput });
				websocket.send(JSON.stringify({ type: 'setTags', content: userTagInput }));
				// this.messages.push({ role: 'ai', type: 1, content: `好的，已选择标签：${userTagInput}` });
				this.question = '';
				this.scrollToBottom();
				return; // 阻止后续的 startStreamAnswer 调用
			}

			this.startStreamAnswer(this.question);
			this.question = '';
		},
		// 发送第一步指令
		onCateSent(content) {
			if (this.isLoading || this.musicGenre) return;
			this.startStreamAnswer(content);
			this.musicGenre = content;
		},
		// 发送歌词逻辑
		onLyricSent() {
			if (this.isLoading) return;
			if (this.lyricData.includes('*')) {
				uni.showToast({
					title: '歌词有"*"，请修改后再保存',
					icon: 'none'
				});
				return;
			}
			this.messages[this.messages.length - 1].content = this.lyricData;
			this.startStreamAnswer(this.lyricData);
		},
		// 打开标签选择弹窗
		openTagPopup() {
			this.$refs.tagPopup.openPopup();
		},
		formatTagOptions(tagsData) {
			console.log('格式化标签选项', tagsData);
			// tagsData 的预期格式: 
			// [
			//   { "name": "情感", "children": [ { "name": "欢快", "children": [] }, ... ] },
			//   ...
			// ]
			// 需要转换为 MultiSelectPopup 需要的格式:
			// [
			//   { label: '情感', expanded: true, children: [{ label: '欢快', value: '欢快', selected: false }, ...] },
			//   ...
			// ]
			if (!Array.isArray(tagsData)) return [];
			return tagsData.map(parentTag => ({
				label: parentTag.name,
				expanded: true, // 默认展开父选项
				children: parentTag.children.map(childTag => ({
					label: childTag.name,
					value: childTag.name, // 通常value和label相同，或根据实际情况设置
					selected: false
				}))
			}));
		},
		handleTagSelection(selectedValues) {
			console.log('选中的标签:', selectedValues);
			// 处理选中的标签，例如发送到后端
			// 示例：将选中的标签数组转换为字符串发送
			const tagsString = selectedValues.join(',');
			websocket.send(JSON.stringify({ type: 'setTags', content: tagsString }));
			// 可以在这里添加AI回复，告知用户标签已选择，正在生成音乐等
			// this.messages.push({ role: 'ai', type: 1, content: `好的，已选择标签：${tagsString}，小萌开始生成音乐啦！` });
			this.scrollToBottom();
		},
		handlePopupClosed() {
			// 如果用户关闭了弹窗但没有选择任何标签，可以提供一个默认行为或提示
			// 例如，如果没有选择标签，可以发送一个空数组或特定指令

		},
		startLoadingAnimation() {
			let dotCount = 1;
			this.loadingTimer = setInterval(() => {
				dotCount++;
				if (dotCount > 3) {
					dotCount = 1;
				}
				this.loadingDots = '.'.repeat(dotCount);
				// Update the loading message content if it exists
				const loadingMessage = this.messages.find(msg => msg.isGeneratingLyrics);
				if (loadingMessage) {
					loadingMessage.content = this.loadingText + this.loadingDots;
				}
			}, 500); // 更新频率，例如每500毫秒
		},
		stopLoadingAnimation() {
			if (this.loadingTimer) {
				clearInterval(this.loadingTimer);
				this.loadingTimer = null;
			}
			this.loadingDots = '...'; // Reset to default
		},
		resetState() {
			this.answer = '';
			this.displayText = '';
			this.isComplete = false;
			this.error = null;
			this.retryCount = 0;
			this.lastResponseTime = Date.now();
		},
		handleError(error) {
			if (this.retryCount < this.maxRetries) {
				this.retryCount++;
				this.retryRequest();
			} else {
				this.error = '请求失败，请稍后重试';
				this.isLoading = false;
				this.stopLoadingAnimation();
				uni.showToast({
					title: this.error,
					icon: 'none'
				});
			}
		},
		retryRequest() {
			uni.showToast({
				title: `正在重试 (${this.retryCount}/${this.maxRetries})`,
				icon: 'none'
			});
			setTimeout(() => {
				this.startStreamAnswer(this.question);
			}, 1000 * this.retryCount);
		},
		completeAnswer() {
			this.isComplete = true;
			this.isLoading = false;
			this.stopLoadingAnimation();
		},
		stopStreamAnswer() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
			this.isLoading = false;
			this.stopLoadingAnimation();
		},
		checkTimeout() {
			if (Date.now() - this.lastResponseTime > this.timeout) {
				this.handleError(new Error('请求超时'));
			}
		},

		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		onChatScroll(e) {
			const threshold = 800; // 离底部1.0417rem以内不显示按钮
			const {
				scrollHeight,
				scrollTop
			} = e.detail;
			const clientHeight = e.detail.clientHeight || e.detail.height || 0; 
			
			if (scrollHeight - scrollTop - clientHeight > threshold) {
				this.showToBottomBtn = true;
			} else {
				this.showToBottomBtn = false;
			}
		},
		onTextareaInput(e) {
			console.log(e.detail);

			// 获取textarea的实际高度
			const query = uni.createSelectorQuery().in(this);
			query.select('.input-box').boundingClientRect(data => {
				if (data) {
					// 将px转换为rpx (假设设计稿是750rpx宽度)
					const height = (data.height * 750) / uni.getSystemInfoSync().windowWidth;
					// 减去基础高度90rpx，得到额外增加的高度
					this.textareaHeight = Math.max(0, height - 90);
					// 滚动到底部
					this.scrollToBottom();
				}
			}).exec();
		},
		retrieveHistoricalRecords() {
			uni.request({
				url: this.$apiHost + '/Work/streamAnswerMusicLast',
				method: 'GET',
				header: {
					'content-type': 'application/json',
					'sign': getApp().globalData.headerSign
				},
				data: {
					uuid: getApp().globalData.uuid,
					task_type: 2
				},
				success: (res) => {
					// step  0 未开始 1 已选择过第一次的选项  2 获取到歌词   
					//  cate  选择类型    lyrics 历史记录 

					console.log("获取历史记录：", res.data);
					if (res.data.success === "yes") {
						this.messages = [];
						this.musicGenre = res.data.cate;

						// 未开始
						this.messages.push({ role: 'ai', type: 0, content: ' ' });

						if (res.data.step >= 1) {
							// 获取到歌词
							this.messages.push({ role: 'user', content: res.data.cate });

						}
						if (res.data.cate == '纯音乐') {
							// 跳过获取 修改 歌词
							this.messages.push({ role: 'ai', type: 1, content: '输入描述生成音乐' });
							this.stateType = 11;
						}
						if (res.data.cate == 'AI生成歌词') {
							this.messages.push({ role: 'ai', type: 1, content: '请描述歌词' });
							this.stateType = 2;
						}
						if (res.data.cate == '自定义歌词') {
							this.messages.push({ role: 'ai', type: 1, content: '请输入歌词' });
							this.stateType = 3;
						}
						if (res.data.content) {
							this.messages.push({ role: 'user', type: 1, content: res.data.content });
						}
						// AI生成歌词逻辑
						if (res.data.lyrics) {
							this.messages.push({ role: 'ai', type: 2, content:res.data.lyrics});
							this.stateType = 3;
							this.lyricData = res.data.lyrics;
						}

					} else {
						this.messages = []
					}

					console.log("获取历史记录：", this.messages);

				},
				fail: (err) => {
					console.log('获取历史记录失败', err);
					uni.showToast({
						title: '获取历史记录失败',
						icon: 'none'
					});
				}
			})
		},
		// 重新计算元素高度
		recalculateHeights() {
			// 重新计算textarea高度
			const query = uni.createSelectorQuery().in(this);
			query.select('.input-box').boundingClientRect(data => {
				if (data) {
					const height = (data.height * 750) / uni.getSystemInfoSync().windowWidth;
					this.textareaHeight = Math.max(0, height - 90);
				}
			}).exec();
		},
		countdownFun(n) {
			if (this.timer) {
				clearInterval(this.timer);
			}
			this.countdown = n;
			// 倒计时
			this.timer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					clearInterval(this.timer);
				}
			}, 1000);
		},
		goPage(page) {
			uni.navigateTo({
				url: page,
			});
		},
		newChar() {
			this.$refs["DialogBox"]
				.confirm({
					title: "是否创建新对话",
					content: "立即结束当前对话内容，开启新的对话?",
					DialogType: "inquiry",
					btn1: "取消",
					btn2: "确定",
					animation: 0,
				})
				.then(() => {
					websocket.send(JSON.stringify({ type: 'clear', content: '' }));
					this.toView = ''
					this.showToBottomBtn = false
					this.textareaHeight = 0
					this.isConnected = false
					this.isStartGenerating = false
					this.countdown = 0
					this.stateType = 1
					this.stateTypeArray = ['clear', 'cate', 'getLyrics', 'setLyrics', 'getTags', 'setTags', 'setContent', '', '', '', '', 'setContent']
					this.content = ''
					this.musicGenre = ''
					this.lyricData = ''
					this.retrieveHistoricalRecords()
				});

		},
		switchToNormal() {
			this.$refs["DialogBox"]
				.confirm({
					title: "是否切回常规模式",
					content: "切换至普通常规模式进行创作?",
					DialogType: "inquiry",
					btn1: "取消",
					btn2: "确定",
					animation: 0,
				})
				.then(() => {
					this.goPage('/pages/makedetail/makeMusicDetail')
				});

		},
		getTags() {
				let that = this
				uni.request({
					url: this.$apiHost + '/Work/getTags',
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'sign': getApp().globalData.headerSign
					},
					data: {
						uuid: getApp().globalData.uuid
					},
					success: (res) => {
						console.log("获取标签：", res.data);
						if (res.data && res.data.tags) {
							this.tagOptions = this.formatTagOptions(res.data.tags);
						}
					},
					fail: (err) => {
						console.log('获取标签失败：', err);
						uni.showToast({
							title: '获取标签失败',
							icon: 'none'
						});
					}
				})
			},
	},
	async created() {
		this.getTags();
		await this.initWebSocket();
		this.retrieveHistoricalRecords();
		this.timer = setInterval(() => {
			if (this.isLoading) {
				this.checkTimeout();
			}
		}, 1000);

		uni.onKeyboardHeightChange(res => {
			this.keyboardHeight = res.height;
			if (res.height === 0) {
				this.$refs.cLottieRef.call('stop')
			} else {
				this.$refs.cLottieRef.call('play')

			}
			this.$nextTick(() => {
				this.recalculateHeights();
			});
		});

		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		this.windowBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
	},

	beforeDestroy() {
		websocket.close();
		this.stopStreamAnswer();
	}
}
</script>

<style lang="scss">
@import './intelligentLifeChart.scss';

.lyricsInputBox {
	width: 100%;
	height: calc(100vh - 455rpx);
	box-sizing: border-box;
	padding: 20rpx;
}
 
.lyrics-input-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 35px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12rpx 36rpx 0 0;
	padding-left: 20rpx;
	padding-right: 24rpx;
	font-size: 32rpx;

	.right-btn {
		font-size: 26rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 22rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.15);
		padding: 4rpx 32rpx;
		transition: background-color 0.2s ease, transform 0.1s ease; // 添加过渡效果
	}

	.right-btn-active {
		background: rgba(255, 255, 255, 0.3); // 点击时的深色背景
		transform: scale(0.98); // 点击时的缩小效果
	}
}

.lyric-editor {
	width: 100%;
	background-color: transparent;
	border: none;
	padding: 0;
	margin-top: 10rpx;
	color: rgba(255, 255, 255, 0.7);
	font-size: 32rpx;
}

.to-bottom-btn {
	position: fixed;
	right: 50%;
	transform: translateX(50%);
	bottom: 20rpx;
	width: 60rpx;
	height: 60rpx;
	bottom: 220rpx;
	z-index: 999;
	opacity: .75;
	transition: opacity 0.2s;
}

.ai-bubble-row {
	display: flex;
	align-items: flex-start;
}

.ai-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: solid 2rpx rgb(238, 238, 238, .3);
	display: flex;
	align-items: flex-end;
	justify-content: center;

	image {
		width: 52rpx;
		height: 52rpx;
	}
}

.ai-bubble-content {
	flex: 1;
}
</style>