<template>
	<view class="page-content flex-col">
		<view class="bg-zd" style="height: 526rpx;border-radius: 0 0 100rpx 100rpx;margin-bottom: 20rpx;"
			:style="{'padding-top': statusBaeHeight + 60 + 'px'}">
			<view class="padding-lr flex justify-between">
				<template>
					<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">ALL</view>
					<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">关注品牌</view>
				</template>
				<template>
					<view class="text-sm tag" :class="{'active-tag': queryForm.orderBy == 'popularity'}" @click="changeOrder('popularity')">人气排名</view>
					<view class="text-sm tag" :class="{'active-tag': queryForm.orderBy == 'create_time'}" @click="changeOrder('create_time')">最新发布</view>
				</template>
			</view>
		</view>
		<view class="flex-1 padding list-container">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="changePage">
				<view class="activity-item flex" v-for="(it, index) in activeList" :key="index" @click="toDetail(it)">
					<view class="left flex flex-col justify-between align-center">
						<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;">
						</image>
						<text >活动状态</text>
						<view v-if="it.stage == 0">未开始</view>
						<view v-if="it.stage == 2">已结束</view>
						<view v-if="it.stage == 3">已结束</view>
						<view v-if="it.stage == 4">活动停止</view>
						<view v-if="it.stage == 1" class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募即将结束</view>
						<view v-if="it.stage == 1">
							<text style="font-size: 72rpx; color: #DE3C4B;">{{it.remainingDays}}</text>天
						</view>
					</view>
					<view class="right">
						<view class="title">{{ it.breweryName }}</view>
						<!-- <view class="title">{{ it.activityName }}</view> -->
						<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
						<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</view>
						<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
							<view class="beer-box" v-for="(it, index) in it.beers" :key="index" @click="toReview(it)">
								<image v-if="it.cover" :src="it.cover" class="cover"></image>
							</view>
						</scroll-view>
						<view class="flex align-center">
							<text v-if="it.activityRewardType == 2 || (it.activityRewardType == 1 && it.activityRewardGoods)" class="zeng">赠</text>
							<text v-if="it.activityRewardType == 1 && it.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
							<text v-if="it.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
						</view>
					</view>
				</view>
				<view class="cu-load" :class="loading?'loading': activeList.length == total ? 'over' :'more'"></view>
			</scroll-view>
		</view>
		<loginPopup ref="loginRef"></loginPopup>
	</view>
</template>

