<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view class="bg">
		<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix" :show-menu-by-longpress="true"></image>
		
		<view class="rule-box">
			<view class="rule-btn" @click="showRule(1)">活动 细则</view>
			<!-- <view class="rule-btn">操作 流程</view> -->
		</view>
		
		<view class="main-container">
			<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20251015/472caac1ca249c1701dc1c58fa458be4.png"></image>
			<view class="product-container flex-between" style="flex-wrap: wrap;">
				<view class="column-product"  @click="gotoDetailByType(item)" :key="index"
					v-for="(item,index) in list">
					<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 >
								<text class="price">{{item.price/100}}</text>
								<text class="old-price" v-if="item.market_price">{{item.market_price/100}}</text>
							</view>
							<view class="btn">
								<image style="width: 100%;height: 100%;border-radius: 50%;" mode="aspectFill"
								src="https://static.ticket.sz-trip.com/uploads/20251015/06d55a0ce76555ad9d65e8574af0b016.png"></image>
							</view>
						</view>
					</view>
					
				</view>
			
				<image class="view-more" src="https://static.ticket.sz-trip.com/uploads/20250923/e121513a65fda74f822c660cda703e9a.png"
				v-if="!finish"  mode="heightFix" @click="getGoods()"></image>
			</view>

			<!-- <image style="width: 100%;" mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/b75309eedd49e02b518d5eeeca19855e.png"></image> -->
				
			<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20251015/cf1381e1c826b6cad95a8344c7125def.png"></image>
			<image @click="returnTop" v-show="showGoTop" class="back-img" 
			src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image>
			
		</view>
		
		<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.6)" @change="changPopShow">
			<view class="flex-column flex-center">
				<view class="pop-image">
					<view class="content">
						<image mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251015/d1cf83965be001dc35389648c8749570.png"></image>
					</view>
				</view>
				
				<image @click="$refs.popup.close()" style="width: 53rpx;height: 53rpx;margin-top: 40rpx;" 
				src="https://static.ticket.sz-trip.com/uploads/20251015/d89694d06c3aa5e418aca43822d14042.png"></image>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				finish:false, 
				list: [],
				showGoTop: false,
				popShow: false,
				ruleImg: "",
				

				typeList: [],

			}
		},
		onLoad(option) {
			
		},
		onReady() {
			this.getHeadImg(2402)
			// this.getGoods()
			this.productInit()
		},
		methods: {
			productInit () {
				let _this = this
				// 获取所有农产品子类目 pid_type 20
				this.Post({pid: 20},'/api/product/tag_list').then(res => {
					let typeList = (res.data || []).map(v=>v.id)
					Promise.all(
						typeList.map(x=>_this.Post({pid:x},'/api/product/tag_list'))
					).then(typeRes => {
						typeRes.forEach(type => {
							if (type.data.length>0) {
								typeList = typeList.concat(type.data.map(x=>x.id))
							}
						})
						this.typeList = typeList
						this.getGoods()
					})
				})
				
			},
			
			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
					})
				});	
			},
			showRule (type) {
				this.$refs.popup.open()
			},
			
			// 产品列表
			getGoods() {
				this.Post({
					tag_id: this.typeList.join(","),
					offset: this.list.length,
				    limit: 6,
					order:"desc",
					sort:"sales_number",
				},'/api/product/get_product_by_tag').then(res => {
					if (res.data.length < 6) {
						this.finish = true
					}
					this.list = this.list.concat(res.data.list||[])
				})
			},
			
			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;
		background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/306f4e5db6cc77c111c73f78acecad18.png");
		background-size: 100% auto;
		background-repeat: repeat-y; /* 竖向重复 */
		background-position: bottom; /* 从底部开始显示 */
		position: relative;
	}
	
	.topImg {
		width: 100%;
	}
	
	.rule-box{
		position: absolute;
		right: 20rpx;
		top: 220rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 150rpx;
		width: 67rpx;
		z-index: 20;
		.rule-btn{
			width: 66.67rpx;
			height: 66.67rpx;
			background-size: 100% 100%;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 0rpx 0rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: url("https://static.ticket.sz-trip.com/uploads/20251015/98e2184f7003a6d3ae3ae7246550260e.png");
			line-height: 1.2;
		}
	}
	
	
	
	.main-container{
		width: 100%;
		margin-top: -250rpx;
		padding: 0 34rpx 60rpx;
		position: relative;
	}

	.title-image{
		width: 316.67rpx;
		height: 68.67rpx;
		margin: 0 auto;
		display: block;
	}

	.view-more{
		height: 24rpx;
		margin: 31rpx auto 0;
		position: relative;
		z-index: 2;
		display: block;
	}

	.product-container{
		padding:30rpx 0  0;
	}
	
	.column-product{
		width: 333rpx;
		height: 484rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(186,144,108,0.1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		padding: 6rpx;
		overflow: hidden;
		margin-bottom: 19rpx;
		.img{
			width: 320rpx;
			height: 320rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}
		.title{
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
		.content{
			width: 100%;
			flex: 1;
			height: 150rpx;
			justify-content: space-between;
			padding: 0rpx 10rpx 10rpx;
		}
		.price{
			font-weight: 500;
			font-size: 34rpx;
			color: #FF0000;
			&::before{
				content: "￥";
				font-size: 24rpx;
			}
			// &::after{
			// 	content: "起";
			// 	font-size: 24rpx;
			// }
		}
		.old-price{
			font-weight: 400;
			font-size: 25rpx;
			color: #B1B1B1;
			text-decoration-line: line-through;
			margin-left: 10rpx;
			&::before{
				content: "￥";
			}
		}
		.btn{
			width: 53.33rpx;
			height: 53.33rpx;
			border-radius: 50%;
			overflow: hidden;
		}
	}
	
	.bottom-img{
		width: 123.95rpx;
		height: 103.06rpx;
		margin: 74rpx auto 0;
		display: block;
	}
	.back-img{
		position: fixed;
		width: 66rpx;
		height: 66rpx;
		bottom: 66rpx;
		right: 26rpx;
	}
	
	.pop-image{
		width: 636rpx;
		height: 1262.11rpx;
		background: url("https://static.ticket.sz-trip.com/uploads/20251015/dbe71e60d36a04a908651045d67f9582.png");
		background-size: 100% 100%;
		padding: 223rpx 42rpx 30rpx;
		.content{
			width: 100%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			image{
				width: 100%;
			}
		}
	}
	
</style>