<template>
	<view class="container">
		<custom-navbar :title="pagestitle" :leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="#fff"
			titleColor="#000" borderBottom="none"></custom-navbar>
		<view class="container-titles flex-row-center-between">
			<view class="titles-left">
				<view class="titles-bar"></view>
				<text class="titles-title">{{ titleList[type].title2 }}</text>
			</view>
			<view class="titles-right" @click="todetail">
				<text class="titles-text">展示位置及拍摄技巧</text>
				<image
					src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b153e8d5-37b1-4205-a4a1-9f6603f30c2a.png"
					mode="widthFix" style="width: 24rpx;margin-top: 4rpx;margin-left: 6rpx;"></image>
			</view>
		</view>
		<view class="container-card" v-for="(item,index) in cardList[type]" :key="index">
			<view class="card-header flex-row-center-between">
				<text class="card-title">{{ item.title }}</text>
				<view class="card-header-right" @click="goList(item.id)">
					<text class="card-header-right-text">查看全部</text>
					<image class="card-header-right-img" src="/static/images/icons/right_gray14.png"></image>
				</view>
			</view>
			<view class="card-content flex-row-center" v-if="type==1">
				<view class="content-default" @click="goAdd(item.id)"
					v-if="!(item.id == 1 && imgVideoList[item.id] && imgVideoList[item.id].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[item.id]" :key="index2"
					v-if="imgVideoList[item.id]" @click="goAdd(item.id,item2)">
					<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 && item2.id==0">
						<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/time.png"></image>
						<text class="photo-mask-text">审核中…</text>
					</view>
					<view class="content-photo-mask" v-if="item2.apply_state==3 && item2.id==0">
						<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/close2.png"></image>
						<view class="photo-mask-text">已驳回</view>
					</view>
				</view>
			</view>
			<view class="card-content flex-row-center" v-else>
				<view class="content-default content-default2" @click="goAdd(item.id)"
					v-if="!(item.id == 1 && imgVideoList[item.id] && imgVideoList[item.id].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[item.id]" :key="index2"
					v-if="imgVideoList[item.id]" @click="goAdd(item.id,item2)">
					<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>

					<!-- <video class="content-photo-video" loop="true" :controls="false" :autoplay="true" :muted="true"
						:src="item2.url || item2.auth_url">
					</video> -->
					<view class="content-photo-mask" v-if="item2.apply_state==1 && item2.id==0">
						<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 && item2.id==0">
						<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>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				cardList: {
					1: [{
							title: "店铺主图",
							id: 1
						},
						{
							title: "环境图片",
							id: 2
						},
						{
							title: "作品展示",
							id: 3
						},
						{
							title: "其他",
							id: 4
						}
					],
					2: [{
							title: "店铺主视频",
							id: 1
						},
						{
							title: "其他",
							id: 4
						}
					],
				},
				titleList: {
					1: {
						title: "商家图片",
						title2: "商家相册"
					},
					2: {
						title: "视频作品",
						title2: "商家视频"
					},
				},
				imgVideoList: {

				},
				type: 2, //1图片 2视频
				pagestitle: '店铺图片'
			}
		},
		async onShow() {
			await this.getList()
		},
		async onLoad(options) {
			console.log(options, 'options');
			if (options.type) {
				this.type = options.type
				if (this.type == 1) {
					this.pagestitle = '店铺图片'
				} else {
					this.pagestitle = "店铺视频"
				}
			}
		},
		methods: {
			todetail() {
				console.log('详情');
				// uni.navigateTo({
				// 	url: '/pages/shop/skill-detail'
				// })
				uni.navigateTo({
					url: `/pages/agreement/agreement?type=${this.type==1?22:23}&title=${this.type==1?`相册配置说明`:`视频配置说明`}`
				})
			},
			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.id == 0) {
					obj.url = item.url || item.auth_url
					obj.name = item.name || item.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
			},
			goList(id) {
				console.log(id, 'ididididididi');
				uni.navigateTo({
					url: `/pages/shop/photoAlbum/videoList?id=${id}&type=${this.type}`
				});
				// let urls = []
				// this.imgVideoList[id].forEach(item=>{
				// 	urls.push(item.auth_url)
				// })
				// console.log(111111,urls)
				// uni.navigateTo({
				// 	url: `/pages/album/list?urls=${encodeURIComponent(JSON.stringify(urls))}`
				// });
			},
			goAdd(id, item) {
				if (!item) {
					if (this.type == 1) {
						if (this.imgVideoList[id] && this.imgVideoList[id].length >= 20) {
							uni.showToast({
								title: '最多上传20张图片',
								icon: 'none',
								duration: 2000
							});
							return
						}
					} else if (this.type == 2) {
						if (this.imgVideoList[id] && this.imgVideoList[id].length >= 10) {
							uni.showToast({
								title: '最多上个10张视频',
								icon: 'none',
								duration: 2000
							});
							return
						}
					}
				}

				// 1. 原有逻辑：分类id为空，拦截提示
				if (!id) {
					uni.showToast({
						title: '参数异常，无法上传',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// // 2. 原有逻辑：有图片对象且有auth_url → 审核中提示，禁止跳转
				// if (item && item.auth_url) {
				// 	uni.showToast({
				// 		title: '图片审核中',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return
				// }

				// 3. ✅ 核心新增：把【id + item对象】一起拼接到跳转地址上
				// 注意：uni-app/小程序 路由传对象，必须用 JSON.stringify 转成字符串，否则传参失败！
				let url = `/pages/shop/photoAlbum/addPhoto?id=${id}&type=${this.type}`;
				// 如果item有值，就拼接序列化后的item对象；无值则只传id
				if (item) {
					url += `&item=${encodeURIComponent(JSON.stringify(item))}`;
				}

				// 4. 跳转页面
				uni.navigateTo({
					url: url
				});
			},
			async getList() {
				try {
					const res = await request.post("/sj/imgVideo/list", {
						type: this.type
					});
					// 核心修复：保留imgVideoList对象结构，可选链避免属性不存在，默认值确保始终为对象
					this.imgVideoList = res.data?.list?.[this.type] || {};
					// 若接口返回格式为res.data.list[this.type]是对应类型的id数据，需调整为：
					// this.imgVideoList = res.data?.list?.[this.type] || {};
				} catch (err) {
					// 网络错误等异常处理，确保imgVideoList始终为对象
					console.error("获取图片/视频列表失败：", err);
					this.imgVideoList = {};
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		.container-titles {
			margin: 30rpx 30rpx 20rpx 23rpx;

			.titles-left {
				display: flex;
				align-items: center;

				.titles-bar {
					width: 6rpx;
					height: 30rpx;
					background-color: #E8101E;
					margin-right: 10rpx;
					border-radius: 5rpx;
				}

				.titles-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #1D2129;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.titles-right {
				display: flex;

				.titles-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #986E4A;
					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-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;

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

		}
	}
</style>