<template>
	<view class="page">
		<image class="banner" mode="aspectFill" :src="info.cover"></image>
		<view class="container">
			<view class="rules-btn" @click="handleRules">活动细则</view>
			<view class="share-btn" @click="handleShare">分享</view>
			<view class="header-box">
				<view class="title">{{info.pageName}}</view>
				<view class="desc">本月完成限定酒款累计目标，赢取奖励</view>
			</view>
			<view v-if="info.activity" class="top">
				<view class="box-title">活动即将结束</view>
				<view style="color: #9E9E9E;font-size: 24rpx;font-weight: 500;margin-bottom: 16rpx;">
					{{info.activity.endDate}}
				</view>
				<view class="num-box flex justify-between" style="color: #9E9E9E;font-size: 24rpx;font-weight: 500;">
					<text>0桶</text>
					<text>{{ info.activity.activityTarget}}桶</text>
				</view>
				<view class="num-box">
					<view class="sub" style="margin-bottom: 16rpx;">时间：首次扫码开始累计 <text
							style="color:#DE3C4B">{{info.activity.duration || '30'}}天内</text></view>
					<view class="sub">目标：<text style="color:#DE3C4B">限定酒款</text>累计扫码 ≥
						{{ info.activity.activityTarget}}桶
					</view>
				</view>
				<view v-if="info.activity.activityRewardType == 1">
					<view class="margin-bottom-sm" style="padding-top: 24rpx;">目标奖励</view>
					<view v-if="info.activity.activityRewardGoods" class="flex align-center">
						<image :src="info.activity.activityRewardGoods.goodsCover"
							style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
						<view class="flex-1">
							<view class="flex flex-1 align-center">
								<view class="flex-1">
									<view class="word-all margin-bottom-sm" style="color:#1E2019">
										{{activityInfo.activityRewardGoods.goodsName}}
									</view>
									<!-- <view class="word-all margin-bottom-sm" style="color:rgba(30, 32, 25, 0.8)">风味西打酒</view>
									<view class="word-all margin-bottom-sm" style="color:#1E2019">TasteRoom 风味屋</view> -->
								</view>
								<view class="text-red text-right">x<text
										class="text-xxl text-bold">{{activityInfo.activityRewardCount}}</text></view>
							</view>

						</view>
					</view>
				</view>
				<view v-if="info.activity.activityRewardType == 2" class="bg-white margin-bottom-sm"
					style="border-radius:36rpx;">
					<view class="margin-bottom-sm" style="padding-top: 24rpx;">目标奖励</view>
					<view class="flex align-center">
						<!-- <image src="@/static/img/icon-logo.png" class="margin-right"
							style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image> -->
						<view class="flex flex-1 align-center">
							<view class="flex-1 word-all" style="color:#1E2019">啤酒币</view>
							<view class="text-red text-right">x<text
									class="text-xxl text-bold">{{ info.activity.activityRewardCount }}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="flex justify-between">
					<text class="box-title">限定酒款11</text>
					<image src="@/static/arrow-right.png" class="more-icon"></image>
				</view>
				<!-- <scroll-view scroll-x="true" class="scroll-container">
					
					<view class="beer-box" v-for="(it, index) in info.beers" :key="index" @click="toReview(it)">
						<image :src="it.cover" class="cover"></image>
						<view class="title word-all">{{ it.beerName}}</view>
						<view class="desc word-all">{{ it.beerStyles }}</view>
						<view class="desc word-all">{{ it.brandName }}</view>
						<view class="flex align-center num">
							<image src="@/static/vector.png" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
							</image>
							{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）
						</view>
					</view>
				</scroll-view> -->
				<rowBeer :beers="info.beers" />
			</view>
			<view class="flex justify-center">
				<button class="cu-btn bg-zd scan-btn" @click="startScan">
					<text class="cuIcon-qr_code" style="margin-right: 20rpx;"></text>
					扫桶标自动开始累计</button>
			</view>
		</view>
		
	<uni-popup ref="p1" type="center" :is-mask-click="false">
		<view class="p-body flex flex-col" style="width: 500rpx;height: 660rpx;">
			<view style="padding: 28rpx;flex:1">
				<view class="title">活动细则</view>
				<view class="p-text margin-bottom">累积活动达成目标值后,系统自动发起兑付,无需人工操作,对应活动的品牌方会安排兑付相应的返利商品/啤酒币.
					您可以在'我参与的'栏目查看进度.</view>
			</view>
			<view class="p-btn" @click="closeP(1)">我知道了</view>
		</view>
	</uni-popup>
	
	</view>
</template>

<script>
	import {
		getFeaturePage
	} from "@/api/platform.js"
	import rowBeer from '@/components/rowBeer.vue'
	export default {
		components: {
			rowBeer
		},
		data() {
			return {
				id: '',
				info: {}, // 专辑信息
				showRules: false, // 活动细则
			};
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getFeatureInfo()
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			// 获取专辑信息
			getFeatureInfo() {
				getFeaturePage(this.id).then(res => {
					console.log(res)
					this.info = res.data
				})
			},
			// 跳转酒评页
			toReview(it) {
				uni.navigateTo({
					url: "/pages/index/review?beerId=" + it.id
				})
			},
			// 活动细则
			handleRules() {
				this.$refs.p1.open()
			},
			// 关闭弹窗
			closeP() {
				this.$refs.p1.close()
			},
			// 分享
			handleShare() {
				if(this.info.cover.include('http://')){
					this.info.cover.replace('http://','https://')
				}
				uni.downloadFile({
					url: this.info.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
					}
				})


			},
			startScan() {
				uni.switchTab({
					url: "/pages/index/scan?featureId=" + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.banner {
			width: 100%;
			min-height: 600rpx;
		}

		.container {
			position: relative;
			border-radius: 12rpx;
			padding: 24rpx;
			padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
			background: #F2F2F2;
			margin-top: -40rpx;
			z-index: 1;

			.rules-btn {
				position: absolute;
				top: -70rpx;
				left: 24rpx;
				font-family: Roboto;
				font-size: 20rpx;
				font-weight: normal;
				color: #0B0E26;
				border-radius: 40rpx;
				background: #D8D8D8;
				width: 126rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
			}

			.share-btn {
				position: absolute;
				top: -70rpx;
				right: 24rpx;
				font-family: Roboto;
				font-size: 20rpx;
				font-weight: normal;
				color: #0B0E26;
				border-radius: 40rpx;
				background: #D8D8D8;

				width: 114rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
			}

			.header-box {
				.title {
					font-family: Roboto;
					font-size: 32rpx;
					font-weight: bold;
					color: #0B0E26;
					margin-bottom: 16rpx;
				}

				.desc {
					font-family: Roboto;
					font-size: 20rpx;
					font-weight: 500;
					color: #9D9D9D;
					margin-bottom: 16rpx;
				}
			}

			.top {
				border-radius: 12rpx;
				background: #FFFFFF;
				padding: 24rpx;
				margin-bottom: 36rpx;

				.box-title {
					font-family: Roboto;
					font-size: 36rpx;
					font-weight: bold;
					color: #3D3D3D;
					margin-bottom: 20rpx;
				}

				.num-box {
					padding: 24rpx 0;
					border-bottom: 1px solid #D8D8D8;

					.sub {
						font-family: Roboto;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 42rpx;
					}
				}

			}

			.bottom {
				border-radius: 12rpx;
				background: #FFFFFF;
				padding: 24rpx;
				margin-bottom: 36rpx;

				.box-title {
					font-family: Roboto;
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
				}

				.more-icon {
					width: 48rpx;
					height: 48rpx;
					transition: all 0.3;
					transform: rotate(-90deg);
				}

				// .scroll-container {
				// 	display: flex;
				// 	flex-direction: row;
				// 	white-space: nowrap;
				// 	height: 490rpx;

				// 	.beer-box {
				// 		width: 208rpx;
				// 		background: #FFFFFF;
				// 		margin-right: 16rpx;
				// 		margin-bottom: 36rpx;
				// 		box-sizing: border-box;
				// 		display: inline-block;

				// 		&:nth-child(1) {
				// 			margin-left: 32rpx;
				// 		}

				// 		.cover {
				// 			width: 208rpx;
				// 			height: 300rpx;
				// 			border-radius: 12rpx;
				// 			margin-bottom: 18rpx;
				// 		}

				// 		.title {
				// 			font-size: 28rpx;
				// 			color: #1E2019;
				// 			margin-bottom: 12rpx;
				// 			color: #19191B;
				// 		}

				// 		.desc {
				// 			font-size: 24rpx;
				// 			color: #A5A7B9;
				// 			margin-bottom: 12rpx;
				// 			color: #979797;
				// 		}

				// 		.num {

				// 			font-size: 20rpx;
				// 			color: #5F5F63;
				// 		}
				// 	}
				// }
			}

			.scan-btn {
				border-radius: 12rpx;
				width: 654rpx;
				height: 88rpx;
			}
		}

	}

	.p-body {
		border-radius: 12rpx;
		background: #F2F2F2;

		.title {
			margin-bottom: 46rpx;
			font-family: Roboto;
			font-size: 32rpx;
			font-weight: normal;
			text-align: center;
			color: #3D3D3D;
		}

		.p-text {
			font-family: Roboto;
			font-size: 28rpx;
			font-weight: normal;
			color: #9E9E9E;
		}

		.p-btn {
			width: 100%;
			height: 90rpx;
			border-radius: 0px 0px 12rpx 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #39E5B1;
			font-family: Roboto;
			font-size: 32rpx;
			font-weight: normal;
			color: #3D3D3D;
		}
	}
</style>