<script>
	import {
		getActivities,
		getFavoriteActivities
	} from '@/api/bar.js'
	import loginPopup from '@/components/loginPopup.vue';
	export default {
		components: {
			loginPopup
		},
		data() {
			return {
				statusBaeHeight: 40,
				curTag: 0,
				activeList: [], // 活动列表
				loading: false,
				queryForm: {
					pageNum: 1,
					pageSize: 5,
					orderBy:''
				},
				total: 0,
			};
		},
		onLoad() {
			uni.setTabBarStyle({
				backgroundColor: '#ffffff'
			})
			// setTimeout(() => {
			// 	uni.setNavigationBarColor({
			// 		frontColor: '#000000',
			// 		backgroundColor: '#FFFFFF',
			// 		animation: {
			// 			duration: 400,
			// 			timingFunc: 'easeIn'
			// 		}
			// 	})
			// }, 500)
			this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
			this.getActivitiesFun()
		},
		methods: {
			changeTag(key) {
				this.curTag = key
				if(key == 0) {
					this.queryForm.pageNum = 1
					this.activeList = []
					this.getActivitiesFun()
				}else if(key == 1) {
					this.activeList = []
					this.queryForm.pageNum = 1
					this.getFavoriteActivitiesFun()
				} 
			},
			// 切换排序
			changeOrder(key) {
				this.queryForm.orderBy = key
				if(this.curTag == 0) {
					this.queryForm.pageNum = 1
					this.activeList = []
					this.getActivitiesFun()
				} else if(this.curTag == 1) {
					this.activeList = []
					this.queryForm.pageNum = 1
					this.getFavoriteActivitiesFun()
				}
				
			},
			changePage() {
				console.log('翻页')
				if (this.activeList.length < this.total) {
					if (this.curTag == 1) {
						this.queryForm.pageNum++
						this.getFavoriteActivitiesFun()
					}else {
						this.queryForm.pageNum++
						this.getActivitiesFun()
					}
					
				}

			},
			toDetail(item) {
				if (!uni.getStorageSync('token')) {
					this.$refs.loginRef.open()
					return
				}
				uni.navigateTo({
					url: "/pagesActivity/activityDetail?id=" + item.id
				})
			},
			// 我关注的品牌方
			getFavoriteActivitiesFun() {
				// uni.showLoading({
				// 	mask: true
				// })
				this.loading = true
				getFavoriteActivities(this.queryForm).then(res=>{
					console.log(res)
					this.total = res.total
					if(res.rows && res.rows.length > 0) {
						let arr = res.rows.map(it => {
							it.remainingDays = this.getRemainingDays(it.endDate)
							return it
						})
						arr.forEach(it => {
							this.activeList.push(it)
							})
					}
					
					this.loading = false
					// uni.hideLoading()
				}).catch(err => {
					this.loading = false
					// uni.hideLoading()
					
				})
			},
			// 获取活动列表
			getActivitiesFun() {
				// uni.showLoading({
				// 	mask: true
				// })
				this.loading = true
				getActivities(this.queryForm).then(res => {
					this.total = res.total
					if(res.rows && res.rows.length > 0) {
						let arr = res.rows.map(it => {
							it.remainingDays = this.getRemainingDays(it.endDate)
							return it
						})
						arr.forEach(it => {
							this.activeList.push(it)
							})
					}
					
					this.loading = false
					// uni.hideLoading()
				}).catch(err => {
					this.loading = false
					// uni.hideLoading()
				})
			},
			// 计算剩余天数
			getRemainingDays(date) {
				const targetDate = new Date(date);
				const currentDate = new Date();
				const timeDiff = targetDate.getTime() - currentDate.getTime();
				const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
				return remainingDays;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100vh;

		.activeTab {
			font-size: 64rpx;
			border-bottom: 2px solid #303048;
		}

		.tag {
			background-color: transparent;
			border-radius: 12rpx;
			padding: 12rpx 30rpx;
			border: 1px solid #fff;
			margin-right: 24rpx;
		}

		.active-tag {
			background-color: #FEE034;
			font-weight: bold;
			border: 1px solid #FEE034;

		}

		.list-container {
			margin-top: -300rpx;
			overflow-y: auto;
			// padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
			// padding-bottom: calc(110rpx + env(safe-area-inset-bottom));

			.card {
				border-radius: 40rpx;
			}

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}
			// 累积活动
			.activity-item {
				border-radius: 20rpx;
				background: #FDFDFD;
				box-sizing: border-box;
				border: 1px solid #F2F2F2;
				width: 702rpx;
				margin-bottom: 32rpx;
				.left {
					padding: 24rpx 20rpx;
					border-radius: 20rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					border: 1px solid #EFEDE9;
					width: 180rpx;
					margin-top: -10rpx;
					margin-bottom: -10rpx;
				}
			
				.right {
					padding: 20rpx;
					flex:1;
					.title {
						font-family: Source Han Sans;
						font-size: 28rpx;
						font-weight: bold;
						line-height: 30rpx;
						color: #0B0E26;
						margin-bottom: 20rpx;
					}
			
					.sub {
						font-family: Source Han Sans;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 30rpx;
						color: #0B0E26;
						margin-bottom: 16rpx;
			
					}
			
					.scroll-img {
						width: 500rpx;
						display: flex;
						flex-direction: row;
						white-space: nowrap;
						height: 144rpx;
						margin-bottom: 20rpx;
			
						.beer-box {
							width: 100rpx;
							background: #FFFFFF;
							margin-right: 20rpx;
							box-sizing: border-box;
							display: inline-block;
			
							// &:nth-child(1) {
							// 	margin-left: 32rpx;
							// }
			
							.cover {
								width: 100rpx;
								height: 144rpx;
								border-radius: 10rpx;
							}
			
						}
					}
					.zeng {
						font-family: Source Han Sans;
						font-size: 20rpx;
						font-weight: bold;
						line-height: normal;
						text-align: center;
						color: #0B0E26;
						padding: 8rpx 12rpx;
						border-radius: 10rpx;
						background: #FEE034;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>