<template>
	<view class="container">
		
		<view class="select-box" v-if="commitState === 'add'">
			<view class="form-label">素材模板</view>
			<view class="form-value" @click="openMaterialShow">
				<view class="form-select">{{materialfrom.dictId?materialfrom.dictName:'请选择素材模板'}}</view>
				<u-icon name="arrow-down-fill" color="#999" size="28"></u-icon>
			</view>
		</view>
		
		<view class="form-item" v-if="commitState === 'back'">
			<text class="form-label">修改意见</text>
			<template>
				<view class="comment-box">
					{{ comment }}
				</view>
			</template>
		</view>
		
		<view class="form-item">
			<text class="form-label">剧本 <text class="form-hint">视频的剧本</text> </text>
			<!-- 文本输入 -->
			<template>
				<u-input style="max-height: 500rpx;overflow-y: auto;" :disabled="getDisabledStatus()" maxlength="9999" type='textarea' class="bg-gray" v-model="scriptContent" :placeholder="`请输入剧本`" />
			</template>
			<u-button @click="openAiDrama" type="primary" :disabled="getDisabledStatus()">Ai生成剧本</u-button>
		</view>
		
		<view v-for="(item,index) in materialTemplateList" :key="index" class="form-item">
			<text class="form-label">{{ item.attrTitle }} <text class="form-hint">{{ item.attrHint ? '(' +item.attrHint + ')' : '' }}</text> </text>
			<!-- 文本输入 -->
			<template v-if="item.attrType === 0">
				<u-input :disabled="getDisabledStatus()" class="bg-gray" v-model="item.attrValue" :placeholder="`请输入${item.attrTitle}`" />
			</template>

			<!-- 图片上传 -->
			<template v-if="item.attrType === 1">
				<view class="upload-area">
					<view v-if="item.attrValue" class="preview-wrapper">
						<image :src="item.fileUrl" mode="scaleToFill" class="preview-image" @click="previewImage(item.fileUrl)">
						</image>
						<u-icon v-if="!getDisabledStatus()" name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
					</view>
					<u-button @click="chooseImage(item,index)" type="primary" :disabled="getDisabledStatus()"
						:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传图片' }}</u-button>
				</view>
			</template>
			
			<!-- 音频上传 -->
			<template v-if="item.attrType === 2">
				<view class="upload-area">
					<view v-if="item.attrValue" class="audio-preview">
						<text class="audio-name">{{ shortenFileName(item.fileName,20) || '已上传音频文件' }}</text>
						<u-icon v-if="!getDisabledStatus()" name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
					</view>
					<u-button @click="chooseAudio(item,index)" type="primary" :disabled="getDisabledStatus()"
						:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传音频' }}</u-button>
					<!-- <text v-if="item.fileUrl" class="audio-name">已上传音频文件</text> -->
					<text class="upload-tip">{{'最大' + audioSize + 'MB'}}</text>
				</view>
			</template>

			<!-- 视频上传 -->
			<template v-if="item.attrType === 3">
				<view class="upload-area">
					<view v-if="item.attrValue" class="audio-preview">
						<!-- <video :src="item.fileUrl" class="preview-video"></video> -->
						<text class="audio-name">{{ shortenFileName(item.fileName,20) || '已上传音频文件' }}</text>
						<u-icon v-if="!getDisabledStatus()" name="close" class="delete-icon" @click="deleteFile(item.attrValue,index)"></u-icon>
					</view>
					<u-button @click="chooseVideo(item,index)" type="primary" :disabled="getDisabledStatus()"
						:loading="item.uploading">{{ item.attrValue ? '重新上传' : '上传视频' }}</u-button>
					<text class="upload-tip">{{'最大' + videoSize + 'MB'}}</text>
				</view>
			</template>
			
			<!-- 用户说明 -->
			<u-input v-if="item.attrType !== 0" :disabled="getDisabledStatus()" type="textarea" class="bg-gray" v-model="item.userExplain" placeholder="请输入素材说明" />
			<!-- 星级评分 -->
			重要级别：<u-rate v-model="item.starLevel" :disabled="getDisabledStatus()"  active-color="#f7ba2a" :count="5" />
		</view>
		<u-select v-model="materialShow" mode="single-column" :list="materialDictList" value-name="id" label-name="dictName" @confirm="changeTemplate"></u-select>
		<!-- 提交按钮 -->
		<view class="btn-box" v-if="commitState === 'add' || commitState === 'draft' || commitState === 'back'">
			<u-button type="default" :loading="buttonLoading" class="bg-grey" @click="verifyForm('draft')">暂存</u-button>
			<u-button type="primary" :loading="buttonLoading" @click="verifyForm('submit')">提交</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import config from '../../common/api/config';
	export default {
		data() {
			return {
				token: '',
				orderId: "",
				productId: "",
				orderItemId: "",
				// 素材提交状态
				commitState:'add',
				comment:'',
				materialfrom:{
					id: undefined,
					dictId: undefined,
					dictName: undefined,
					productId: undefined,
					productSn: undefined,
					flowId: undefined,
				},
				// 素材模板列表
				materialDictList:[],
				materialTemplateList:[],
				// 模板选择弹窗
				materialShow:false,
				audioSize: 10,
				videoSize: 50,
				audioType: ['.wav', '.mp3', '.aac', '.flac', '.ogg'],
				audioH5Type: ['wav', 'mp3', 'aac', 'flac', 'ogg'],
				buttonLoading:false,
				scriptContent:'',
				// videoType: ['.avi', '.mp4', '.mkv', '.flv', '.mov', '.wmv', '.mpeg', '.3gp'],
			}
		},
		onLoad(option) {
			console.log("获取参数为",option)
			this.orderId = option.orderId;
			this.productId = option.productId;
			this.orderItemId = option.orderItemId;
			this.token = uni.getStorageSync('userToken');
			this.getProductDetail();
		},
		methods: {
			getAiDramaTxt(txt){
				this.scriptContent = txt;
			},
			openAiDrama(){
				uni.navigateTo({
					url:'./AiDrama?orderId=' + this.orderItemId
				})
			},
			getDisabledStatus(){
				if(this.commitState !== 'add' && this.commitState !== 'draft' && this.commitState !== 'back'){
					return true;
				}else{
					return false;
				}
			},
			openMaterialShow(){
				this.materialShow = true;
			},
			async changeTemplate(e){
				console.log("当前选择",e)
				this.materialfrom.dictId = e[0].value;
				this.materialfrom.dictName = e[0].label;
				let res = await this.$api.orderApi.getProductMaterialDictItemList({ pageNum: 1, pageSize: 100, dictId: e[0].value, orderByColumn: 'orderNum', isAsc: 'asc' })
				this.materialTemplateList = res.rows.map((item) => {
					item.starLevel = 0;
					item.userExplain = '';
					item.attrValue = '';
					item.orderId = this.orderId;
					item.productId = this.productId;
					item.orderItemId = this.orderItemId;
					item.dictId = this.materialfrom.dictId;
					item.id = null;
					return item;
				});
			},
			async getProductDetail(){
				let res = await this.$api.orderApi.getOrderMaterialList({ orderItemId: this.orderItemId })
				if(res.rows.length!=0){
					this.materialfrom.flowId = res.rows[0].id;
					this.commitState = res.rows[0].status;
					this.comment = res.rows[0].comment || '';
					this.scriptContent = res.rows[0].script || '';
					this.materialTemplateList = res.rows[0].materialItems || [];
					res.rows[0].materialItems.forEach(async (item,index)=>{
						if(item.attrType !== 0 && item.attrValue !== ''){
							let {fileUrl,fileName} = await this.getFileDetail(item.attrValue);
							console.log("fileUrl,fileName",fileUrl,fileName)
							this.$nextTick(()=>{
								this.$set(this.materialTemplateList[index],'fileUrl',fileUrl)
								this.$set(this.materialTemplateList[index],'fileName',fileName)
							})
						}
					})
				}else{
					this.getMaterialDictList();
				}
			},
			async getFileDetail(ossId){
				let res = await this.$api.getOssDetail(ossId)
				if(res.code == 200){
					return {
						fileUrl: res.data[0].url || '',
						fileName:res.data[0].originalName || '',
					}
				}else{
					return {
						fileUrl:'',
						fileName:'',
					}
				}
			},
			async getMaterialDictList(){
				let res = await this.$api.orderApi.getProductMaterialDictList({ pageNum: 1, pageSize: 100, productId: this.productId })
				this.materialDictList = res.rows || [];
			},
			async getMaterialList(){
				let res = await this.$api.orderApi.getMallOrderProductMaterialList({ orderId: this.orderId, productId: this.productId, orderByColumn: 'orderNum', isAsc: 'asc' })
				this.materialTemplateList = res.rows || [];
			},
			shortenFileName(fileName, maxLength = 10) {
				if(fileName==undefined){
					return '';
				}
				// 检查文件名是否已经足够短
				if (fileName.length <= maxLength) {
						return fileName;
				}
				// 获取文件后缀
				const lastDotIndex = fileName.lastIndexOf('.');
				const extension = fileName.slice(lastDotIndex); // 包括点号
				// 获取文件名（不包括后缀）
				const nameWithoutExtension = fileName.slice(0, lastDotIndex);
				// 缩短文件名
				const shortenedName = nameWithoutExtension.slice(0, maxLength);
				// 返回缩短后的文件名，加上后缀
				return `${shortenedName}...${extension}`;
			},
			chooseImage(item, index) {
				this.materialTemplateList[index].uploading = true;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.uploadFile(tempFilePath, 'image', item, index);
					},
					complete: () => {
						this.materialTemplateList[index].uploading = false;
					}
				});
			},
			chooseVideo(item,index) {
				this.materialTemplateList[index].uploading = true;
				uni.chooseVideo({
					count: 1,
					maxDuration: 60,
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						const fileSize = res.size;
						if (fileSize > this.videoSize * 1024 * 1024) {
							uni.showToast({
								title: '视频大小不能超过' + this.videoSize + 'MB',
								icon: 'none'
							});
							this.materialTemplateList[index].uploading = false;
							return;
						}
						this.uploadFile(tempFilePath, 'video', item, index);
					},
					fail: (err) => {
						console.error('选择视频失败', err);
						uni.showToast({
							title: '选择视频失败',
							icon: 'none'
						});
					},
					complete: () => {
						this.materialTemplateList[index].uploading = false;
					}
				});
			},
			chooseAudio(item,index) {
				this.materialTemplateList[index].uploading = true;
				// 注意：H5不支持chooseFile，需要单独处理
				// #ifdef H5
				uni.chooseFile({
					count: 1,
					type: 'all',
					extension: this.audioType,
					success: (res) => {
						const tempFilePath = res.tempFiles[0].path;
						const fileSize = res.tempFiles[0].size;
						const fileName = res.tempFiles[0].name;
						if (fileSize > this.audioSize * 1024 * 1024) {
							uni.showToast({
								title: '音频大小不能超过' + this.audioSize + 'MB',
								icon: 'none'
							});
							this.materialTemplateList[index].uploading = false;
							return;
						}
						this.uploadFile(tempFilePath, 'audio', item, index, fileName);
					},
					fail: (err) => {
						console.error('选择音频失败', err);
						uni.showToast({
							title: '选择音频失败',
							icon: 'none'
						});
					},
					complete: () => {
						this.materialTemplateList[index].uploading = false;
					}
				});
				// #endif

				// #ifndef H5
				uni.chooseMessageFile({
					count: 1,
					type: 'file',
					extension: this.audioH5Type,
					success: (res) => {
						const tempFilePath = res.tempFiles[0].path;
						const fileSize = res.tempFiles[0].size;
						const fileName = res.tempFiles[0].name;
						if (fileSize > this.audioSize * 1024 * 1024) {
							uni.showToast({
								title: '音频大小不能超过' + this.audioSize + 'MB',
								icon: 'none'
							});
							this.materialTemplateList[index].uploading = false;
							return;
						}
						this.uploadFile(tempFilePath, 'audio', item, index, fileName);
					},
					fail: (err) => {
						console.error('选择音频失败', err);
						uni.showToast({
							title: '选择音频失败',
							icon: 'none'
						});
					},
					complete: () => {
						this.materialTemplateList[index].uploading = false;
					}
				});
				// #endif
			},
			uploadFile(filePath, fileType, item, index, fileName = '') {
				// 这里应该是您的实际上传接口
				const uploadUrl = config.baseUrl + '/resource/oss/upload';

				uni.uploadFile({
					url: uploadUrl,
					filePath: filePath,
					name: 'file',
					header: {
						'Clientid': config.clientId,
						'Authorization': 'Bearer ' + this.token
					},
					success: (uploadRes) => {
						const data = JSON.parse(uploadRes.data);
						console.log("data", data)
						// 假设服务器返回的是文件的URL
						// this.materialTemplateList[index].fileUrl = data.url
						this.materialTemplateList[index].attrValue = data.data.ossId;
						this.materialTemplateList[index].fileUrl = data.data.url;
						this.materialTemplateList[index].fileName = data.data.fileName;
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('上传失败', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
				});
			},
			deleteFile(item,index) {
				uni.showModal({
					title: '确认删除',
					content: '是否确认删除该文件？',
					success: (res) => {
						if (res.confirm) {
							this.$api.orderApi.delOssFile(this.materialTemplateList[index].attrValue)
							
							this.materialTemplateList[index].attrValue = '';
							this.materialTemplateList[index].fileUrl = '';
							this.materialTemplateList[index].fileName = '';
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
							
						}
					}
				});
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					current: 0
				});
			},
			verifyForm(status){
				console.log('提交的表单数据：', this.materialTemplateList);
				if(!this.materialfrom.dictId && this.commitState === 'add'){
					this.$refs.uToast.show({
						title: '请选择素材模板',
						type: 'error',
					})
					return;
				}
				
				if(this.materialTemplateList.length==0){
					this.$refs.uToast.show({
						title: '请选择有素材项的模板',
						type: 'error',
					})
					return;
				}
				let btnTitle = status==='draft' ?'暂存':'提交'
				uni.showModal({
					title: '操作确认',
					content: '是否要'+ btnTitle +'素材？',
					success: (res) => {
						if (res.confirm) {
							this.submitForm(status)
						}
					}
				});
				
			},
			
			async submitForm(status) {
				try {
					this.buttonLoading = true;
					// 这里添加实际的提交逻辑
					let res = null;
					if(this.commitState === 'add'){
						res = await this.$api.orderApi.AddOrderMaterial({
							orderId: this.orderId,
							productId: this.productId,
							orderItemId: this.orderItemId,
							materialItems: this.materialTemplateList,
							script: this.scriptContent
						});
						this.buttonLoading = false;
						this.materialfrom.flowId = res.data.id;
						this.getProductDetail();
					}else{
						res = await this.$api.orderApi.EditOrderMaterial({
							orderId: this.orderId,
							productId: this.productId,
							orderItemId: this.orderItemId,
							materialItems: this.materialTemplateList,
							script: this.scriptContent,
							id: this.materialfrom.flowId
						});
						this.buttonLoading = false;
					}
					
					if (status === 'draft') {
						if (res.code === 200) {
							this.$refs.uToast.show({
								title: '暂存成功',
								type: 'success',
							})
						}
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.buttonLoading = true;
						//  提交，调用完成接口
						let res1 = await this.$api.orderApi.mallMaterialCommit(this.orderItemId);
						if (res1.code === 200) {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
							})
						}
						this.buttonLoading = false;
			
						uni.navigateBack({
							delta: 1
						})
					}
					
				} finally {
					this.buttonLoading = false;
				}
				
			}
		}
	}
