<template>
	<view class="activitypage">
		<template v-if="userInfo">
			<view class="bg-white flex-col" style="height: 100%;">
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view class="cu-item flex-sub tab" :class="tabCur == 0?'active cur':''" @tap="tabSelect"
							:data-id="0">
							累积活动
						</view>
						<view class="cu-item flex-sub tab" :class="tabCur == 1?'active cur':''" @tap="tabSelect"
							:data-id="1">
							啤酒币换购
						</view>
					</view>
				</scroll-view>
				
				
				<scroll-view v-if="tabCur == 0" scroll-y
					style="padding: 16rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1"
					@scrolltolower="changePage">
					<view class="padding-lr flex justify-start" style="margin-bottom: 28rpx;margin-top: 28rpx;">
						<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">累计中</view>
						<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">已完成</view>
						<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">品牌筛选</view>
					</view>
					<view class="activity-item flex" v-for="(it, index) in myJoinList" :key="index" @click="toInfo(it)">
						<view class="left flex flex-col justify-between align-center">
							<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;">
							</image>
							<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">距离达成还剩</view>
							<view>
								<text v-if="it.remainingBeerCount <= 0"
									style="font-size: 40rpx; color: #DE3C4B;">已达标</text>
								<text v-else>
									<text style="font-size: 72rpx; color: #DE3C4B;">{{ it.remainingBeerCount}}</text>桶
								</text>
							</view>

						</view>
						<view class="right">
							<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 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>
								<text v-if="it.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
							</view>
						</view>
					</view>
					<view class="cu-load" :class="'over'"></view>
				</scroll-view>
				<scroll-view v-if="tabCur == 1" scroll-y
					style="padding: 16rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1"
					@scrolltolower="changePageCoin">
					<view class="padding-lr flex justify-start" style="margin-bottom: 28rpx;margin-top: 28rpx;">
						<view class="text-sm tag" :class="{'active-tag': curCoinTag == 0}" @click="changeCoinTag(0)">全部</view>
						<view class="text-sm tag" :class="{'active-tag': curCoinTag == 1}" @click="changeCoinTag(1)">待发货</view>
						<view class="text-sm tag" :class="{'active-tag': curCoinTag == 2}" @click="changeCoinTag(2)">待收货</view>
						<view class="text-sm tag" :class="{'active-tag': curCoinTag == 3}" @click="changeCoinTag(3)">已完成</view>
					</view>
					<view class="coin-item" v-for="(it, index) in myExchangeOrder" :key="index" @click="toOrderInfo(it)">
						
						<view class="flex justify-between" style="margin-bottom: 16rpx;">
							<text style="color: #0B0E26;font-size: 28rpx;">
								<image src="@/static/beerCoin.png" style="width: 24rpx;height: 24rpx;margin-right: 16rpx;"></image>
								啤酒币兑换</text>
							<text style="color: #5E5F60;font-size: 24rpx;">已完成</text>
						</view>
						<view class="flex justify-between">
							<image :src="it.goodsCover" class="coverImg"></image>
							<view class="flex justify-between flex-col flex-1" style="padding: 24rpx 0">
								<text class="title word-all">{{ it.goodsName }}</text>
								<!-- <text class="subTitle word-all">品牌名称</text> -->
							</view>
							<view class="flex flex-col justify-center align-end">
								<view class="margin-bottom">
									<text class="num">{{ it.beerCoinNum}}</text>
									<text class="cuIcon-rechargefill"
										style="color:rgba(255, 213, 43, 1);font-size: 36rpx;margin-left: 6rpx;"></text>
								</view>
								<text style="color: #5E5F60;font-size: 20rpx;">共{{it.redeemNum}}件</text>
							</view>
						</view>
						
					</view>
					<!-- <view v-if="myExchangeOrder.length == 0">
						<view class="flex-direction flex align-center">
							<text class="text-lg margin-top">暂无历史订单</text>
							
						</view>
					</view> -->
					<view class="cu-load" :class="orderTotal == myExchangeOrder.length ? 'over': 'more'"></view>
				</scroll-view>
			
			</view>
		</template>
		<template v-else>
			<view class="flex justify-center align-center" style="height: 100vh;background-color: #FDFDFD;">
				<view class="flex-direction flex align-center">
					<text class="text-lg margin-top">暂无法查看信息</text>
					<text class="margin-top" style="color: #979797;font-size: 24rpx;">您还没有登录，请登录后查看信息</text>
					<button class="cu-btn bg-zd margin-top" style="width: 306rpx;height: 88rpx;" @click="toLogin">
						<image src="@/static/send.png" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;"></image>
						登录/认证</button>
				</view>
			</view>
		</template>
		<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
	</view>
</template>

