<template>
	<view class="page-content">
		<view class="bg-white progress-box margin-bottom-sm" style="height: 600rpx;border-radius: 0 0 36rpx 36rpx;"
			:style="{'padding-top': statusBaeHeight + 'px'}">
			<process v-if="activityInfo.stage == 1" :value="processNum" progress_width="360" bg_color="#E3E3E5" border_width="6" progress_height="350"
				start_color="#FEE034" end_color="#71F4B4" :total="activityInfo.duration"></process>
			<process v-else :value="0" progress_width="360" bg_color="#E3E3E5" border_width="6" progress_height="350"
					start_color="#FEE034" end_color="#71F4B4" :total="activityInfo.duration"></process>
			<view v-if="activityInfo.stage == 1" class="progress-text">
				<view class="margin-bottom-sm">活动招募还剩</view>
				<view class="text-red margin-bottom-lg">
					<text class="text-sl text-bold">{{ activityInfo.remainingDays}}</text>天
				</view>
				<view>招募截止 {{ activityInfo.endDate }}</view>
			</view>
			<view v-if="activityInfo.stage == 0" class="progress-text">
				
				<view class="margin-bottom-sm">活动未开始</view>
			</view>
			<view v-if="activityInfo.stage == 2 || activityInfo.stage == 3" class="progress-text">
				<view class="margin-bottom-sm">活动已结束</view>
			</view>
			<view v-if="activityInfo.stage == 4" class="progress-text">
				<view class="margin-bottom-sm">活动停止</view>
			</view>
		</view>
		<view class="bg-white padding margin-bottom-sm" style="border-radius:36rpx;">
			<view v-if="activityInfo.beers" class="flex justify-between align-center margin-bottom" @click="toBrand">
				<image :src="activityInfo.beers[0].breweryLogo" class="margin-right"
					style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image>
				<view class="flex-1">
					<view style="color:#979797">活动发起方</view>
					<view class="word-all margin-bottom-sm" style="color:#1E2019">{{ activityInfo.beers[0].brandName}}</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<template v-if="currentTab == 1">
				<view class="margin-bottom-xs" style="color:#0B0E26">首次扫码开始累计  <text style="color: #DE3C4B;">{{activityInfo.duration || '-'}} 天内</text></view>
				<view class="margin-bottom-xs" style="color:#0B0E26">以下酒款累计扫码 ≥ {{activityInfo.activityTarget || '-'}} 桶 </view>
			</template>
			<scroll-view v-if="currentTab == 1" scroll-x="true" class="scroll-container">
				<view v-for="(it, index) in activityInfo.beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
					<view class="beer-box">
						<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>
				</view>
				
			</scroll-view>
		</view>
		<!-- 1 商品  2 啤酒币 -->
		<view v-if="activityInfo.activityRewardType == 1 || currentTab == 1" class="bg-white padding margin-bottom-sm"
			style="border-radius:36rpx;">
			<view class="margin-bottom-sm">挑战奖励</view>
			<view v-if="activityInfo.activityRewardGoods" class="flex align-center">
				<image :src="activityInfo.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="activityInfo.activityRewardType == 2" class="bg-white padding margin-bottom-sm"
			style="border-radius:36rpx;">
			<view class="margin-bottom-sm">奖励</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">{{ activityInfo.activityRewardCount }}</text></view>
				</view>
			</view>
		</view>
		<!-- <view style="height: 200rpx;background-color: transparent;"></view> -->
		<view class="bg-white flex justify-center align-start padding-top"
			style="border-radius:36rpx 36rpx 0 0;height: 182rpx;width: 100%;position: fixed;bottom:0;gap:50rpx">
			<!-- 活动未开始 -->
			<template v-if="true">
				<view class="bg-zd2 padding text-center" style="border-radius: 30rpx;width: 434rpx;font-size: 36rpx;" @click="handleScan">
					<text class="cuIcon-qr_code margin-right-xs"></text>
					扫桶标自动开始累计
				</view>
			</template>
			<!-- <template v-if="false">
				<view class="flex flex-col justify-center align-start">
					<text style="color: #909090;font-size: 28rpx;">活动状态</text>
					<text style="color: #FFD52B;font-size: 36rpx;">累计中</text>
				</view>
				<view class="bg-zd2 padding text-center" style="border-radius: 30rpx;width: 434rpx;font-size: 36rpx;">
					<text class="cuIcon-qr_code margin-right-xs"></text>
					扫码累计
				</view>
			</template> -->
			
		</view>
	</view>
