<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view class="bg" v-if="headImg">
		<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image>
		
		<view class="main-container">
			<view class="coupon-box">
				<view class="rule" @click="goRule(6)"></view>
				<view class="coupon-box-between">
					<image :class="['coupon-img']" v-for="(item,i) in couponList" :key="i"
					src="https://static.ticket.sz-trip.com/uploads/20250923/c8c424bcc49f084ba754c69e4934349b.png" 
					@click="getCoupon(item)" mode="heightFix"></image>
				</view>
			</view>

			<view class="type-container">
				<view class="type-item" @click="typeIndex=i" v-for="(item,i) in typeList" :key="i">
					<image :class="['type-item',typeIndex==i?'active':'']" v-show="typeIndex==i" :src="item.imgs" mode="widthFix"></image>
					<image :class="['type-item',typeIndex==i?'active':'']" v-show="typeIndex!=i" :src="item.img" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="prod-container">
				<image @click="showJudgeImg()" class="judge-btn" mode="widthFix" v-if="typeIndex==0" src="https://static.ticket.sz-trip.com/uploads/20250926/44091fc646c20b76a826cebd9820a50f.png"></image>
				
				<view class="prod-top" :style="{'background-image':`url(${typeList[typeIndex].bgImg})`}">
					<view class="xie-type" v-if="typeIndex==0">
						<view class="xie-type-item" @click="xieTypeIndex=0">
							<image v-show="xieTypeIndex==1" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/12e47551b09f9779cbca31e7502d2459.png"></image>
							<image v-show="xieTypeIndex==0" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/0bf77d1ae17523c54be54012799ef71a.png"></image>
						</view>
						<view class="xie-type-item"  @click="xieTypeIndex=1">
							<image v-show="xieTypeIndex==0" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/a326d712879371258fab73d6fb52da70.png"></image>
							<image v-show="xieTypeIndex==1" mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20250926/b544167679d48b610189e505fa18b94d.png"></image>
						</view>
					</view>
				</view>
				<view class="prod-box flex-between" v-if="typeIndex!=2">
					<view v-if="typeIndex==0" style="width: 100%;height: 10rpx;"></view>
					<template v-if="typeIndex==0&&xieTypeIndex==1">
						<view class="column-product"  @click="gotoDetailByType(item)" :key="index"
							v-for="(item,index) in xieList.list.slice(0,xieList.viewNum)">
							<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image>
							<view class="content flex-column">
								<view class="title text-overflowRows">{{item.title}}</view>
								<view class="flex-between">
									<view class="price">{{item.price/100}}</view>
									<view class="btn">立即抢购</view>
								</view>
							</view>
						</view>
						<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png"
						v-if="xieList.list.length>0&&xieList.viewNum<=6"  mode="heightFix"
						@click="xieList.viewNum=999"></image>
					</template>
					<template v-else>
					<view class="column-product"  @click="gotoDetailByType(item)" :key="index"
						v-for="(item,index) in typeList[typeIndex].list.slice(0,typeList[typeIndex].viewNum)">
						<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image>
						<view class="content flex-column">
							<view class="title text-overflowRows">{{item.title}}</view>
							<!-- <view class="tags"  v-if="item.display_tags">
								<view class="tag" v-for="(tag,tagI) in item.display_tags.split(',')" :key="tagI">{{tag}}</view>
							</view> -->
							<view class="flex-between">
								<view class="price">{{item.price/100}}</view>
								<view class="btn">立即抢购</view>
							</view>
						</view>
						
					</view>
					<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png"
					v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=6"  mode="heightFix"
					@click="typeList[typeIndex].viewNum=999"></image>
					</template>
				</view>
				<view class="prod-box flex-between" v-else>
					<view class="row-product"  @click="gotoDetailByType(item)" :key="index"
						v-for="(item,index) in typeList[typeIndex].list.slice(0,typeList[typeIndex].viewNum)">
						<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image>
						<view class="content flex-column">
							<view class="title text-overflowRows">{{item.title}}</view>
							<!-- <view class="tags"  v-if="item.display_tags">
								<view class="tag" v-for="(tag,tagI) in item.display_tags.split(',')" :key="tagI">{{tag}}</view>
							</view> -->
							<view class="flex-between">
								<view class="btn">查看详情</view>
							</view>
						</view>
						
					</view>
					<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png"
					v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=6"  mode="heightFix"
					@click="typeList[typeIndex].viewNum=999"></image>
				</view>
				<view class="prod-bottom"></view>
			</view>
			
			<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250815/877b45bf01e0181fd489f0e1086c62fd.png"></image>
			<image @click="returnTop" v-show="showGoTop" class="back-img" src="https://static.ticket.sz-trip.com/uploads/20250923/aa531e802bfde6499454f598f59c46e7.png"></image>
			
		</view>
		
		<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow">
			<view class="judge-pop-img" @click="$refs.popup.close()">
				<image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20250926/d7e9d88c26f855e3ff3e829446d541b6.png"></image>
			</view>
		</uni-popup>
	
		<image class="bottom-bg" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20250923/8f51b25f72dc0472ba2a3ea2f22208f7.png"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				couponList: [
					{id: null,},
					{id: null,},
				],
				isReceive: true,
				typeIndex: 0,
				xieTypeIndex:0,
				xieList: {list: [], viewNum: 6,id: 113},
				typeList: [
					{
						id: 109,title: "品蟹鲜",viewNum:6, list: [],
						img:"https://static.ticket.sz-trip.com/uploads/20250923/ef4b6d89375e1039eda49c249a839660.png",
						imgs:"https://static.ticket.sz-trip.com/uploads/20250926/3363f324779fb5cc012461403fb18601.png",
						bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/d4d12e09fc1d1dbfcde2b3737627299c.png",
					},
					{
						id: 110,title: "享丰收",viewNum:6, list: [],
						img:"https://static.ticket.sz-trip.com/uploads/20250923/3207f4860f5b82bc1214b4013851c421.png",
						imgs:"https://static.ticket.sz-trip.com/uploads/20250923/ca0912684689f3d35ada61909ad00a46.png",
						bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/3abb6f842c7dc47f0792cbb6bc7a0dda.png",
					},
					{
						id: 111,title: "玩蟹路",viewNum:6, list: [],
						img:"https://static.ticket.sz-trip.com/uploads/20250923/84ec930200a2a7421785fc146ea6d29a.png",
						imgs:"https://static.ticket.sz-trip.com/uploads/20250923/963148360925eaaf4c5dc9f5a3a9a641.png",
						bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/7dd6ead7144b2d4d1630a4fc3b4ca673.png",
					},
					{
						id: 112,title: "趣农创",viewNum:6, list: [],
						img:"https://static.ticket.sz-trip.com/uploads/20250923/83579afbd0abc81923e99b6baf096171.png",
						imgs:"https://static.ticket.sz-trip.com/uploads/20250923/db9bfba5a3bae232f0ce7377aa594893.png",
						bgImg:"https://static.ticket.sz-trip.com/uploads/20250923/cff87d3ae281a5f022e97ac63d43cbbc.png",
					},
				],
				showGoTop: false,
				popShow: false,
			}
		},
		onLoad(option) {
			
		},
		onReady() {
			this.getHeadImg(2398)
			this.getGoods()
		},
		methods: {
			changPopShow (e) {
				this.popShow = e.show
			},
			
			getHeadImg (id) {
				this.Post({id},'/api/multimedia/detail').then(res => {
					this.headImg = res.data.head_img
					uni.setNavigationBarTitle({
						title:res.data.title
					})
					if (res.data.company_name) {
						res.data.company_name.split(',').forEach((item, index) => {
							this.couponList[index].id = item
						})
					}
				});	
			},
			goRule (id) {
				uni.navigateTo({
					url:"/subPackages/activity/commonRule?id="+id
				})
			},
			
			// 产品列表
			getGoods() {
			
				for(let p of this.typeList) {
					this.Post({
						tag_id: p.id,
						offset: 0,
					    limit: 999,
					},'/api/product/get_product_by_tag_subject').then(res => {
						if (res.data.list.length < p.viewNum) {
							p.viewNum = 999
						}
						p.list = res.data.list
						console.log(p)
					})
				}
				
				this.Post({
					tag_id: this.xieList.id,
					offset: 0,
				    limit: 999,
				},'/api/product/get_product_by_tag_subject').then(res => {
					if (res.data.list.length < this.xieList.viewNum) {
						p.viewNum = 999
					}
					this.xieList.list = res.data.list
				})
			
			},
			getCoupon(item) {
				if (!this.isReceive) {
					uni.showToast({
						title: "短时间内请勿重复点击！",
						icon: 'none'
					})
					return;
				}
				this.isReceive = false
				setTimeout(() => {this.isReceive = true}, 3000)
				this.Post({
					ids: item.id,
					is_all: 1,
				},"/api/coupon/getNewCouponsByActivitiesIds").then(res => {
					if (res) {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					}
				})
			},
			

			viewDetail(item) {
				this.gotoDetailByType(item)
			},
			
			showJudgeImg () {
				this.$refs.popup.open()
			},
			
			returnTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200,
				})
			},
		},
		onPageScroll(res) {
			this.showGoTop = res.scrollTop > 200 ? true : false;
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		min-height: 100vh;
		padding-bottom: 30rpx;
		position: relative;
	}
	
	.topImg {
		width: 100%;
	}
	.main-container{
		width: 100%;
		margin-top: -820rpx;
		padding: 0;
		position: relative;
	}
	.coupon-box{
		width: 695rpx;
		height: 250rpx;
		background-image: url("https://static.ticket.sz-trip.com/uploads/20250923/c90baa723c8d353380464846a5fb49eb.png");
		background-size: 100% 100%;
		position: relative;
		margin: 0 auto;
		
		
		.coupon-box-between{
			width: 100%;
			height: 100%;
			padding: 0 103rpx 40rpx 149rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}
		.rule{
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 0;
			width: 40px;
			height: 40px;
		}
		.coupon-img{
			height: 49.33rpx;
		}
	}
	
	.title{
		font-weight: bold;
		font-size: 29rpx;
		color: #000000;
	}
	.tags{
		width: 100%;
		display: flex;
		overflow: hidden;
		.tag{
			font-weight: 500;
			font-size: 24rpx;
			height: 38rpx;
			line-height: 38rpx;
			color: #4C9BB4;
			padding: 0rpx 6rpx;
			border-radius: 5rpx;
			border: 1px solid #4C9BB4;
			margin-right: 13rpx;
		}
	}
	.view-more{
		height: 23rpx;
		margin: 24rpx auto 0;
		position: relative;
		z-index: 2;
	}

	.type-container{
		display: flex;
		justify-content: space-between;
		height: 88rpx;
		overflow: visible;
		position: relative;
		z-index: 1;
		padding: 0 10rpx;
		.type-item{
			width: 177.5rpx;
			image{
				width: 177.5rpx;
				height: 84rpx;
			}
			image.active{
				height: 160rpx;
			}
		}
	}

	.column-product{
		width: 314rpx;
		height: 477.33rpx;
		background: #FFFCF7;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		border: 2rpx solid #FFF3E2;
		overflow: hidden;
		margin-bottom: 16rpx;
		.img{
			width: 314rpx;
			height: 314rpx;
			border-radius: 13rpx 13rpx 0rpx 0rpx;
		}
		.content{
			width: 100%;
			flex: 1;
			height: 150rpx;
			justify-content: space-between;
			padding: 4rpx 10rpx 10rpx;
		}
		.price{
			font-weight: bold;
			font-size: 28rpx;
			color: #FF0014;
			&::before{
				content: "￥";
				font-size: 24rpx;
			}
		}
		.btn{
			width: 140rpx;
			height: 50rpx;
			background: #FF7122;
			border-radius: 30rpx;
			font-weight: bold;
			font-size: 27rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
		}
	}
	.prod-container{
		width: 710rpx;
		margin: 0 auto;
		position: relative;
	}
	
	.prod-box{
		width: 100%;
		flex-wrap: wrap;
		padding: 10rpx 26rpx 0;
		background-image: url("https://static.ticket.sz-trip.com/uploads/20250923/2026d2f66d529c16ff28025041223720.png");
		background-size: 100% auto;
		background-repeat: repeat-y;
		position: relative;
	}
	.prod-top{
		background-size: 100% 100%;
		height: 125rpx;
		width: 100%;
		padding: 20rpx 20rpx 0;
	}
	.prod-bottom{
		background-size: 100% 100%;
		height: 78.5rpx;
		width: 100%;
		background-image: url("https://static.ticket.sz-trip.com/uploads/20250923/5247b16c052c625b1a44fd6faa57c509.png");
	}
	
	.bottom-img{
		width: 145.33rpx;
		height: 63.33rpx;
		margin: 40rpx auto 0;
		display: block;
		position: relative;
		z-index: 3;
	}
	.back-img{
		position: fixed;
		width: 94rpx;
		height: 94rpx;
		bottom: 66rpx;
		right: 26rpx;
		z-index: 5;
	}
	
	.row-product{
		width: 100%;
		height: 202.67rpx;
		background: #FFFCF7;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		border: 2rpx solid #FFF3E2;
		
		padding: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
		.img{
			width: 161rpx;
			height: 161rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			flex-shrink: 0;
		}
		.content{
			width: 100rpx;
			flex: 1;
			justify-content: space-between;
			padding-left: 30rpx;
		}

		.btn{
			width: 140rpx;
			height: 50rpx;
			background: #FF7325;
			border-radius: 25rpx;
			font-weight: bold;
			font-size: 27rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
		}
	}
	.bottom-bg{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}
	
	.xie-type{
		height: 100%;
		width: 100%;
		padding: 0 86rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		.xie-type-item{
			height: 74rpx;
			image{
				width: 230rpx;
				height: 100%;
			}
		}
	}
	.judge-btn{
		position: absolute;
		right: -20rpx;
		width: 160rpx;
		top: 88rpx;
		z-index: 5;
	}
	.judge-pop-img{
		width: 710rpx;
		margin: 0 auto;
		padding: 250rpx 0;
		height: 100vh;
		overflow-y: auto;
	}
</style>