<template>
	<view class="page">
		<template v-if="showError">
			<view class="flex flex-col align-center justify-center" style="height: 100vh;">
				<view class="err-title">无效的二维码</view>
				<view class="cu-btn err-btn" @click="back"><image src="@/static/undo.png" style="width: 42rpx;height: 42rpx;margin-right: 10rpx;"></image>返回</view>
			</view>
			
		</template>
		<template v-else>
			<view class="flex-1" style="overflow-y: auto;">
				<!-- 已领取 -->
				<view v-if="info.qrcode.qrcodeStatus == 1" class="lq-state-box">
					<image src="@/static/information.png" class="img"></image>
					<text>该桶产品已于 {{ info.qrcode.verifyTime }} 扫码领取返利</text>
				</view>
				<!-- 转为赠品 -->
				<view v-if="info.qrcode.qrcodeStatus == 3" class="lq-state-box gift-state">
					<image src="@/static/gift.png" class="img"></image>
					<text>该桶产品已转为赠品</text>
				</view>
				<!-- 扫码成功 -->
				<view v-if="info.qrcode.qrcodeStatus == 0" class="scs-state-box">
					<image src="@/static/tick-circle@2x.png" class="img"></image>
					<!-- <text>{{ info.qrcodeStatus == 3 ? '领取成功啦！' : '扫码成功！'}}</text> -->
					<text>扫码成功！</text>
				</view>
				<view v-if="info.qrcode.qrcodeStatus == 0" class="flex align-center"
					style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;">
					<image src="@/static/flag.png" style="width: 48rpx;height: 48rpx;"></image>
					识别产品
				</view>
				<view v-if="beer" class="goods-box">
					<image :src="beer.cover" class="cover"></image>
					<view class="flex-1">
						<view class="flex justify-between align-center" style="margin-bottom: 28rpx;">
							<view class="flex align-center">
								<text
									style="font-size: 40rpx;color: #141415;font-weight: 600;margin-right: 8rpx;">{{ beer.beerName}}</text>
								<!-- <image src="@/static/verify-mark.png" style="width: 48rpx;height: 48rpx;"></image> -->
							</view>

							<!-- <text class="cuIcon-like" style="color: #979797;font-size: 48rpx;"></text> -->
						</view>
						<view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.brandName}}</view>
						<view style="margin-bottom: 38rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.launchDate }}</view>
						<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 16rpx;color: #5F5F63;">
							<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;"></text>
							{{ beer.beerOverallRating}}
						</text>
						<text style="color: #5F5F63;margin-left: 16rpx;">{{beer.beerReviewsCount}} 条评论</text>
					</view>
				</view>
				<!-- 去评论区域 -->
				<!-- <view v-if="info.qrcodeStatus == 1" class="flex align-center justify-between tip">
				<view class="flex align-center">
					<image src="@/static/add.png" class="icon"></image>
					<text>首次写酒评还能领取<text style="color: #DE3C4B;;">XXX</text>品牌啤酒币哦</text>
				</view>
				
				<text style="color: #DE3C4B;;">这就去评</text>
			</view> -->
				<!-- 参与活动提示 -->
				<template v-if="info.qrcode.qrcodeStatus == 0">
					<view class="flex align-center"
						style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;margin-top: 52rpx;">
						<image src="@/static/cup-green.png" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
						</image>
						品牌福利等你领
					</view>
					<view class="active-box">
						<view class="title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币</view>
						<text class="sub">品牌啤酒币可用于兑换好礼</text>
					</view>
				</template>

				<!-- 厂牌返利提示 -->
				<template v-if="info.qrcode.qrcodeStatus == 1">
					<view class="flex align-center"
						style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;margin-top: 52rpx;">
						<image src="@/static/cup-red.png" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
						</image>
						厂牌返利已领取
					</view>
					<view class="active-box">
						<view class="title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币已到账</view>
						<text class="sub">品牌啤酒币可用于兑换好礼</text>
					</view>
				</template>
				<view v-if="activitySum > 1 && info.qrcode.qrcodeStatus == 0" style="margin-bottom: 32rpx">
					*该产品有多个进行中活动重叠，请<text style="color:#DE3C4B">选择要计入的活动</text></view>
				<template v-if="info.qrcode.qrcodeStatus == 0">
					<view v-for="(it, index) in activity" :key="index" :class="{'active': it.id == activityId}"
						@click="selectPPF(it)">
						<view class="activity-item flex">
							<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.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累积扫码 ≥ {{ 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>
								</view>
							</view>
						</view>
					</view>

					<view v-for="(it, index) in platformActivity" :key="index"
						:class="{'ptActive': it.id == platformActivityId}" @click="selectPlatform(it)">
						<view class="activity-item flex">
							<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.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累积扫码 ≥ {{ it.activityTarget}}桶</view>
								<scroll-view 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>
								</view>
							</view>
						</view>

					</view>
				</template>
			</view>
			<view class="flex align-end flex-col">
				<view v-if="info.qrcode.qrcodeStatus == 2" class="lq-tip flex align-center">
					<image src="@/static/warning-2.png" style="width: 30rpx;height:30rpx;margin-right: 12rpx;"></image>
					所有酒款只可领取一次，请确认后操作
				</view>
				<view class="flex justify-between align-center" style="width: 100%;">
					<view v-if="info.qrcode.qrcodeStatus != 1 && info.qrcode.qrcodeStatus != 3" class="btn" @click="back">
						<image src="@/static/undo.png" class="icon"></image>
						回头再说
					</view>
					<view v-else class="btn" @click="toWinelist">
						<image src="@/static/document.png" class="icon"></image>
						生成酒单
					</view>
					<view v-if="info.qrcode.qrcodeStatus == 0" class="btn"
						style="background-color: #71F4B4;" @click="handleReceive">
						<image src="@/static/send.png" class="icon"></image>
						立即领取
					</view>
					<view v-else-if="info.qrcode.qrcodeStatus == 3" class="btn gift-btn" @click="share">
						<image src="@/static/send.png" class="icon"></image>
						分享赠品
					</view>
					<view v-else class="btn" style="background-color: #71F4B4;" @click="share">
						<image src="@/static/send.png" class="icon"></image>
						分享上新
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		consumeCode,
		getQrcodeInfo
	} from '@/api/bar.js'
	export default {
		data() {
			return {
				showError: false,
				info: {
					qrcode: {
						qrcodeStatus: null, // 1 已领取  2 扫码成功  3 核销成功
					},
				},
				activity: [], // 活动列表
				platformActivity: [], // 平台活动
				activityList: [],
				activitySum: 0, // 活动数量
				beer: null,
				result: null, // 扫码结果 code
				activityId: null, // 活动id
				platformActivityId: null, // 平台活动id
				latitude: null,
				longitude: null,
			};
		},
		onLoad({
			result,
			latitude,
			longitude
		}) {
			this.result = result
			this.latitude = latitude
			this.longitude = longitude
			// 查询二维码信息
			this.getQrcodeInfoFun(result)
		},
		methods: {
			// 查询二维码信息
			getQrcodeInfoFun(code) {
				getQrcodeInfo({
					code,
					latitude: this.latitude,
					longitude: this.longitude
				}).then(res => {
					console.log(res.data)
					this.info = res.data
					this.beer = res.data.beer
					this.activity = res.data.activity || [] // 活动列表
					this.platformActivity = res.data.platformActivity || [] // 平台活动
					if (this.activity && this.activity.length > 0) {
						this.activitySum += this.activity.length
						this.activityId = this.activity[0].id
					}
					if (this.platformActivity && this.platformActivity.length > 0) {
						this.activitySum += this.platformActivity.length
						this.platformActivityId = this.platformActivity[0].id
					}
					// if (this.activitySum > 0) return
					// if (res.data.qrcode.qrcodeStatus == 0) { // 未核销
					// 	this.consumeCodeFun(code)
					// } else 
					// if (res.data.qrcode.qrcodeStatus == 1) { // 已核销
					// 	uni.showToast({
					// 		title: '该二维码已核销',
					// 		icon: 'none'
					// 	})
					// } else if (res.data.qrcode.qrcodeStatus == 2) { // 已失效
					// 	uni.showToast({
					// 		title: '该二维码已失效',
					// 		icon: 'none'
					// 	})
					// }
				}).catch(err => {
					console.log(err, 'err')
					this.showError = true
				})
			},
			// 核销二维码
			consumeCodeFun(code) {
				consumeCode({
					code,
					latitude: this.latitude,
					longitude: this.longitude
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
					this.getQrcodeInfoFun(code)
				})
			},
			// 立即领取
			handleReceive() {
				const data = {
					code: this.result,
					latitude: this.latitude,
					longitude: this.longitude
				}
				if (this.activityId) {
					data.activityId = this.activityId
				}
				if (this.platformActivityId) {
					data.platformActivityId = this.platformActivityId
				}
				consumeCode(data).then(res => {
					console.log(res)
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
					this.getQrcodeInfoFun(this.result)
				})
			},
			back() {
				uni.navigateBack()
			},
			// 选择品牌方活动
			selectPPF(item) {
				this.activityId = item.id
			},
			// 选择平台活动
			selectPlatform(item) {
				this.platformActivityId = item.id
			},
			// 生成酒单
			toWinelist() {
				uni.navigateTo({
					url: '/pagesActivity/winelist?beerId=' + this.beer.id
				})
			},
			share() {
				uni.downloadFile({
					url: this.beer.cover,
					success: (res) => {
						console.log(res)
						// #ifdef MP-WEIXIN
						uni.showShareImageMenu({
							provider: 'weixin',
							// path: '/pages/index/featureInfo?id=' + this.id,
							path: res.tempFilePath,
							shareType: 0,
							success: (res) => {
								console.log(res)
							},
							fail: (err) => {
								console.log(err)
							}
						})
						// #endif
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-color: #FDFDFD;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0rpx 26rpx 60rpx;
		.err-title {
			font-family: Roboto;
			font-size: 36rpx;
			font-weight: normal;
			color: #3D3D3D;
			margin-bottom: 32rpx;
		}
		.err-btn {
			font-family: Roboto;
			font-size: 28rpx;
			font-weight: normal;
			color: #0B0E26;
			border-radius: 12rpx;
			background: #39E5B1;
			width: 200rpx;
			height: 88rpx;
		}
		// 已领取
		.lq-state-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 92rpx;
			padding-top: 116rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 26rpx;
			}
		}

		// 扫码成功
		.scs-state-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			padding-top: 30rpx;
			font-size: 36rpx;
			color: #1E2019;
			font-weight: bold;

			.img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 48rpx;
			}
		}

		.goods-box {
			border-radius: 30rpx;
			background: rgba(255, 255, 255, 0.2);
			box-sizing: border-box;
			border: 1px solid #F2F2F2;
			box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
			display: flex;
			padding: 16rpx 32rpx;

			.cover {
				width: 208rpx;
				height: 300rpx;
				border-radius: 30rpx;
				margin-right: 14rpx;
			}
		}

		.tip {
			padding: 12rpx 40rpx 12rpx 18rpx;
			font-size: 20rpx;
			color: #5E5F60;
			background: rgba(254, 224, 52, 0.36);
			border-radius: 20rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}

		.active-box {
			border-radius: 32rpx;
			background: rgba(255, 255, 255, 0.2);
			box-sizing: border-box;
			border: 1px solid #F2F2F2;
			box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
			padding: 24rpx 38rpx;
			margin-bottom: 40rpx;

			.title {
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: normal;
				color: #3D3D3D;

			}

			.sub {
				font-family: Source Han Sans;
				font-size: 20rpx;
				font-weight: 500;
				line-height: normal;
				color: rgba(151, 151, 151, 0.749);
			}
		}

		// .card {
		// 	border-radius: 40rpx;
		// 	background: #FFFFFF;
		// 	box-sizing: border-box;
		// 	border: 1px solid #F2F2F2;
		// 	.avatar {
		// 		width: 160rpx;
		// 		height:160rpx;
		// 		border-radius: 8rpx;
		// 	}
		// }
		.ptActive {
			border: 1px solid #71F4B4;
			padding: 14rpx 10rpx;
			border-radius: 20rpx;
			margin-bottom: 32rpx;
			box-sizing: border-box;

			.activity-item {
				width: 673rpx;
				margin-bottom: 0px;
			}
		}

		.active {
			border: 1px solid #FEE034;
			padding: 14rpx 10rpx;
			border-radius: 20rpx;
			margin-bottom: 32rpx;
			box-sizing: border-box;

			.activity-item {
				width: 673rpx;
				margin-bottom: 0px;
			}
		}

		// 累积活动
		.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;
				}
			}
		}

		.lq-tip {
			border-radius: 20rpx;
			background: rgba(233, 233, 233, 0.38);
			box-sizing: border-box;
			border: 1px solid rgba(233, 233, 233, 0.3804);
			padding: 10rpx;
			font-size: 20rpx;
			color: #5E5F60;
			margin-bottom: 14rpx;
			width: 400rpx;
		}

		.btn {
			border-radius: 30rpx;
			box-sizing: border-box;
			width: 306rpx;
			height: 96rpx;
			border-radius: 30rpx;
			background-color: #FEE034;
			font-size: 28rpx;
			color: #1E2019;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 22rpx;
			}
		}

		// 转赠品状态
		.gift-state {
			.img {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 26rpx;
			}
			text {
				color: #DE3C4B;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
		
		// 赠品按钮样式
		.gift-btn {
			background-color: #DE3C4B !important;
			color: #FFFFFF !important;
		}
	}
</style>