<script>
	import loginPopup from '@/components/loginPopup.vue';
	import { myJoinListApi, getMyExchangeOrder } from "@/api/user.js"
	export default {
		components: {
			loginPopup
		},
		data() {
			return {
				loading: true,
				// statusBaeHeight: 40,
				userInfo: null,
				tabCur: 0,
				curTag: 0, //
				curCoinTag: 0,
				myJoinList: [], // 我参与的活动
				queryForm: {
					status: 1,
					// pageNum: 1,
					// pageSize: 5,
				},
				total: 0,
				myExchangeOrder:[],
				orderQuery: {
					pageNum: 1,
					pageSize: 5
				},
				orderTotal: 0,
			};
		},
		mounted() {
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo) {
				this.loading = false
				this.getMyJoinList()
				// this.getMyExchangeOrderFun()
			}
		},
		methods: {
			loginSuccess() {
				this.userInfo = uni.getStorageSync('userInfo')
				if (this.userInfo) {
					this.loading = false
					this.getMyJoinList()
				}
			},
			// 跳转登录
			toLogin() {
				// uni.navigateTo({
				// 	url: '/pages/index/chooseLogin'
				// })
				this.$refs.loginRef.open()
			},
			// 我的兑换订单
			getMyExchangeOrderFun() {
				getMyExchangeOrder(this.orderQuery).then(res => {
					console.log(res)
					this.orderTotal = res.total
					if (res.rows && res.rows.length > 0) {
						res.rows.forEach(it => {
							this.myExchangeOrder.push(it)
						})
					}
				})
			},
			tabSelect(e) {
				console.log(e)
				this.tabCur = e.currentTarget.dataset.id;
				if (this.tabCur == 0) {
						this.myJoinList = []
						// this.queryForm.pageNum = 1
						this.getMyJoinList()
					} else {
						this.myExchangeOrder = []
						this.orderQuery.pageNum = 1
						this.getMyExchangeOrderFun()
					}
						
			},
			getMyJoinList() {
				myJoinListApi(this.queryForm).then(res => {
					this.myJoinList = []
					if (res.data.activities && res.data.activities.length > 0) {
						res.data.activities.forEach(it => {
							this.myJoinList.push(it)
						})
					}
					if (res.data.platformActivities && res.data.platformActivities.length > 0) {
						res.data.platformActivities.forEach(it => {
							this.myJoinList.push(it)
						})
					}
				})
			},
			changePage() {
				console.log('翻页')
				if (this.myJoinList.length < this.total) {
					this.queryForm.pageNum++
					this.getMyJoinList()
				}
			},
			toInfo(it) {
				uni.navigateTo({
					url: '/pagesActivity/myActivityDetail?batchId=' + it.batchId
				})
			},
			// 订单详情
			toOrderInfo(it) {
				uni.navigateTo({
					url: '/pagesCoin/orderInfo?orderId=' + it.id + '&goodsId=' + it.goodsId
				})
			},
			changeTag(key) {
				this.curTag = key
				this.orderQuery.pageNum = 1
				this.myExchangeOrder = []
				if(key == 0) {
					this.queryForm.status = 1
				} else if(key == 1) {
					this.queryForm.status = 2
				}else if(key == 2) {
					delete this.queryForm.status
				}
				this.getMyJoinList()
			},
			changeCoinTag(key) {
				this.curCoinTag = key
				this.orderQuery.pageNum = 1
				this.myExchangeOrder = []
				if(this.curCoinTag == 0) {
					delete this.orderQuery.status
				}else {
					this.orderQuery.status = key
				}
				this.getMyExchangeOrderFun()
			},
			changePageCoin() {
				console.log('翻页2')	
				if (this.myExchangeOrder.length < this.orderTotal) {
					this.orderQuery.pageNum++
					this.getMyExchangeOrderFun()	
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activitypage {
		// background: #FDFDFD;
		height: 100vh;

		.tab {
			color: #A5A7B9;
			font-size: 32rpx;
			font-weight: 500;
		}

		.active {
			color: #0B0E26;
		}

		// 累积活动
		.activity-item {
			border-radius: 20rpx;
			background: #FDFDFD;
			box-sizing: border-box;
			border: 1px solid #F2F2F2;
			width: 694rpx;
			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: 470rpx;
					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;
				}
			}
		}
	
		.coin-item {
			border-radius: 12rpx;
			background: #FDFDFD;
			padding: 24rpx;
			box-sizing: border-box;
			margin-bottom: 32rpx;
			.coverImg {
				border-radius: 12rpx;
				background: #E9E9E9;
				width: 132rpx;
				height: 176rpx;
				margin-right: 24rpx;
			}
			.title {
				font-size: 24rpx;
				font-weight: 500;
				color: #0B0E26;
			}
			.subTitle {
				font-size: 20rpx;
				font-weight: 500;
				color: #979797;
			}
			.num {
				font-size: 48rpx;
				font-weight: 500;
				color: #2B2D33;
			}
		}
	}
	.tag {
		background-color: transparent;
		border-radius: 12rpx;
		padding: 12rpx 30rpx;
		border: 1px solid #000;
		margin-right: 24rpx;
		color: #0B0E26;
		font-weight: 500;
	}
	
	.active-tag {
		background: #39E5B1;
		font-weight: bold;
		border: 1px solid #39E5B1;
	}
</style>