</script>

<style>
	page{
		background: #f5f5f5;
	}
</style>
<style lang="scss">
	.container {
		padding: 20rpx;
		padding-bottom: 120rpx;
	}
	.bg-gray{
		background: #f8f8f8;
		margin-bottom: 20rpx;
	}
	.select-box{
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.form-value{
			padding: 10rpx;
			border: 1px solid #c6c6c6;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.comment-box{
	  background-color: rgb(254,242,242);
	  border: 1px solid rgb(254,226,226);
	  border-radius: 0.5rem;
	  padding: 1rem;
	  width: 100%;
		color: red;
		font-size: 36rpx;
	}

	.form-item {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.form-label {
		display: block;
		margin-bottom: 10rpx;
		font-weight: bold;
		.form-hint{
			font-size: 20rpx;
			color: #999;
			margin-left: 6rpx;
		}
	}

	.upload-area {
		// display: flex;
		// flex-direction: column;
		// align-items: flex-start;
		margin-bottom: 10rpx;
	}

	.preview-wrapper {
		margin: 0 auto;
		position: relative;
		width: 200rpx; 
		height: 200rpx; 
		background-color: #eeeeee;
		margin-bottom: 10rpx;
		.preview-image{
			width: 100%;
			height: 100%;
		}
		.delete-icon {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			background-color: #fa3534;
			color: #fff;
			font-size: 20rpx;
			border-radius: 50%;
			padding: 10rpx;
		}
	}

	.preview-video {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 10rpx;
	}


	

	.audio-preview {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		position: relative;
		border: 1px solid #999;
		border-radius: 10rpx;
		padding: 5rpx 10rpx;
		.audio-name {
			margin-right: 10rpx;
			font-size: 24rpx;
			color: #888;
		}
		.delete-icon {
			color: #888;
			font-size: 28rpx;
			padding: 10rpx;
		}
	}

	

	.upload-tip {
		margin-top: 5rpx;
		font-size: 24rpx;
		color: #999;
	}
	.btn-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 120rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 999;
		button{
			width: 340rpx;
			height: 85rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>