</template>

<script>
	import {
		getActivityInfo
	} from '@/api/bar.js'
	import process from './components/progress.vue';
	export default {
		components: {
			process
		},
		data() {
			return {
				statusBaeHeight: 40,
				id: '',
				activityInfo: {},
				currentTab: 1,
			};
		},
		onLoad({
			id
		}) {
			this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
			this.id = id
			this.init()
		},
		computed: {
			processNum() {
				if(this.activityInfo.duration) {
					return (this.activityInfo.duration - this.activityInfo.remainingDays) / this.activityInfo.duration * 100
				}else {
					return 0
				}
				
			}
		},
		methods: {
			init() {
				getActivityInfo(this.id).then(res => {
					this.activityInfo = res.data
					this.activityInfo.remainingDays = this.getRemainingDays(res.data.endDate)
				})
			},
			changeTab(index) {
				this.currentTab = index
			},
			// 跳转 品牌方
			toBrand() {
				uni.navigateTo({
					url: '/pages/index/brandHome?breweryId=' + this.activityInfo.breweryId
				})
			},
			
			// 计算剩余天数
			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;
			},
			handleScan() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success: (res) => {
									console.log(res)
									this.startScan()
								},
								fail: (err) => {
									uni.showModal({
										title: '提示',
										content: '请先授权获取您的位置信息',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														if (res.authSetting['scope.userLocation']) {
															this.startScan()
														}
													}
												})
											} else if (res.cancel) {
												console.log('用户点击取消')
											}
										}
									})
								}
							})
						}else {
							this.startScan()
						}
					},
				})
			},
			// 开始扫码
			startScan() {
				this.handleGetLocation()	
			},
			handleGetLocation() {
				uni.getLocation({
					type: "gcj02",
					success: (resLoc) => {
						// console.log(resLoc)
						uni.scanCode({
							success: (res) => {
								if(!resLoc.latitude && !resLoc.longitude) {
									uni.showToast({
										title: '位置信息获取失败',
										icon: 'none',
										})
									return
								}
								uni.navigateTo({
									url: '/pagesActivity/scanResult?result=' + res.result + '&latitude=' + resLoc.latitude + '&longitude=' + resLoc.longitude
								})
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		// overflow-y: auto;
		min-height: 100vh;
		padding-bottom: 200rpx;

		.progress-box {
			position: relative;

			.progress-text {
				position: absolute;
				top: 200rpx;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
			}

			.tab-box {
				position: absolute;
				width: 674rpx;
				top: 475rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 30rpx;
				background: #F2F2F2;
				padding: 8rpx;
				display: flex;
				justify-content: space-between;

				.defTab {
					width: 50%;
					border-radius: 30rpx;
					background: #F2F2F2;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Source Han Sans;
					font-size: 32rpx;
					font-weight: 500;
					color: #0B0E26;
					padding: 16rpx 48rpx;
				}

				.active {
					background-color: #71F4B4;
				}
			}
		}

		.scroll-container {
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			min-height: 505rpx;
			.row-box {
				&:nth-child(1) {
					margin-left: 32rpx;
				}
			}
			.beer-box {
				width: 208rpx;
				background: #FFFFFF;
				margin-right: 16rpx;
				margin-bottom: 36rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.cover {
					width: 208rpx;
					height: 300rpx;
					border-radius: 30rpx;
					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;
				}
			}
		}

		// 奖励盒子
		.reward-box {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 30rpx;
			margin-bottom: 36rpx;
		}
	}
</style>