MoeNovaClient/pages/makedetail/makeDetail.vue

<template>
	<view class="page">
		<!-- 引入FontAwesome -->
		<view>
			<link rel="stylesheet"
				href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		</view>



		<!-- 顶部导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<text class="fa fa-angle-left"></text>
			</view>
			<view class="navbar-center">
				<view class="navbar-title">
					<image class="navbar-avatar" :src="myinfo.avator" mode="aspectFill"></image>
					<text class="navbar-text">{{ myinfo.nickname }}</text>
					<text class="navbar-badge" v-if="myinfo.is_vip > 0">VIP</text>
					<!-- <image style=" width: 34rpx;  height: 34rpx;" v-if="myinfo.is_vip > 0" src="@/static/me/icon-vip1.png" mode=""></image> -->

				</view>
			</view>
			<view class="navbar-right" @click="showActionSheet">
				<text class="fa fa-ellipsis-h"></text>
			</view>
		</view>
		<!-- 灵感 -->
		<template v-if="queueDetail.task_type == 1">
			<view class="inspiration-content">
				<image src="../../static/makedetail/cz_img_zhanshi.png" mode="widthFix"></image>
				<image :src="home_image" class="inspirationPictures" mode="widthFix"></image>
			</view>
			<!-- 内容头图区域 -->
			<view class="topUser" ref="ImageBox" v-if="false">
				<image :src="home_image" class="home_image" mode="aspectFill"></image>
			</view>

			<view class="body" v-if="false">
				<view class="article-header">
					<text class="title">{{ queueDetail.title }}</text>

					<!-- 显示第一个像素的颜色 -->
					<view class="pixel-color" v-if="pixelColor">
						<view class="color-box"
							:style="{ backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})` }">
						</view>
						<view class="color-info">
							<text class="color-text">左上角像素RGB值:</text>
							<text class="color-value">R:{{ pixelColor.r }} G:{{ pixelColor.g }} B:{{ pixelColor.b
							}}</text>
							<text class="color-hex">HEX: {{ rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b) }}</text>
						</view>
					</view>

					<!-- 颜色加载中状态 -->
					<view class="pixel-color loading"
						v-else-if="home_image && home_image !== '../../static/home/avator.png'">
						<view class="color-box loading"></view>
						<!-- <text class="color-text">正在获取像素颜色...</text> -->
					</view>

					<view class="meta-info">
						<view class="meta-item">
							<text class="fa fa-clock-o"></text>
							<text class="meta-text">{{ queueDetail.create_time }}</text>
						</view>
						<view class="meta-item">
							<text class="fa fa-tag"></text>
							<text class="meta-text">{{ queueDetail.task_type == 1 ? '灵感创作' : '音乐创作' }}</text>
						</view>
						<view class="meta-item">
							<text class="fa fa-circle" :style="getStatusStyle(queueDetail.status)"></text>
							<text class="meta-text">{{ getStatusText(queueDetail.status) }}</text>
						</view>
					</view>
				</view>

				<view class="divider"></view>

				<view class="article-content">
					<!-- 灵感创作显示description -->
					<view v-if="queueDetail.task_type == 1">
						<text class="content">{{ queueDetail.description }}</text>

						<!-- 显示创作详情 -->
						<view class="creation-details">
							<view class="detail-item" v-if="queueDetail.action">
								<text class="detail-label">行为动作：</text>
								<text class="detail-value">{{ queueDetail.action }}</text>
							</view>
							<view class="detail-item" v-if="queueDetail.environment">
								<text class="detail-label">主体环境：</text>
								<text class="detail-value">{{ queueDetail.environment }}</text>
							</view>
							<view class="detail-item" v-if="queueDetail.subject">
								<text class="detail-label">主体形象：</text>
								<text class="detail-value">{{ queueDetail.subject }}</text>
							</view>
							<view class="detail-item" v-if="queueDetail.style">
								<text class="detail-label">参考风格：</text>
								<text class="detail-value">{{ queueDetail.style }}</text>
							</view>
						</view>
					</view>

					<!-- 音乐创作显示lyrics -->
					<view v-else-if="queueDetail.task_type == 2">
						<text class="content">{{ queueDetail.lyrics }}</text>

						<!-- 音乐创作显示歌曲名称 -->
						<view class="creation-details">
							<view class="detail-item" v-if="queueDetail.song_name">
								<text class="detail-label">歌曲名称：</text>
								<text class="detail-value">{{ queueDetail.song_name }}</text>
							</view>
						</view>
					</view>

					<!-- 显示状态信息 -->
					<view class="status-info" v-if="queueDetail.status < 4">
						<view class="queue-info">
							<text class="queue-text">队列位置:
								{{ queueDetail.queue_position }}/{{ queueDetail.all_position }}</text>
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: getProgressWidth() }"></view>
							</view>
						</view>
					</view>

					<!-- 显示错误信息 -->
					<view class="error-message" v-if="queueDetail.status == 3">
						<text class="error-text">{{ queueDetail.error_msg }}</text>
					</view>
				</view>



			</view>

		</template>
		<!-- 音乐 -->
		<template v-else-if="queueDetail.task_type == 2">
			<!-- 内容头图区域 -->
			<view class="topUser" ref="ImageBox">
				<image :src="home_image" class="home_image" mode="aspectFill"></image>

				<!-- 图片指示器 -->
				<!-- <view class="image-indicator" v-if="image_list.length > 1">
				<text>{{ selImg + 1 }}/{{ image_list.length }}</text>
			</view> -->

				<!-- 音乐类型时显示歌词 -->
				<view class="lyrics-overlay" v-if="queueDetail.task_type == 2" @mousedown="startDrag"
					@mouseup="stopDrag" @mousemove="drag">
					<text class="lyrics-text" ref="lyricsText" :style="{ transform: `translateY(${offsetY}px)` }">{{
						queueDetail.description }}</text>
				</view>

				<!-- 音乐类型且状态为9时显示播放按钮 -->
				<view class="play-button" v-if="queueDetail.task_type == 2 && queueDetail.status >= 9"
					@click="toggleAudio">
					<text class="fa" :class="isPlaying ? 'fa-pause' : 'fa-play'"></text>
				</view>


			</view>

			<view class="body">
				<view class="article-header">
					<text class="title">{{ queueDetail.title }}</text>

					<!-- 显示第一个像素的颜色 -->
					<view class="pixel-color" v-if="pixelColor">
						<view class="color-box"
							:style="{ backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})` }">
						</view>
						<view class="color-info">
							<text class="color-text">左上角像素RGB值:</text>
							<text class="color-value">R:{{ pixelColor.r }} G:{{ pixelColor.g }} B:{{ pixelColor.b
							}}</text>
							<text class="color-hex">HEX: {{ rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b) }}</text>
						</view>
					</view>

					<!-- 颜色加载中状态 -->
					<view class="pixel-color loading"
						v-else-if="home_image && home_image !== '../../static/home/avator.png'">
						<view class="color-box loading"></view>
						<!-- <text class="color-text">正在获取像素颜色...</text> -->
					</view>

					<view class="meta-info">
						<view class="meta-item">
							<text class="fa fa-clock-o"></text>
							<text class="meta-text">{{ queueDetail.create_time }}</text>
						</view>
						<view class="meta-item">
							<text class="fa fa-tag"></text>
							<text class="meta-text">{{ queueDetail.task_type == 1 ? '灵感创作' : '音乐创作' }}</text>
						</view>
						<view class="meta-item">
							<text class="fa fa-circle" :style="getStatusStyle(queueDetail.status)"></text>
							<text class="meta-text">{{ getStatusText(queueDetail.status) }}</text>
						</view>
					</view>
				</view>

				<view class="divider"></view>

				<view class="article-content">
					<!-- 灵感创作显示description -->
					<view v-if="queueDetail.task_type == 1">
						<text class="content">{{ queueDetail.description }}</text>

						<!-- 显示创作详情 -->
						<view class="creation-details">
							<view class="detail-item" v-if="queueDetail.action">
								<text class="detail-label">行为动作：</text>
								<text class="detail-value">{{ queueDetail.action }}</text>
							</view>
							<view class="detail-item" v-if="queueDetail.environment">
								<text class="detail-label">主体环境：</text>
								<text class="detail-value">{{ queueDetail.environment }}</text>
							</view>
							<view class="detail-item" v-if="queueDetail.subject">
								<text class="detail-label">主体形象：</text>
								<text class="detail-value">{{ queueDetail.subject }}</text>
							</view>
							<view class="detail-item" v-if="queueDetail.style">
								<text class="detail-label">参考风格：</text>
								<text class="detail-value">{{ queueDetail.style }}</text>
							</view>
						</view>
					</view>

					<!-- 音乐创作显示lyrics -->
					<view v-else-if="queueDetail.task_type == 2">
						<text class="content">{{ queueDetail.lyrics }}</text>

						<!-- 音乐创作显示歌曲名称 -->
						<view class="creation-details">
							<view class="detail-item" v-if="queueDetail.song_name">
								<text class="detail-label">歌曲名称：</text>
								<text class="detail-value">{{ queueDetail.song_name }}</text>
							</view>
						</view>
					</view>

					<!-- 显示状态信息 -->
					<view class="status-info" v-if="queueDetail.status < 4">
						<view class="queue-info">
							<text class="queue-text">队列位置:
								{{ queueDetail.queue_position }}/{{ queueDetail.all_position }}</text>
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: getProgressWidth() }"></view>
							</view>
						</view>
					</view>

					<!-- 显示错误信息 -->
					<view class="error-message" v-if="queueDetail.status == 3">
						<text class="error-text">{{ queueDetail.error_msg }}</text>
					</view>
				</view>
			</view>

		</template>


		<!-- 作品描述 -->
		<view class="workDescription">
			<view class="workDescription-title">
				<view>创作描述 </view>
				<image class="pen" src="@/static/icon/wd_icon_bianji.png"></image>
			</view>
			<view class="workDescription-content">
				{{ queueDetail.lyrics ||queueDetail.description}}
			</view>
		</view>
		<!-- 作品描述 -->
		<view class="workDescription" v-if="queueDetail.content">
			<view class="workDescription-title">
				<view>创作描述 </view>
				<image class="pen" src="@/static/icon/wd_icon_bianji.png"></image>
			</view>
			<view class="workDescription-content">
				{{ noteContent}}
			</view>
		</view>




		<view class="thread2"></view>

		<!-- 音频元素 -->
		<audio id="audioPlayer" :src="queueDetail.result_audio" style="display:none;"></audio>

		<!-- 用于处理图片像素的隐藏canvas -->
		<canvas canvas-id="pixelCanvas"
			style="width: 10px; height: 10px; position: absolute; left: -100px; top: -100px;"></canvas>

		<!-- 底部漂浮栏 -->
		<view class="floating-bar" v-if="queueDetail.status == 9">
			<view class="floating-bar-content">
				<view class="add-note-btn" @click="openContentPopUpWindow">
					<text>添加说明</text>
				</view>
				<view class="publish-btn" @click="publishWork">
					<text>公布作品</text>
				</view>
			</view>
		</view>

		<!-- 添加说明弹窗 -->
		<!-- <view class="popup-mask" v-if="showNotePopup" @click="closeAddNotePopup"></view>
		<view class="note-popup" v-if="showNotePopup">
			<view class="popup-header">
				<text class="popup-title">添加说明</text>
			</view>
			<view class="popup-content">
				<textarea class="note-textarea" v-model="noteContent" placeholder="请描述你想添加的内容。"
					maxlength="500"></textarea>
				<view class="word-count">{{ noteContent.length }}/500</view>
			</view>
			<view class="popup-footer">
				<view class="cancel-btn" @click="closeAddNotePopup">
					<text>取消</text>
				</view>
				<view class="confirm-btn" @click="confirmAddNote">
					<text>确认</text>
				</view>
			</view>
		</view> -->



		<NicknamePopup title="添加说明" subtitle="" class="openContentPopUpWindow"
			ref="openContentPopUpWindow">
			<template slot="content"> 
				<uv-textarea v-model="noteContent" maxlength="500" count placeholder="请描述你添加的内容"></uv-textarea>

				<view class="btn-box" @click="confirmAddNote">确认</view>
			</template>
		</NicknamePopup>

	</view>
