<template>
	<view class="container">
		<custom-navbar :title="pagestitle" :leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="#fff"
			titleColor="#000" borderBottom="none">
			<template #right>
				<text class="custom-right" @click="toggleManage">{{ isManage ? '取消' : '管理' }}</text>
			</template>
		</custom-navbar>
		<view class="review">
			<view class="review-title">
				<text class="review-title-text">添加{{pagestitle}}，吸引更多顾客到店消费</text>
			</view>
		</view>
		<view class="container-card">

			<view class="card-content flex-row-center" v-if="type==1">
				<view class="card-content-page" v-if="class_type!=1">{{ imgVideoList.length }}/20张</view>
				<view class="content-default" @click="goAdd(class_type)"
					v-if="!(class_type == 1 && imgVideoList && imgVideoList.length)">
					<image class="content-default-img" src="/static/images/icons/addPhoto.png"></image>
					<text class="content-default-text">添加照片</text>
				</view>
				<view class="content-photo" v-for="(item2,index2) in imgVideoList" :key="index2" v-if="imgVideoList"
					@click="isManage ? toggleSelect(index2) : goAdd(class_type,item2)">
					<!-- 选择框 -->
					<image class="content-photo-select" v-if="isManage"
						:src="selectedItems.includes(index2) ? '/static/images/icons/yes_icon.png' : '/static/images/icons/no_icon2.png'">
					</image>
					<image class="content-photo-img" mode="aspectFill" :src="getItem(item2).url"></image>
					<view class="content-photo-title">
						{{ getItem(item2).name }}
					</view>
					<view class="content-photo-mask" v-if="item2.apply_state==1">
						<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/time.png"></image>
						<text class="photo-mask-text">审核中…</text>
					</view>
				</view>
			</view>
			<view class="card-content flex-row-center" v-else>
				<view class="card-content-page">{{ imgVideoList.length }}/10张</view>
				<view class="content-default content-default2" @click="goAdd(class_type)"
					v-if="!(class_type == 1 && imgVideoList && imgVideoList.length)">
					<image class="content-default-img" src="/static/images/icons/addPhoto.png"></image>
					<text class="content-default-text">添加视频</text>
				</view>
				<view class="content-photo content-video" v-for="(item2,index2) in imgVideoList" :key="index2"
					v-if="imgVideoList" @click="isManage ? toggleSelect(index2) : goAdd(class_type,item2)">
					<!-- 选择框 -->
					<image class="content-photo-select" v-if="isManage"
						:src="selectedItems.includes(index2) ? '/static/images/icons/yes_icon.png' : '/static/images/icons/no_icon2.png'">
					</image>
					<image class="content-photo-video" mode="aspectFill" :src="getItem(item2).url"></image>
					<view class="content-photo-title">
						{{ getItem(item2).name }}
					</view>
					<view class="content-photo-play">
						<image class="content-photo-play-img" mode="aspectFill" src="/static/images/icons/play.png">
						</image>
					</view>
					<view class="content-photo-mask" v-if="item2.apply_state==1">
						<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/time.png"></image>
						<view class="photo-mask-text">审核中…</view>
					</view>
					<view class="content-photo-mask" v-if="item2.apply_state==3">
						<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/close2.png"></image>
						<view class="photo-mask-text">已驳回</view>
					</view>
				</view>
			</view>
		</view>

		<view class="container-buttons flex-row-center-center" v-if="isManage">
			<view class="container-buttons-sure2 flex-row-center-center" @click="handleDelete">删除</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				imgVideoList: [],
				type: 2, //1图片 2视频
				class_type: 4, //1主(图片/视频) 2环境(图片/视频) 3作品(图片/视频) 4其它(图片/视频)
				isManage: false, // 管理模式状态
				selectedItems: [], // 选中的项索引数组
				pagestitle: "店铺图片"
			}
		},
		async onShow() {
			await this.getList()
		},
		async onLoad(options) {
			console.log(options, '查看option');
			if (options.type) {
				this.type = options.type
			}
			if (options.id) {
				this.class_type = options.id
				if (this.class_type == 2) {
					this.pagestitle = "环境图片"
				} else if (this.class_type == 3) {
					this.pagestitle = "作品图片"
				} else if (this.class_type == 4) {
					this.pagestitle = "其它图片"
				} else {
					this.pagestitle = "店铺图片"
				}
			}
		},
		methods: {
			// 切换管理/取消模式
			toggleManage() {
				this.isManage = !this.isManage;
				if (!this.isManage) {
					this.selectedItems = []; // 退出管理模式时清空选中项
				}
			},
			// 切换选中状态
			toggleSelect(index) {
				console.log(1111, index)
				if (this.selectedItems.includes(index)) {
					// 已选中，移除
					this.selectedItems = this.selectedItems.filter(i => i !== index);
				} else {
					// 未选中，添加
					this.selectedItems.push(index);
				}
			},
			// 批量删除
			async handleDelete() {
				// 收集选中项的ID
				let deleteIds = this.selectedItems.map(index => this.imgVideoList[index].id);
				let auth_ids = this.selectedItems.map(index => this.imgVideoList[index].auth_id).filter(item =>
					item !== 0);
				console.log(1111, deleteIds, auth_ids, [1, 6])
				try {
					const res = await request.post("/sj/imgVideo/del", {
						ids: deleteIds,
						auth_ids: auth_ids
					});
					if (res.code == 200) {
						// 重新获取列表
						await this.getList();
						// 退出管理模式
						this.isManage = false;
						this.selectedItems = [];
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			},
			goAdd(id, item) {
				if (this.isManage) return; // 管理模式下禁止跳转
				if (this.type == 1) {
					if (this.imgVideoList.length >= 20) {
						uni.showToast({
							title: '最多上传20张图片',
							icon: 'none',
							duration: 2000
						});
						return
					}
				} else if (this.type == 2) {
					if (this.imgVideoList.length >= 10) {
						uni.showToast({
							title: '最多上传10张视频',
							icon: 'none',
							duration: 2000
						});
						return
					}
				}
				if (!id) {
					uni.showToast({
						title: '参数异常，无法上传',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				let url = `/pages/shop/photoAlbum/addPhoto?id=${id}&type=${this.type}`;
				if (item) {
					url += `&item=${encodeURIComponent(JSON.stringify(item))}`;
				}
				uni.navigateTo({
					url: url
				});
			},
			getItem(item) {
				let obj = {
					name: "",
					url: ""
				}
				if (item.apply_state == 1) {
					obj.url = item.auth_url
					obj.name = item.auth_name
				} else {
					obj.url = item.url || item.auth_url
					obj.name = item.name || item.auth_name
				}
				if (item.type == 2) {
					obj.url = obj.url + `?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto`
				}
				return obj
			},
			async getList() {
				try {
					const res = await request.post("/sj/imgVideo/list", {
						type: this.type,
						class_type: this.class_type
					});
					// 核心修复：逐层可选链保护 + 兜底空数组，彻底避免属性访问错误
					this.imgVideoList = res.code === 200 ?
						res.data?.list?.[this.type]?.[this.class_type] || [] : [];
				} catch (err) {
					// 网络错误、接口报错等所有异常的兜底处理
					console.error("获取媒体列表失败：", err);
					this.imgVideoList = [];
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		.custom-right {
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			line-height: 37rpx;
			text-align: left;
			font-style: normal;
			white-space: nowrap;
		}

		.review {
			background: rgba(255, 250, 218, 1);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin: 20rpx;
			padding: 20rpx 20rpx 20rpx 20rpx;

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

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

		}

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

			.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-header-right {
					.card-header-right-text {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						line-height: 30rpx;
						text-align: left;
						font-style: normal;
					}

					.card-header-right-img {
						width: 8rpx;
						height: 16rpx;
						margin-left: 7rpx;
					}
				}
			}

			.card-content {
				gap: 14rpx;
				flex-wrap: wrap;

				.card-content-page {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					width: 100%;
				}

				.content-default {
					width: 214rpx;
					height: 214rpx;
					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: 328rpx;
					height: 186rpx;
					background: #F5F5F5;
					border-radius: 17rpx;
				}

				.content-photo {
					box-sizing: border-box;
					width: 214rpx;
					height: 214rpx;
					border-radius: 20rpx;
					position: relative;
					overflow: hidden;

					// 选择框样式
					.content-photo-select {
						position: absolute;
						top: 12rpx;
						right: 14rpx;
						width: 36rpx;
						height: 36rpx;
						z-index: 999;
					}

					.content-photo-img {
						width: 214rpx;
						height: 214rpx;
						border-radius: 20rpx;
					}

					.content-photo-video {
						width: 328rpx;
						height: 186rpx;
						border-radius: 20rpx;
					}

					.content-photo-title {
						background: rgba(51, 51, 51, 0.6);
						padding: 6rpx 0 4rpx 0;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						font-weight: 400;
						font-size: 15rpx;
						color: #CACACA;
						line-height: 21rpx;
						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;
						}
					}

					.content-photo-mask {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						background: rgba(0, 0, 0, 0.3);
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						border-radius: 20rpx;

						.photo-mask-img {
							width: 36rpx;
							height: 36rpx;
							margin-bottom: 8rpx;
						}

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

				.content-video {
					width: 328rpx;
					height: 186rpx;
				}
			}
		}
	}


	.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;
		}
	}
</style>