<template>
	<view>
		<!-- 自定义导航栏开始 -->
		<uni-nav-bar :status-bar="true" :border="false" :background-color="'transparent'" :fixed="true"
			@click-left="handleClickLeft" @clickTitle="handleClickInput">
			<block v-slot:left>
				<view class="back-wrap u-f u-f-fdr u-f-aic u-f-jcfs">
					<image class="white-back-icon" src="../.././static/common/white_left_arrrow.png"></image>
				</view>
			</block>

			<view class="page-title">商品团购</view>
		</uni-nav-bar>
		<!-- 自定义导航栏结束 -->
		
		<view class="content-wrap" :style="{ paddingTop: paddingTop }">
			<scroll-view scroll-y="true" class="scroll-Y" style="height: 100vh;" @scrolltolower="loadmore()">
				<view class="top-nav" :style="{ height: paddingTop }"></view>
				<template v-if="tugouInfoList.length>0">
					<view class="product-info u-f u-f-jcfs mg-top-20" v-for="item in tugouInfoList" :key="item.goodsId" @click="goToTuGouDetail(item)">
						<view class="left" style="flex: 1">
							<image :src="item.goodsImage"></image>
						</view>
						<view class="right" style="flex: 2">
							<view class="product-name fs28 fw400">{{item.goodsName}}</view>
							<view class="join-group-person">
								<text class="main-title-btn fs18 fw400">{{item.clusteringNum}}人可成团</text>
							</view>
							<view class="join-group-progress u-f u-f-aic">
								<view class="progress-wrap">
									<progress :percent="item.groupNumbered/item.clusteringNum" stroke-width="3" />
								</view>
								<view class='join-group-person fs24 fw400'>已团{{item.groupNumbered}}人</view>
							</view>
							<view class="product-price u-f u-f-jcsb mg-bot-10">
								<view class="left u-f u-f-aic">
									<view class="old-price fs28">
										<text class="fs24">￥</text>
										<text class="fw400">{{item.groupBuyingPrice}}</text>
									</view>
									<view class="new-price fs24">
										<text>￥</text>
										<text>{{item.originalPrice}}</text>
									</view>
								</view>
								<view class="right">
									<view class="main-color-btn fs26" style="border-radius: 8rpx;">
										去成团
									</view>
								</view>
							</view>
							<view>
								<text class="mark">本场还剩 {{item.remainingTime}}</text>
							</view>
						</view>
					</view>
					
					<!-- 上拉加载 -->
					<load-more :loadtext="loadtext" :color="'#ffffff'"></load-more>
				</template>
				
				<template v-else-if="!firstload">
					<view style="padding-top: 100rpx;" class="fs44 light-gray u-f-jcc u-f-aic">Loading ...</view>
				</template>
				
				<template v-else>
					<!-- 无内容默认 -->
					<view class="fs24 light-gray u-f u-f-aic u-f-jcc">
						<text>暂无数据</text>
					</view>
				</template>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getCusNavBarInfo } from "../.././common/customizeNavBarInfo.js"
	import { loadMore } from "../.././components/load-more/load-more.vue"
	export default {
		components: {
			loadMore
		},
		data() {
			return {
				firstload: true,
				paddingTop: 0,
				pageNum: 1,
				pageSize: 4,
				tugouInfoList: [],
				timer:null
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		onShow() {
			this.pageNum = 1
			this.getTuGouInfo()
		},
		
		onHide() {
			clearInterval(this.timer)
		},
		
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			async getTuGouInfo() {
				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize
				}
				let res = await this.$http.post('/api/client/groupBuying/list', data, {token: true, checkToken: true})
				let tugouInfoList = res.data.data.rows || []
				this.tugouInfoList = this.pageNum > 1 ? this.tugouInfoList.concat(tugouInfoList) : tugouInfoList;
				this.firstload = true;
				if (tugouInfoList.length < this.pageSize) {
					this.loadtext="没有更多数据了";
				}else{
					this.loadtext="上拉加载更多";
				}
				clearInterval(this.timer)
				this.startCountdown()
			},
			// 上拉加载
			loadmore(){
				if(this.loadtext!="上拉加载更多"){ return; }
				// 修改状态
				this.loadtext="加载中...";
				this.pageNum++;
				this.getTuGouInfo();
			},
			goToTuGouDetail(item) {
				console.log("item", item)
				uni.navigateTo({
					url: '/pages/tugou-detail/tugou-detail?groupId='+item.groupId
				})
			},
			handleClickLeft(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 更新所有商品的倒计时
			startCountdown() {
			
				this.timer = setInterval(() => {
					this.tugouInfoList&& this.tugouInfoList.forEach((item, index) => {
					console.log(item.remainingTime);
					// 解析剩余时间
					let timeParts = item.remainingTime.split(':');
					console.log(timeParts);
					let hours = parseInt(timeParts[0], 10);
					let minutes = parseInt(timeParts[1], 10);
					let seconds = parseInt(timeParts[2], 10);
			
					// 如果时间还未结束
					if (hours > 0 || minutes > 0 || seconds > 0) {
						// 每秒减少1秒
						seconds -= 1;
			
						// 如果秒数变为负数，调整分钟和小时
						if (seconds < 0) {
							seconds = 59;
							minutes -= 1;
						}
						if (minutes < 0) {
							minutes = 59;
							hours -= 1;
						}
			
						// 更新倒计时
						item.remainingTime = this.formatTime(hours, minutes, seconds);
					}
					});
				}, 1000);
			},
			
			// 格式化时间：将小时、分钟、秒格式化为 "时:分:秒"
			formatTime(hours, minutes, seconds) {
				return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			},
			// 格式化数字，确保两位数显示
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back-wrap {
		.white-back-icon {
			width: 15rpx;
			height: 30rpx;
		}
	}

	.content-wrap {
		height: 100vh;
		background: linear-gradient(173deg, #FF4502 0%, #FF8903 100%);

		.top-nav {
			z-index: 333;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: #FF4502;
		}

		.content {
			height: 600rpx;
			width: calc(100vh - 48rpx);
			background-color: purple;
		}

	}

	.page-title {
		width: 100%;
		color: #ffffff;
		font-size: 36rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.product-info {
		position: relative;
		background-color: #ffffff;
		padding: 22rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		border-radius: 18rpx;
		box-sizing: border-box;

		.left {
			margin-right: 10rpx;
			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.right {
			.product-name {
				color: #333333;
			}

			.join-group-person {
				.main-title-btn {
					padding: 6rpx 12rpx;
					background: #FFF6F3;
					border-radius: 9rpx 4rpx 9rpx 2rpx;
					border: 1rpx solid #FFD0BF;
					color: #FF4502;
					margin-top: 16rpx;
				}
			}

			.join-group-progress {
				margin-bottom: 28rpx;

				.progress-wrap {
					flex: 2;
					margin-right: 10rpx;
				}

				.join-group-person {
					color: #FF4502;
				}
			}

			.product-price {
				.left {
					.old-price {
						margin-right: 10rpx;
						color: #FF4502;
					}

					.new-price {
						color: #999999;
						text-decoration: line-through;
					}
				}

				.right {}
			}
		}
	}
	
	.mark {
		font-size: 28rpx;
		padding: 8rpx 50rpx 8rpx 36rpx;
		color: #ffffff;
		background: linear-gradient( 90deg, #FF4502 0%, rgba(255,137,3,0) 100%);
	}
	
	.f-1 {
		flex: 1;
	}
	
	.f-3 {
		flex: 3;
	}
</style>