</template>

<script>
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
import NicknamePopup from '@/components/NicknamePopup/NicknamePopup.vue';

export default {
	components: {
		previewImage,
		NicknamePopup
	},
	data() {
		return {
			title: '',
			arcID: 0,
			selImg: 0,
			home_image: '',
			myinfo: {},
			tag_list: [],
			image_list: [],
			imgs: [],
			descs: [],
			isPlaying: false,
			audioPlayer: null,
			showNotePopup: false,
			noteContent: '',
			pixelColor: null, // 存储像素颜色值

			// 队列详情数据
			queueDetail: {
				id: 0,
				sso_id: 0,
				task_type: 1,
				title: '',
				description: '',
				action: '',
				environment: '',
				subject: '',
				style: '',
				song_name: '',
				lyrics: '',
				generate_uuid: '',
				result_images: '',
				result_audio: '',
				queue_position: 0,
				status: 1,
				generate_status: 1,
				points_cost: 0,
				error_msg: '',
				create_time: '',
				update_time: '',
				all_position: 0
			},
			myinfo: {},
			offsetY: 0,
			isDragging: false,
			startY: 0,
			initialOffsetY: 0
		}
	},
	onLoad(parms) {
		let self = this;
		this.arcID = parms.id || 9;
		this.getMyInfo();
	},
	onShow() {
		this.loadData();
	},
	onReady() {
		// 获取音频元素
		this.audioPlayer = uni.createInnerAudioContext();
		this.audioPlayer.onEnded(() => {
			this.isPlaying = false;
		});
	},
	onUnload() {
		// 页面卸载时停止音频播放
		if (this.audioPlayer) {
			this.audioPlayer.stop();
			this.audioPlayer.destroy();
		}
	},
	mounted() {

	},
	methods: {
		
		openContentPopUpWindow() {
			this.$refs.openContentPopUpWindow.open();
		},
		closeContentPopUpWindow() { 
			this.$refs.openContentPopUpWindow.close();

		},
		// 获取图片第一个像素的RGB值
		getImagePixelColor() {
			console.log("图片加载完成，准备获取像素颜色");

			// 清空之前的颜色值，进入加载状态
			this.pixelColor = null;

			// 如果是默认图片或空图片，则直接返回
			if (!this.home_image || this.home_image === '../../static/home/avator.png') {
				console.log("无有效图片，不获取像素颜色");
				return;
			}

			// 使用uni.getImageInfo获取图片信息
			uni.getImageInfo({
				src: this.home_image,
				success: (res) => {
					console.log("图片信息:", res);

					// 创建临时canvas绘制上下文
					const ctx = uni.createCanvasContext('pixelCanvas', this);

					// 修改绘制参数，确保只绘制图片左上角的一小块区域
					// drawImage(图片路径, 源图片裁剪x, 源图片裁剪y, 源图片裁剪宽度, 源图片裁剪高度, canvas目标x, canvas目标y, canvas目标宽度, canvas目标高度)
					// 这里我们只从源图片左上角裁剪10x10的区域，绘制到canvas的左上角
					ctx.drawImage(res.path, 0, 0, 10, 10, 0, 0, 10, 10);

					ctx.draw(false, () => {
						// 绘制完成后，获取像素数据
						setTimeout(() => { // 添加短暂延迟确保绘制完成
							uni.canvasGetImageData({
								canvasId: 'pixelCanvas',
								x: 0, // 获取(0,0)位置的像素
								y: 0,
								width: 1,
								height: 1,
								success: (res) => {
									// 获取像素RGB值
									this.pixelColor = {
										r: res.data[0],
										g: res.data[1],
										b: res.data[2],
										a: res.data[3]
									};
									console.log("第一个像素的RGB值:", this
										.pixelColor);
								},
								fail: (err) => {
									console.error("获取像素数据失败:", err);
									// 显示错误提示
									uni.showToast({
										title: '获取颜色失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}, 100);
					});
				},
				fail: (err) => {
					console.error("获取图片信息失败:", err);
					// 显示错误提示
					uni.showToast({
						title: '图片加载失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		getMyInfo() {
			uni.request({
				url: this.$apiHost + '/My/getnum',
				method: 'GET',
				header: {
					'content-type': 'application/json',
					'sign': getApp().globalData.headerSign
				},
				data: {
					uuid: getApp().globalData.uuid
				},
				success: (res) => {
					console.log("获取用户信息：", res.data);
					this.myinfo = res.data
				}
			})

		},
		selPhoto(item, sel) {
			this.selImg = sel;
			this.home_image = this.image_list[sel];
		},
		toArr(imgs) {
			let arr = imgs.split("|");
			return arr;
		},
		previewOpen(imgs1, index) {
			this.imgs = imgs1.split("|");
			setTimeout(() => this.$refs.previewImage.open(index), 0)
			// 传入当前选中的图片地址或序号
			return; //如需测试和uni原生预览差别可注释这两行
		},
		// 切换音频播放状态
		toggleAudio() {
			if (!this.queueDetail.result_audio) return;

			if (this.isPlaying) {
				this.audioPlayer.pause();
				this.isPlaying = false;
			} else {
				this.audioPlayer.src = this.queueDetail.result_audio;
				this.audioPlayer.play();
				this.isPlaying = true;
			}
		},
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				1: '排队中',
				2: '生成中',
				3: '生成失败',
				4: '已完成',
				9: '已完成'
			};
			return statusMap[status] || '未知状态';
		},
		// 获取状态样式
		getStatusStyle(status) {
			const colorMap = {
				1: '#ffa500', // 橙色 - 排队中
				2: '#2979ff', // 蓝色 - 生成中
				3: '#ff5151', // 红色 - 生成失败
				4: '#4caf50', // 绿色 - 已完成
				9: '#4caf50' // 绿色 - 已完成
			};
			return `color: ${colorMap[status] || '#999'}`;
		},
		// 获取进度条宽度
		getProgressWidth() {
			if (this.queueDetail.all_position === 0) return '0%';
			const progress = (1 - (this.queueDetail.queue_position / this.queueDetail.all_position)) * 100;
			return `${progress}%`;
		},
		// 加载数据
		loadData() {
			uni.showLoading({
				title: '加载中...'
			});
			let that = this;
			uni.request({
				url: this.$apiHost + '/WorkAI/getQueueDetail',
				data: {
					uuid: getApp().globalData.uuid,
					id: this.arcID
				},
				header: {
					"content-type": "application/json",
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("队列详情:", res.data);
					if (res.data.success === "yes") {
						// 更新队列详情
						this.queueDetail = res.data.data;
						this.noteContent = res.data.data.content;

						// 更新图片列表
						if (this.queueDetail.result_images && this.queueDetail.result_images !== "") {
							this.image_list = this.queueDetail.result_images.split(",");
							this.home_image = this.image_list[0];

							// 当图片更新后，手动触发获取像素颜色（因为图片可能从缓存加载，不会触发@load事件）
							// setTimeout(() => {
							// 	that.getImagePixelColor();
							// }, 500);
						} else {
							this.home_image = "../../static/home/avator.png";
						}

						// 如果是音频类型，设置音频源
						if (this.queueDetail.task_type == 2 && this.queueDetail.result_audio) {
							this.audioPlayer.src = this.queueDetail.result_audio;
						}
					} else {
						uni.showToast({
							title: '获取详情失败',
							icon: 'none'
						});
					}
				},
				complete: () => {
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("请求失败:", e);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},
		showActionSheet() {
			// 显示操作列表
			uni.showActionSheet({
				itemList: ['修改封面', '删除作品'],
				success: (res) => {
					switch (res.tapIndex) {
						case 0:
							// 修改封面
							this.editCover();
							break;
						case 1:
							// 删除作品
							this.deleteWork();
							break;
					}
				},
				fail: (res) => {
					console.log(res.errMsg);
				}
			});
		},
		// 修改封面
		editCover() {
			var _self = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: function (res) {
					console.log('res:', res)
					if (res.tempFilePaths.length > 0) {
						_self.imglocal = res.tempFilePaths[0]
						const tempFilePaths = res.tempFilePaths[0];
						console.log('tempFilePaths:', tempFilePaths);
						const uploadTask = uni.uploadFile({
							url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: function (uploadFileRes) {
								let resdata = JSON.parse(uploadFileRes.data)
								console.log('Success11:', uploadFileRes);
								console.log('Success21:', resdata);
								if (resdata.success == 'yes') {
									_self.home_image = resdata.url;
									// 调用修改封面接口
									uni.request({
										url: _self.$apiHost + '/WorkAI/queueAction',
										method: 'GET',
										data: {
											uuid: getApp().globalData.uuid,
											act: 'editImg',
											result_images: resdata.url,
											id: _self.arcID
										},
										header: {
											'content-type': 'application/json',
											'sign': getApp().globalData.headerSign
										},
										success: (res) => {
											if (res.data.success === "yes") {
												uni.showToast({
													title: '修改封面成功',
													icon: 'success'
												});
											} else {
												uni.showToast({
													title: '修改封面失败',
													icon: 'none'
												});
											}
										},
										fail: () => {
											uni.showToast({
												title: '修改封面失败',
												icon: 'none'
											});
										}
									});
								}
							},
							fail: function (uploadFileFail) {
								console.log('Error:', uploadFileFail.data);
								uni.showToast({
									title: '图片上传失败',
									icon: 'none'
								});
							}
						});
					}
				},
				error: function (e) {
					console.log(e);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		// 删除作品
		deleteWork() {
			// 显示确认对话框
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个作品吗？',
				confirmColor: '#ff5151',
				success: (res) => {
					if (res.confirm) {
						// 用户点击确定，执行删除操作
						this.confirmDelete();
					}
				}
			});
		},
		// 确认删除
		confirmDelete() {
			uni.showLoading({
				title: '删除中...'
			});

			uni.request({
				url: this.$apiHost + '/WorkAI/queueAction',
				method: 'GET',
				data: {
					uuid: getApp().globalData.uuid,
					act: 'del',
					id: this.arcID
				},
				header: {
					'content-type': 'application/json',
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.success === "yes") {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						// 删除成功后返回上一页
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						});
					}
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			});
		},
		// 显示添加说明弹窗
		showAddNotePopup() {
			this.showNotePopup = true;
		},
		// 关闭添加说明弹窗
		closeAddNotePopup() {
			this.showNotePopup = false;
		},
		// 确认添加说明
		confirmAddNote() {
			if (!this.noteContent.trim()) {
				uni.showToast({
					title: '请输入说明内容',
					icon: 'none'
				});
				return;
			}

			uni.showLoading({
				title: '保存中...'
			});

			uni.request({
				url: this.$apiHost + '/WorkAI/queueAction',
				method: 'GET',
				data: {
					uuid: getApp().globalData.uuid,
					act: 'editContent',
					content: this.noteContent,
					id: this.arcID
				},
				header: {
					'content-type': 'application/json',
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.success === "yes") {
						uni.showToast({
							title: '添加说明成功',
							icon: 'success'
						});
						this.noteContent = '';
						this.closeContentPopUpWindow();
						// 重新加载数据
						this.loadData();
					} else {
						uni.showToast({
							title: '添加说明失败',
							icon: 'none'
						});
					}
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '添加说明失败',
						icon: 'none'
					});
				}
			});
		},
		// 发布作品
		publishWork() {
			uni.showLoading({
				title: '发布中...'
			});

			uni.request({
				url: this.$apiHost + '/WorkAI/queueAction',
				method: 'GET',
				data: {
					uuid: getApp().globalData.uuid,
					act: 'fabu',
					id: this.arcID
				},
				header: {
					'content-type': 'application/json',
					'sign': getApp().globalData.headerSign
				},
				success: (res) => {
					console.log("resddd", res.data);
					uni.hideLoading();
					if (res.data.success === "yes") {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						});
						// 重新加载数据
						// this.loadData();
					} else {
						uni.showToast({
							title: res.data.str || '发布失败',
							icon: 'none'
						});
					}
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '发布失败',
						icon: 'none'
					});
				}
			});
		},
		startDrag(event) {
			this.isDragging = true;
			this.startY = event.clientY;
			this.initialOffsetY = this.offsetY || 0;
		},
		stopDrag() {
			this.isDragging = false;
		},
		drag(event) {
			if (this.isDragging) {
				const deltaY = event.clientY - this.startY;
				const newOffsetY = this.initialOffsetY + deltaY;

				// Get the height of the lyrics text
				const lyricsTextHeight = this.$refs.lyricsText ? this.$refs.lyricsText.$el.clientHeight : 0;
				const imageBoxHeight = this.$refs.ImageBox ? this.$refs.ImageBox.$el.clientHeight : 0;


				// Define the threshold limits based on the height of the lyrics text
				const minY = -lyricsTextHeight + 50 + imageBoxHeight; // Allow some space above
				const maxY = lyricsTextHeight / 2;  // Allow some space below

				// Apply the limits
				this.offsetY = Math.min(Math.max(newOffsetY, minY), maxY);

				// Log the height and current offset
				console.log('Lyrics Text Height:', lyricsTextHeight);
				console.log('Current Offset Y:', this.offsetY);
				console.log(this);
			}
		},
		rgbToHex(r, g, b) {
			return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
		}
	}
}
</script>

<style scoped lang="scss">
@import 'makeDetail.scss';
.openContentPopUpWindow {
  ::v-deep.uv-textarea {
    width: 694rpx !important;
    border-radius: 20rpx !important;
    border: 1rpx solid #000000 !important;
    margin: 0 auto;
    margin-bottom: 44rpx;
	min-height: 300rpx;
  }
}

</style>