<template>
	<view class="container">
		<custom-navbar :title="pageTexts[formData.type][formData.class_type].title1"
			:leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="#fff" titleColor="#000"
			borderBottom="none"></custom-navbar>

		<view class="review" v-if="imgItem.apply_state==1">
			<view class="review-title">
				<text class="review-title-text">审核中…</text>
			</view>
			<text class="review-text">预计24小时完成审核，通过后将自动生效</text>
		</view>
		<view class="review" v-if="imgItem.apply_state==2">
			<view class="review-title">
				<text class="review-title-text">审核成功<text style="color: #E8101E;">、线上展示中</text></text>
			</view>
		</view>
		<view class="review" v-if="imgItem.apply_state==3">
			<view class="review-title">
				<text class="review-title-text">已驳回…</text>
			</view>
			<text class="review-text" v-if="imgItem.back_text">驳回原因：{{ imgItem.back_text }}</text>
		</view>

		<view :class="{haveReview:imgItem.apply_state}">
			<view class="container-card">
				<view class="card-header">
					<text class="card-title">{{ pageTexts[formData.type][formData.class_type].title2 }}</text>
					<text class="card-title2">({{ formData.type==1?"上传1张照片":"上传1个视频" }})</text>
				</view>
				<view class="card-content flex-row-center-center" v-if="formData.type==1">
					<view class="card-content-container">
						<image v-if="formData.url" :src="formData.url" mode="aspectFill" class="preview-image"></image>
						<view class="content-default" @click="chooseImage" v-else>
							<image class="content-default-img" src="/static/images/icons/addPhoto.png"></image>
							<text class="content-default-text">添加照片</text>
						</view>
						<view class="content-photo-title" v-if="formData.url" @click.stop="chooseImage">
							替换图片
						</view>
					</view>

				</view>
				<view class="card-content flex-row-center-center" v-else>
					<view class="card-content-container">
						<image v-if="formData.url" @click="goVideo"
							:src="formData.url+`?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto`"
							mode="aspectFill" class="preview-video"></image>
						<view class="content-default2" @click="chooseImage" v-else>
							<image class="content-default2-img" src="/static/images/icons/addPhoto.png"></image>
							<text class="content-default2-text">添加视频</text>
						</view>
						<view class="content-photo-title" @click.stop="chooseImage" v-if="formData.url">
							替换视频
						</view>
						<view class="content-photo-play" v-if="formData.url">
							<image class="content-photo-play-img" mode="aspectFill" src="/static/images/icons/play.png">
							</image>
						</view>
					</view>

				</view>
			</view>

			<view class="container-card">
				<view class="card-header">
					<text class="card-title">{{ formData.type==1?"图片名称":"视频名称" }}</text>
				</view>
				<view class="card-content">
					<view class="card-content-input">
						<input maxlength="6" :placeholder="formData.type==1?`请输入图片名称`:`请输入视频名称`" v-model="formData.name"
							placeholder-class="inputClass" :disabled="disabled" />
					</view>

				</view>
			</view>
		</view>



		<!-- <view class="container-buttons flex-row-center-center" v-if="">
			<view class="container-buttons-cancel flex-row-center-center">取消</view>
			<view class="container-buttons-sure flex-row-center-center" @click="submitPhoto">提交</view>
		</view> -->
		<view class="container-buttons flex-row-center-center" v-if="imgItem.apply_state">
			<view class="container-buttons-sure2 flex-row-center-center" v-if="disabled==true"
				@click="disabled = false">编辑</view>
			<view class="container-buttons-cancel flex-row-center-center" v-if="disabled==false"
				@click="disabled = true">取消</view>
			<view class="container-buttons-sure flex-row-center-center" @click="editPhoto" v-if="disabled==false">提交
			</view>
		</view>

		<view class="container-buttons flex-row-center-center" v-else>
			<view class="container-buttons-sure2 flex-row-center-center" @click="submitPhoto">提交</view>
		</view>

		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xc' }">
			<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
		</view>
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xj' }">
			<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
		</view>

		<video v-show="videoPlay" :src="videoUrl" controls id="myvideo"
			style="height: 0; width: 0; position: absolute; top: -999rpx; left: -999rpx;"
			@fullscreenchange="screenChange"></video>
		<uv-divider></uv-divider>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import uploadImage from '@/utils/albumUploadImage';
	import permissionUtils from '@/utils/per';
	import locationService from '@/utils/locationService';
	export default {
		components: {

		},
		data() {
			return {
				videoContext: null,
				videoPlay: false,
				videoUrl: "",
				disabled: false,
				isShowPer: false,
				nowQer: 'xc',
				formData: {
					name: "",
					url: "",
					class_type: 1, //1主(图片/视频) 2环境(图片/视频) 3作品(图片/视频) 4其它(图片/视频)
					type: 1, //1图片 2视频
				},
				pageTexts: {
					1: {
						1: {
							title1: '添加店铺图片',
							title2: '店铺主图',
						},
						2: {
							title1: '添加环境图片',
							title2: '环境图片',
						},
						3: {
							title1: '添加作品图片',
							title2: '作品图片',
						},
						4: {
							title1: '添加其它图片',
							title2: '其它图片',
						},
					},
					2: {
						1: {
							title1: '添加店铺视频',
							title2: '店铺主视频',
						},
						2: {
							title1: '添加环境视频',
							title2: '环境视频',
						},
						3: {
							title1: '添加作品视频',
							title2: '作品视频',
						},
						4: {
							title1: '添加其它视频',
							title2: '其它视频',
						},
					},
				},
				userInfo: {},
				isSubmitting: false,
				imgItem: {}
			}
		},
		async onLoad(options) {
			if (options.id) {
				this.formData.class_type = options.id;
			}
			if (options.type) {
				this.formData.type = options.type;
			}
			if (options.item) {
				try {
					this.imgItem = JSON.parse(decodeURIComponent(options.item));
					this.formData.name = this.imgItem.auth_name
					this.formData.url = this.imgItem.auth_url
					this.formData.id = this.imgItem.id
					this.formData.auth_id = this.imgItem.auth_id
					this.disabled = true
				} catch (e) {

				}
			}
			let type = 3;
			let result = await request.post("/user/getuser", {
				type,
			});
			this.userInfo = result.data;
		},
		methods: {
			screenChange(e) {

				let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
				console.log(e, "全屏");
				if (!fullScreen) {
					//退出全屏
					this.videoContext.pause()
					plus.screen.lockOrientation('portrait-primary');
					this.videoPlay = false; // 隐藏播放盒子
				}
			},
			goVideo() {
				// let urls = [this.formData.url]
				// uni.navigateTo({
				// 	url: `/pages/album/list?urls=${encodeURIComponent(JSON.stringify(urls))}`
				// });
				// this.videoPlay = true; // 显示播放盒子
				// this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
				// this.videoUrl = this.formData.url;
				// this.videoContext.requestFullScreen({
				// 	direction: 90
				// });
				// this.videoContext.play();
				uni.navigateTo({
					url: '/pages/shop/photoAlbum/videoplayer?url=' + this.formData.url
				})

			},
			async submitPhoto() {
				// 1. 防连点核心逻辑：如果正在提交中，直接return阻止后续执行
				if (this.isSubmitting) return;
				console.log(this.formData, 'this.formData');
				// 2. 表单必填项校验：校验图片和名称是否填写
				if (!this.formData.url) {
					if (this.formData.type == 1) {
						if (this.formData.class_type == 1) {
							uni.showToast({
								title: '请先上传店铺主图',
								icon: 'none',
								duration: 2000
							});
						} else if (this.formData.class_type == 2) {
							uni.showToast({
								title: '请先上传环境图片',
								icon: 'none',
								duration: 2000
							});
						} else if (this.formData.class_type == 3) {
							uni.showToast({
								title: '请先上传作品图片',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '请先上传其它图片',
								icon: 'none',
								duration: 2000
							});
						}
					} else if (this.formData.type == 2) {
						if (this.formData.class_type == 1) {
							uni.showToast({
								title: '请先上传店铺主视频',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '请先上传其它视频',
								icon: 'none',
								duration: 2000
							});
						}
					}
					// uni.showToast({
					// 	title: '请先上传图片/视频',
					// 	icon: 'none',
					// 	duration: 2000
					// });
					return
				}
				if (!this.formData.name || this.formData.name.trim() === '') {
					uni.showToast({
						title: '请输入图片名称',
						icon: 'none',
						duration: 2000
					});
					return
				}

				try {
					// 3. 开启提交锁 + 显示加载中提示
					this.isSubmitting = true;
					uni.showLoading({
						title: '提交中...',
						mask: true
					});

					// 4. 提交接口请求 【修复原代码传参BUG：formData → this.formData】
					const res = await request.post("/sj/imgVideo/add", this.formData);

					if (res.code == 200) {
						// 5. 提交成功：提示 + 延时返回上一页（用户能看到提示）
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							}); // 返回上一级页面，核心需求
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}

				} catch (err) {
					// 6. 提交失败：异常提示
					console.error('图片提交失败：', err);
					uni.showToast({
						title: '提交失败，请稍后重试',
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 7. 核心兜底：无论成功/失败/报错，都关闭加载 + 释放提交锁
					uni.hideLoading();
					this.isSubmitting = false;
				}
			},
			async editPhoto() {
				// 1. 防连点核心逻辑：如果正在提交中，直接return阻止后续执行
				if (this.isSubmitting) return;

				// 2. 表单必填项校验：校验图片和名称是否填写
				if (!this.formData.url) {
					uni.showToast({
						title: '请先上传店铺主图',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (!this.formData.name || this.formData.name.trim() === '') {
					uni.showToast({
						title: '请输入图片名称',
						icon: 'none',
						duration: 2000
					});
					return
				}

				try {
					// 3. 开启提交锁 + 显示加载中提示
					this.isSubmitting = true;
					uni.showLoading({
						title: '提交中...',
						mask: true
					});

					// 4. 提交接口请求 【修复原代码传参BUG：formData → this.formData】
					const res = await request.post("/sj/imgVideo/edit", this.formData);

					if (res.code == 200) {
						// 5. 提交成功：提示 + 延时返回上一页（用户能看到提示）
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							}); // 返回上一级页面，核心需求
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				} catch (err) {
					// 6. 提交失败：异常提示
					console.error('图片提交失败：', err);
					uni.showToast({
						title: '提交失败，请稍后重试',
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 7. 核心兜底：无论成功/失败/报错，都关闭加载 + 释放提交锁
					uni.hideLoading();
					this.isSubmitting = false;
				}
			},
			// 打开相机
			async openCamera() {
				this.isShowPer = false;
				let res = null

				try {
					// uni.showLoading({
					// 	title: '上传中'
					// })
					console.log(this.formData, '=============================');
					if (this.formData.type == 1) {
						res = await uploadImage.handleUpload(this.userInfo.id, 3);
					} else {
						res = await uploadImage.handleUpload(this.userInfo.id, 3, ['album', 'camera'],
							'video');
					}
					console.log('上传单张图片', res)
					this.formData.url = res;
				} catch (err) {
					if (err.errMsg && (err.errMsg.includes('cancel')||err.errMsg.includes('取消'))) {
						uni.showToast({
							title: '取消上传',
							icon: 'none'
						});
					} else {
						console.error('上传失败：', err.errMsg);
						uni.showToast({
							title: err.errMsg || '上传失败',
							icon: 'none'
						}); // 新增：上传失败提示
					}

				} finally {
					uni.hideLoading(); // 移到这里，必执行
				}
			},
			// 显示权限说明弹窗
			showPermissionDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title,
						content,
						confirmText: '去开启',
						success(res) {
							resolve(res.confirm);
						}
					});
				});
			},
			// 选择图片
			async chooseImage() {
				if (this.disabled) return
				try {
					const systemInfo = uni.getSystemInfoSync()
					if (systemInfo.platform === 'ios') {
						this.openCamera();
					} else {
						let xcpermission = '';
						let xjpermission = '';
						if (systemInfo.platform === 'ios') {
							xcpermission = 'photo_library',
								xjpermission = 'camera'
						} else {
							xcpermission =
								`android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
							xjpermission = 'android.permission.CAMERA'
						}
						const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
						const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
						if (xcfirstRequest || xjfirstRequest) {
							this.isShowPer = true;
						}

						// 1. 检查权限
						// const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
						this.nowQer = 'xc';
						const xc = await permissionUtils.checkPermission('photo_library',
							'需要相册权限用于上传照片');
						this.nowQer = 'xj';
						const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
						this.isShowPer = false;
						this.nowQer = '';
						if (xc.granted && xj.granted) {
							this.openCamera();
							return;
						}

						// 2. 显示权限说明弹窗
						const confirm = await this.showPermissionDialog(
							'相机相册权限申请',
							'我们需要访问您的相机以及相册以完成更换头像功能'
						);

						if (!confirm) return;

						// 3. 请求权限
						const result1 = await permissionUtils.requestPermission('photo_library',
							'我们需要访问您的相册以上传图片/视频');
						const result2 = await permissionUtils.requestPermission('camera',
							'我们需要访问您的相机以上传图片/视频');
						if (result1 && result2) {
							this.openCamera();
						} else {
							locationService.openAppSettings();
							// uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
						}
					}
				} catch (err) {
					console.log(err)
				}
			},
		}
	}
</script>

<style lang="less">
	.container {
		.review {
			background: #FAE7EC;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin: 20rpx;
			padding: 26rpx 20rpx 30rpx 20rpx;

			.review-title {
				margin-bottom: 6rpx;

				.review-title-text {
					font-weight: 500;
					font-size: 28rpx;
					color: #E8101E;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.review-text {
				font-weight: 400;
				font-size: 24rpx;
				color: #A43F45;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.container-card {
			border-radius: 20rpx;
			margin: 20rpx;
			padding: 20rpx 20rpx 30rpx 20rpx;
			background: #fff;

			.card-header {
				margin-bottom: 20rpx;

				.card-title {
					font-weight: 500;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
				}

				.card-title2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					margin-left: 10rpx;
				}

			}

			.card-content {
				.card-content-container {
					position: relative;
					display: flex;
					overflow: hidden;
					border-radius: 20rpx;
				}

				.preview-image {
					width: 370rpx;
					height: 278rpx;
					border-radius: 20rpx;
				}

				.preview-video {
					width: 520rpx;
					height: 220rpx;
					border-radius: 20rpx;
				}

				.content-default {
					width: 370rpx;
					height: 278rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.content-default-img {
						width: 42rpx;
						height: 35rpx;
						margin-bottom: 8rpx;
					}

					.content-default-text {
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
						line-height: 30rpx;
						text-align: left;
						font-style: normal;
						display: block;
					}
				}

				.content-default2 {
					width: 520rpx;
					height: 220rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.content-default2-img {
						width: 42rpx;
						height: 35rpx;
						margin-bottom: 8rpx;
					}

					.content-default2-text {
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
						line-height: 30rpx;
						text-align: left;
						font-style: normal;
						display: block;
					}
				}

				.content-photo-title {
					background: rgba(51, 51, 51, 0.6);
					padding: 8rpx 0 6rpx 0;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: center;
					font-style: normal;
				}

				.content-photo-play {
					width: 25rpx;
					height: 25rpx;
					position: absolute;
					right: 10rpx;
					top: 6rpx;

					.content-photo-play-img {
						width: 25rpx;
						height: 25rpx;
					}
				}

				.card-content-input {
					width: 670rpx;
					height: 76rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 18rpx 20rpx;

					.inputClass {
						font-weight: 400;
						font-size: 28rpx;
						color: #BFBFBF;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

		}

		.haveReview {
			transform: translateY(-30rpx);
		}

		.container-buttons {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx 0;
			background: #FFFFFF;
			gap: 60rpx;

			.container-buttons-cancel {
				width: 278rpx;
				height: 98rpx;
				border-radius: 49rpx;
				border: 1rpx solid #E8101E;
				font-weight: 400;
				font-size: 32rpx;
				color: #E8101E;
				text-align: center;
				font-style: normal;
			}

			.container-buttons-sure {
				width: 278rpx;
				height: 98rpx;
				background: #E8101E;
				border-radius: 49rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
			}

			.container-buttons-sure2 {
				width: 710rpx;
				height: 98rpx;
				background: #E8101E;
				border-radius: 49rpx;
				font-weight: 400;
				font-size: 38rpx;
				color: #FFFFFF;
				text-align: left;
				font-style: normal;
			}
		}
	}


	/* APP适配 */
	/* #ifdef APP-PLUS */
	.permission.transform {
		top: calc(var(--status-bar-height) + 108rpx + 20rpx);
		opacity: 1;
		visibility: visible;
	}

	/* #endif */
</style>