<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 v-else style="height: 1200rpx;"></view>
		<view class="rule-box">
			<view class="rule-btn" @click="showRule(1)">活动 规则</view>
		</view>
		
		<view class="main-container">
			<view class="zhuanpan">
				<view class="zhuanpanImg" :style="{ transform: `rotate(${rotateAngle}deg)` }"></view>
				<image class="choujiang" src="https://static.ticket.sz-trip.com/uploads/20251015/a24d553d3d8707579ad74b9a7d8181d6.png" @click="getPrize"></image>
			</view>
			
			
			<view class="flex-between" style="margin-bottom: 27rpx;position: relative;">
				<button class="my-share" open-type="share">1</button>
				<image  style="width: 371.33rpx;height: 101.33rpx;" mode="heightFix" 
				src="https://static.ticket.sz-trip.com/uploads/20251015/c5ca2c1e8a96b4340776ca6af92c6711.png"></image>
				
				<image @click="openMyPrize()" style="width: 288rpx;height: 101.33rpx;" mode="heightFix" 
				src="https://static.ticket.sz-trip.com/uploads/20251015/1b04f59f632af0d7fcdb58a5c2eb39d5.png"></image>
			</view>
			
			<image class="title-image" src="https://static.ticket.sz-trip.com/uploads/20251015/580622a02ffe192d428f0e90ca020e3f.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">
				<image style="width: 636rpx;" mode="widthFix" :src="ruleImg"></image>
				
				<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>
		
		<uni-popup ref="prizePop" type="bottom" :safe-area="false"
		mask-background-color="rgba(0,0,0,0.6)"
		@change="changPopShow">
			<view class="my-prize">
				<view class="title-container">
					<image mode="heightFix" src="https://static.ticket.sz-trip.com/uploads/20251016/3a65b98b7014225ae635f39a1b5d9a96.png"></image>
					<image  @click="$refs.prizePop.close()" class="close" src="https://static.ticket.sz-trip.com/uploads/20251016/77d62de0d8a19c5a940506f49662e640.png"></image>
				</view>
				
				<view class="prize-content">
					<view class="flex-center" v-if="prizeList.length<=0">
						<image class="no-data"  mode="widthFix" src="https://static.ticket.sz-trip.com/uploads/20251016/4e54bd967090f9db540e8df28500ef0e.png"></image>
					</view>
					
					<view v-else>
						<view class="prize-item" v-for="(item,i) in prizeList" :key="i">
							<image class="prize-img" :src="item.head_img"></image>
							<view class="flex-1 w-1rpx" style="height: 100%;">
								<view class="title">{{item.prize_name}}</view>
								<view >抽奖时间：{{item.create_time}}</view>
							</view>
						</view>
					</view>
					
					
				</view>
				
				<view class="kefu" v-if="prizeList.length>0" @click="$refs.kfpopup.open()">
					<image  src="https://static.ticket.sz-trip.com/uploads/20251016/f871b8870ffffcc5c6b02714caee8e11.png"></image>
					<text style="padding-left: 5rpx;">联系客服</text>
				</view>
				
			</view>
		</uni-popup>
		
		<uni-popup ref="kfpopup" type="bottom" :safe-area="false">
			<view class="kf-popup-content">
			        <!-- 标题栏 -->
			        <view class="popup-header">
			          <text class="title">联系我们</text>
			          <text class="close-icon" @click="$refs.kfpopup.close()">×</text>
			        </view>
			        
			        <!-- 内容区域 -->
			        <view class="popup-body">
			          <!-- 电话咨询 -->
			          <view class="contact-item" @click="clickPhone('15370135755')">
			            <view class="info">
			              <text class="label">电话咨询</text>
			              <text class="detail">15370135755</text>
			            </view>
			            <view class="arrow">
							<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/a58432ad47582207f9f03ac31a6e2d98.png"></image>
						</view>
			          </view>
			          
			          <!-- 在线客服 -->
			          <button class="concat-btn" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
			            <view class="contact-item">
						
			            <view class="info">
			              <text class="label">在线客服</text>
			              <text class="detail">工作时间: 9:00-18:00</text>
			            </view>
			            <view class="arrow">
							<image style="width: 100%;height: 100%;" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250911/11761e83954ecb845a8c9ea26e95c6e0.png"></image>
						</view>
						</view>
			          </button>
			        </view>
			      </view>
			
		</uni-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				finish:false, 
				list: [],
				typeList: [],
				showGoTop: false,
				popShow: false,
				ruleImg: "",
				
				prizeId: 9, // 9
				prizeName: '',
				rotateAngle: 0,
				prizeList: [],
			}
		},
		onLoad(option) {
			
		},
		onReady() {
			this.getHeadImg(2403)
			this.productInit()
		},
		methods: {
			productInit () {
				let _this = this
				let typeList = [650,651,647,649,653,654,656]
				// 获取所有农产品子类目 pid_type 20
				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
					})
				});	
				// 抽奖规则
				this.Post({id:2404},'/api/multimedia/detail').then(res => {
					this.ruleImg = res.data.head_img
				});	
			},
			showRule (type) {
				this.$refs.popup.open()
			},
			
			openMyPrize () {
				this.Post({sweepstakes_id: this.prizeId, limit: 999,show_none:1},'/api/sweepstakes/sweepstakes_act/prizeLog')
				.then(res => {
					if(res.data) {
						this.prizeList = res.data.data || []
						this.$refs.prizePop.open()
						console.log(this.prizeList)
					}
				})
			},
			
			// 抽奖
			getPrize: function() {
				// 逆时针对应
				let prize = [
					{name: '五等奖',level: 5,deg:0},
					{name: '三等奖',level: 3,deg:60},
					{name: '二等奖',level: 2,deg:120},
					{name: '五等奖',level: 5,deg:180},
					{name: '一等奖',level: 1,deg:240},
					{name: '四等奖',level: 4,deg:300},
				]
				
			
				this.Post({sweepstakes_id: this.prizeId},'/api/sweepstakes/sweepstakes_act/luckyDrawv2')
				.then(res => {
					if(res.data) {
						let prizeData = prize.find(v=>v.level == res.data.level)
						if (prizeData) {
							this.rotateAngle = (720 + prizeData.deg)+ (this.rotateAngle-this.rotateAngle%720);
						}
						
						setTimeout(() => {
							uni.showModal({
								content:'恭喜您已中奖，具体请查看奖品。'
							})
						},3000)
					}
				})
				
				
			},
			
			// 产品列表
			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/895dc12ffe394be03f4831ddcd280308.png");
		background-size: 100% auto;
		background-repeat: repeat-y; /* 竖向重复 */
		background-position: bottom; /* 从底部开始显示 */
		position: relative;
	}
	
	.topImg {
		width: 100%;
	}
	
	.rule-box{
		position: absolute;
		right: 20rpx;
		top: 410rpx;
		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;
			background: linear-gradient( 180deg, #FF8B8D 0%, #FF544E 100%);
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			border: 2rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1.2;
		}
	}
	
	.my-share{
		position: absolute;
		width: 360rpx;
		left: 0;
		top: 0;
		opacity: 0;
	}
	.zhuanpan{
		width: 654rpx;
		height: 654rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 28rpx;
		position: relative;
		z-index: 2;
		.zhuanpanImg{
			width: 654rpx;
			height: 654rpx;
			background-image: url('https://static.ticket.sz-trip.com/uploads/20251015/60b23c0c2faead4eb415592d88e6519c.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			transform-origin: center center; /* 设置旋转中心为元素中心 */
			transition-duration: 2s;
		}
		.choujiang{
			width: 240rpx;
			height: 240rpx;
			position: relative;
			z-index: 99;
		}
	}
	
	
	.main-container{
		width: 100%;
		margin-top: -950rpx;
		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%;
			}
		}
	}
	
	.my-prize{
		border-radius: 61rpx 61rpx 0rpx 0rpx;
		width: 100%;
		min-height: 500rpx;
		max-height: 1000rpx;
		background: white;
		display: flex;
		flex-direction: column;
		.title-container{
			background: linear-gradient( 182deg, #FEF9DC 0%, #FFFFFF 100%);
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			image{
				width: 170rpx;
				height: 111.33rpx;
			}
			.close{
				position: absolute;
				right: 40rpx;
				top: 34rpx;
				width: 26.67rpx;
				height: 26.67rpx;
			}
		}
		
		.prize-content{
			flex: 1;
			height: 20rpx;
			padding: 40rpx 31rpx 20rpx;
			overflow-x: hidden;
			overflow-y: auto;
			.no-data{
				width: 394rpx;
				height: 255.33rpx;
				margin: 0 auto;
			}
			
			.prize-item{
				display: flex;
				align-items: center;
				height: 167rpx;
				background: #FFFCF1;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				border: 1rpx solid #FFEC8B;
				width: 100%;
				margin-bottom: 13rpx;
				padding: 27rpx 29rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #747474;
				.prize-img{
					width: 112rpx;
					height: 112rpx;
					border-radius: 13rpx;
				}
				.flex-1{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding-left: 20rpx;
				}
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				}
			}
		}
		
		.kefu{
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 27rpx;
			color: #333333;
			padding-bottom: 30rpx;
			image{
				width: 30.67rpx;
				height: 30.67rpx;
			}
		}
	}
	/* 弹窗内容容器 */
	.kf-popup-content {
	  width: 100%;
	  background-color: #fff;
	  border-top-left-radius: 16px;
	  border-top-right-radius: 16px;
	  overflow: hidden;
	  .popup-header {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    padding: 16px;
	    position: relative;
	    border-bottom: 1px solid #f5f5f5;
	  }
	  .title {
	    font-size: 18px;
	    font-weight: bold;
	  }
	  
	  .close-icon {
	    position: absolute;
	    right: 16px;
	    font-size: 20px;
	    color: #999;
	  }
	  
	  /* 弹窗内容区 */
	  .popup-body {
	    padding: 10px 0;
	  }
	  
	  /* 联系项样式 */
	  .contact-item {
	    display: flex;
	    align-items: center;
	    padding: 16px 20px;
	    border-bottom: 1px solid #f5f5f5;
	  }
	  
	
	  
	  .info {
	    flex: 1;
	  }
	  
	  .label {
	    font-size: 16px;
	    display: block;
	    margin-bottom: 4px;
	  }
	  
	  .detail {
	    font-size: 14px;
	    color: #666;
	  }
	  
	  .arrow {
		width: 20px;
		height: 20px;
	    color: #ccc;
	    font-size: 18px;
	  }
	}
	.concat-btn{
	  /* 清除默认背景和边框 */
	  background: none;
	  border: none;
	  padding: 0;
	  margin: 0;
	  
	  /* 清除默认圆角 */
	  border-radius: 0;
	  
	  /* 清除默认文字样式 */
	  color: inherit;
	  font-size: inherit;
	  line-height: inherit;
	  
	  /* 清除点击效果（灰色背景） */
	  -webkit-tap-highlight-color: transparent;
	  text-align: left;
	}
	
	
</style>