<template>
		<view>
			<!-- <view class="guidance" v-if="guidance" :style="{'background-image':'url(/static/guidance/' + guidanceIndex + '.jpg)'}">
				<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
				<image src="@/static/guidance/step.png" mode="" :class="{'step0':guidanceIndex === 0,'step1':guidanceIndex === 1,'step2':guidanceIndex === 2,'step3':guidanceIndex === 3,}" v-if="guidanceIndex < 3" @click="nextStep"></image>
				<image src="@/static/guidance/kown.png" mode="" class="kown-btn" v-else @click="skip"></image>
			</view> -->
			<!-- 新手引导 -->
			<swiper class="guidance" v-show="guidance" disable-touch :current="guidanceIndex">
				<swiper-item>
					<view class="guidance-img guidance-img0">
						<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
						<image src="@/static/guidance/step.png" mode="" class="step0" @click="nextStep"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="guidance-img guidance-img1">
						<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
						<image src="@/static/guidance/step.png" mode="" class="step1" @click="nextStep"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="guidance-img guidance-img2">
						<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
						<image src="@/static/guidance/step.png" mode="" class="step2" @click="nextStep"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="guidance-img guidance-img3">
						<image src="@/static/guidance/skip.png" mode="" class="skip-btn" @click="skip"></image>
						<image src="@/static/guidance/kown.png" mode="" class="kown-btn" @click="skip"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 活动内容 -->
			<view class="activity-page" v-show="!guidance">
				<scroll-view scroll-y="true" class="scroll-main">
				<!-- <image src="@/static/rank/fh.png" mode="aspectFit" class="header-back" @click="goBack"></image> -->
				<image src="@/static/activity/back.png" mode="aspectFit" class="header-back" @click="goBack"></image>
				<view class="header">
					<view class="rule"></view>
					<view class="title">{{detailData.name}}</view>
					<image src="@/static/activity/rule.png" class="rule" mode="" @click="ruleVisible = true"></image>
				</view>
				<view class="header-time">{{detailData.startTime}} —— {{detailData.endTime}}</view>
			
					<view class="spine-view" :style="{left:spineLeft,top:spineTop}">
						<image src="@/static/activity/gy.png" mode="aspectFit" class="person-icon"></image>
						<!-- <SpineCom skelUrl="/static/spine/guan_yu/guan_yu.skel" atlasUrl="/static/spine/guan_yu/guan_yu.atlas" /> -->
					</view>
					<view class="list">
						 <!-- @click="getPosition(index)" -->
						<view v-for="(item,index) in detailData.taskList" :key="index" :id="`list-item-${index}`" :style="getBlockStyle(index)" class="list-item">
							
						</view>
					</view>
					<!-- 排行榜 -->
					<view class="rank">
						<view class="rank-header">
							<image src="@/static/activity/ckjl.png" class="look-draw" mode="" @click="lookDraw"></image>
							<image src="@/static/activity/yyy.png" class="look-draw look-zoom" mode="" @click="lookOne" v-if="detailData.boxId"></image>
						</view>
						
						<view class="rank-list">
							<view class="rank-item" v-for="(item,index) in detailData.topList" :key="index" :style="{ 'background-image': 'url(/static/activity/' + backgroundImages[index % backgroundImages.length] + ')' }">
								<view class="item-name">{{index+1}}.{{item.nickname}}</view>
								<view>{{Number(item.period) + 1}}轮{{Number(item.periodNum) + 1}}关</view>
							</view>
						</view>
					</view>
					<!-- 任务 -->
					<view class="task">
						<view class="task-main">
							<view class="">{{Number(detailData.curPeriod) + 1}} 轮 {{Number(detailData.curPeriodNum) + 1}} 关</view>
							{{detailData.curTask.description}}
						</view>
						<image src="@/static/activity/qwc.png" mode="aspectFit" class="accomplish-icon" @click="toComplete" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type !== 'PRODUCT_EXCHANGE' && detailData.taskList[detailData.curPeriodNum].conditions.type !== 'BOX_PURCHASE'"></image>
						<view  class="task-footer" :style="{'justify-content':detailData.curTask.conditions.isNormal ? 'space-between' : 'center'}" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type === 'PRODUCT_EXCHANGE' || detailData.taskList[detailData.curPeriodNum].conditions.type === 'BOX_PURCHASE'">
							<template>
								<image src="@/static/activity/detail.png" mode="" class="task-footer-icon" @click="goDetail" v-if="detailData.curTask.conditions.isNormal"></image>
							</template>
							<image src="@/static/activity/dh.png" mode="" class="task-footer-icon" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type === 'PRODUCT_EXCHANGE'" @click="exchangeShop"></image>
							<image src="@/static/activity/buy.png" mode="" class="task-footer-icon" v-if="detailData.taskList[detailData.curPeriodNum].conditions.type === 'BOX_PURCHASE'" @click="buyBox"></image>
						</view>
					</view>
				</scroll-view>
				<!-- 奖励content-frist -->
				<view v-if="rewardVisible" class="reward-main">
					<view class="reward">
						<view class="reward-content">
							<view class="content">
								<view class="content-item" v-for="(item,key) in detailData.rewardsMap" :key="key" :class="{one:key== 1,two:key==2,three:key==3}">
									<view class="content-item-title">第{{key}}名</view>
									<scroll-view scroll-x="true" class="award">
										<view class="award-item" v-for="(childItem,childIndex) in detailData.rewardsMap[key]" :key="childIndex">
											<image src="@/static/activity/tg.png" mode="aspectFit" v-if="childItem.type === 'POINTS' || childItem.type === 'PROMPT'" style="width: 76rpx;height: 43rpx;"></image>
											<image src="@/static/activity/yhq.png" mode="aspectFit" v-if="childItem.type === 'COUPON'" style="width: 76rpx;height: 43rpx;"></image>
											<!-- <view class="coupon" v-if="childItem.type === 'COUPON'">
												<template v-if="childItem.info">
													<template v-if="childItem.info.type === 'REDUCTION'"><text style="font-size: 20rpx;">立减</text>{{Number(childItem.info.amount)}}</template>
													<template v-if="childItem.info.type === 'DISCOUNT'">{{Number(childItem.info.amount)}}<text style="font-size: 20rpx;">折</text></template>
												</template>
											</view> -->
											<template v-if="childItem.info.coverResource">
												<image :src="childItem.info.coverResource.url" mode="aspectFit" v-if="childItem.type === 'PRODUCT'" style="width: 46rpx;height: 43rpx;"></image>
											</template>
											<view class="award-name" v-if="childItem.type === 'PRODUCT'">
												<template v-if="childItem.info">
													{{childItem.info.abbreviation}}*{{childItem.num}}
												</template>
											</view>
											<view class="award-name" v-else-if="childItem.type === 'COUPON'">
												<template v-if="childItem.info">
													<template v-if="childItem.info.type === 'REDUCTION'">立减{{Number(childItem.info.amount)}}*{{childItem.num}}</template>
													<template v-if="childItem.info.type === 'DISCOUNT'">{{Number(childItem.info.amount)}}折*{{childItem.num}}</template>
												</template>
											</view>
											<view class="award-name" v-else>{{typeObj[childItem.type]}}*{{childItem.num}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
						<image src="@/static/activity/close.png" mode="aspectFit" class="reward-close" @click="rewardVisible = false"></image>
					</view>
				</view>
				<!-- 规则 -->
				<view v-if="ruleVisible" class="reward-main">
					<view class="reward">
						<view class="rule-content">
							<scroll-view class="content ql-snow" scroll-y="true" scroll-with-animation>
								<rich-text :nodes="detailData.rule" class="ql-editor"></rich-text>
							</scroll-view>
						</view>
						<image src="@/static/activity/close.png" mode="aspectFit" class="reward-close" @click="ruleVisible = false"></image>
					</view>
				</view>
				<!-- 购买盲盒 -->
				<popup-view v-model="show" mode="bottom" border-radius="15" z-index="999" :maskCloseAble="false" closeable>
					<BuyBoxCom :detailData="detailBoxData" @payStatus="payStatus" @isOk="buySuccess" :boxType="boxType" :payNum="payNum" :isActivityReport="true" isActivity="runActivity" :curTaskId="detailData.id" :activityId="`_${detailData.id}_${detailData.curTask.id}`" :activityType="detailData.curTask.conditions.countType" :isNormal="detailData.curTask.conditions.isNormal"></BuyBoxCom>
				</popup-view>
				
				<template v-if="isPayDlgVisible">
					<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
				</template>
				
				
				
				<popup-view v-model="shopShow" mode="bottom" border-radius="15" z-index="999">
					<view class="popup-main">
						<view class="address">
							<view class="detail" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
								<view class="address-info">
									<view class="info">
										<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
										</image>
										<view class="name">选择收货地址，让快递到家~</view>
									</view>
								</view>
								<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
							</view>
							<view class="detail" @click="selectAddress" v-else>
								<view class="address-info">
									<view class="info">
										<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
										</image>
										<view class="name">{{address.receiver}}</view>
										<view class="phone">{{address.phone}}</view>
									</view>
									<view class="address-detail">{{address.province}} {{address.city}} {{address.area}}
										{{address.address}}</view>
								</view>
								<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
							</view>
							<!-- <image src="" mode="aspectFit" class="edit-icon"></image> -->
						</view>
						<view class="popup-header">
							<image :src="detailShopData.coverResource.url" mode="" class="popup-header-img" v-if="detailShopData.coverResource"></image>
							<view class="popup-info">
								<view class="popup-info-name">{{detailShopData.name}}</view>
								<view class="popup-info-price">
									<view class="popup-info-price-left">
										<view class="popup-clover">
											<image src="@/static/an/point.gif" mode="" class="clover-img"></image>
											{{detailShopData.mallPoint}}
										</view>
				
										<view class="popup-price">
											<!-- <text class="popup-symbol">¥</text>{{detailData.price.sale}} -->
										</view>
									</view>
									<view class="operation">
										<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub()"></image>
										<view class="operation-num">1</view>
										<image src="@/static/new/mine/add.png" mode="" class="add" @click="add()"></image>
									</view>
								</view>
							</view>
						</view>
				
						<view class="item">
							<view class="label">邮费</view>
							<view class="value">{{Number(previewData.deliveryFee)}}</view>
						</view>
						<view class="item">
							<view>实际支付</view>
							<view>
								<text>{{previewData.points}} 积分</text>
								<text style="margin-left: 10rpx;"
									v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
							</view>
						</view>
						<view class="mains" v-if="payList.length > 0 && previewData.deliveryFee > 0">
							<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
								<view class="left">
									<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
									{{item.label}}
								</view>
								<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
								<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
							</view>
						</view>
						<view class="agreement" @click="agreementVisible = !agreementVisible">
							<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
							<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
							我已满18岁，已阅读并同意
							<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
							<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
							<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
							<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
						</view>
						<view class="popup-footer">
							<view class="now-buy" @click="confirmBuy">
								立即支付
								<text>{{previewData.points}} 积分</text>
								<text style="margin-left: 20rpx;"
									v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
							</view>
						</view>
					</view>
				</popup-view>
				
				<template v-if="isPayShopDlgVisible">
					<isPayDlgVue @isOk="isPayShopStatus" @isCancel="isShopCancelCk" v-if="isPayShopDlgVisible" @againPay="againShopPay"></isPayDlgVue>
				</template>
			</view>
		</view>
</template>

<script>
	import SpineCom from '@/pages/components/spine.vue'
	import { activityDetailNewApi,pointClearApi,boxesDetail,boxOrderPaidApi,orderPaidApi,activityTaskAwardApi,activityGuideApi,setActivityGuideApi } from '@/API/index.js'
	import {
		productDetailApi,
		favorItemApi,
		delFavorItemApi
	} from '@/API/product.js'
	import {
		orderPreview,
		createShopOrder
	} from '@/API/order.js'
	import {
		userAddress
	} from '@/API/user.js'
	import BuyBoxCom from './components/buyBoxRun.vue'
	import isPayDlgVue from '@/pages/components/isPayDlg.vue'
	import '@/static/quill.snow.css'
	import reportClickFn from '@/utils/report.js'
	export default {
		data() {
			return {
				agreementVisible:false,
				backgroundImages: ['rank-1.png', 'rank-2.png', 'rank-3.png', 'rank-4.png'],
				spineLeft: "0rpx",
				spineTop: '0rpx',
				detailData:{
					curNum: 0,
					curPeriod: 0,
					curPeriodNum: 0,
					curTask: {},
					endTime: "",
					id: "",
					name: "",
					rewardsMap: {},
					rule: "",
					startTime: "",
					taskList: [],
					topList: [],
				},
				rewardVisible: false,
				ruleVisible:false,
				typeObj:{
					POINTS:'积分',
					COUPON:'优惠券',
					PROMPT:'提示卡'
				},
				couponObj:{
					'REDUCTION':"立减",
					'DISCOUNT':"折扣"
				  },
				  // 盲盒相关
				  show:false,
				  boxType:'buy',
				  detailBoxData:{},
				  isPayDlgVisible:false,
				  paidData:{},//用于支付轮训参数
				  payNum:0,
				  // 盲盒相关结束
				  // 商城相关
				  shopShow:false,
				  address:{},
				  detailShopData:{},
				  previewData:{},
				  payList:[],
				  payType: '',
				  timer:null,
				  isBtnStatus:false,
				  orderNo:'',
				  isPayShopDlgVisible:false,
				  // 商城相关结束
				  isPayBtn:false,
				  guidance:false,//新手引导
				  guidanceIndex:0,
				  guidanceImageData:{
					  '0':'',
					  '1':'',
					  '2':'',
					  '3':'',
					  '4':'',
				  }
			}
		},
		components: {
			SpineCom,
			BuyBoxCom,
			isPayDlgVue
		},
		onShow() {
			this.getActivityDetail()
		},
		onLoad() {
			this.getActivityGuide()
			uni.$on('backAddressParams', params => {
				if (params.id) {
					this.address = params
					this.getOrderPreview()
				}
			});
			// setTimeout(() => {
			// 	console.log(this.list)
			// 	this.spineLeft = this.list[0].left + '0px'
			// 	this.spineTop = this.list[0].top + '0px'
			// })
		},
		methods: {
			
			// 用户协议 隐私政策
			agreementCk(type){
				uni.navigateTo({
					url:`/pages/agreement/${type}`
				})
			},
			getActivityGuide(){
				activityGuideApi().then(res => {
					console.log(res)
					if(res.code === 200){
						this.guidance = res.data
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					this.guidance = false
				})
			},
			// 跳过新手引导
			skip(){
				setActivityGuideApi({status:false}).then(res => {
					if(res.code === 200){
						this.guidance = false
					}else{
						this.$api.msg(res.message)
					}
				})
				
			},
			// 下一步
			nextStep(){
				if(this.guidanceIndex < 3){
					this.guidanceIndex += 1
				}
			},
			goPage(type){
				uni.navigateTo({
					url:`/pages/agreement/nonage`
				})
			},
			// 商城相关
			// 选择地址
			selectAddress() {
				uni.navigateTo({
					url: `/pages/mine/address?type=select`
				})
			},
			// 获取地址列表
			getAddress() {
				uni.showLoading()
				userAddress({
					page: 1,
					size: 10
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						res.data.content.forEach(item => {
							if (item.isDefault === 1) {
								this.address = item
							}
						})
						// this.getDetail()
						this.getOrderPreview()
						// this.getUserInfo()
					} else {
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 获取商品详情
			getShopDetail(id) {
				uni.showLoading()
				let header = {}
				productDetailApi({
					id
				}, header).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						// res.data.rollingImagesResource.unshift(res.data.coverResource)
						this.detailShopData = res.data
						this.getAddress()
						this.shopShow = true
						// 兑换预览埋点
						reportClickFn('product_detail_preview_clk')
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			getOrderPreview() {
				uni.showLoading()
				orderPreview({
					productId: this.detailShopData.id,
					quantity: 1,
					userAddressId: this.address.id ? this.address.id : ''
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.previewData = res.data
			
						this.payList = []
						this.previewData.methods.forEach(item => {
							let objToAdd = null;
							if (item === 'ALIPAY') {
								objToAdd = {
									label: '支付宝支付',
									type: 'ALIPAY',
									visible: false,
									height: '30rpx',
									width: '30rpx',
									img: '../../static/new/pay/zfb.png',
								};
							} else if (item === 'WECHAT') {
								objToAdd = {
									label: '微信支付',
									type: 'WECHAT',
									visible: false,
									width: '34rpx',
									height: '29rpx',
									img: '../../static/new/pay/wx.png',
								};
							} else if (item === 'POINTS') {
								objToAdd = {
									label: "积分支付",
									type: 'POINTS',
									visible: false,
									img: '../../static/an/point.gif',
									width: '30rpx',
									height: '31rpx'
								};
							} else if (item === 'NONE') {
								objToAdd = {
									label: "无需支付",
									type: 'NONE',
									visible: false,
									img: '',
									width: '32rpx',
									height: '34rpx'
								};
							} else if (item === 'COIN') {
								objToAdd = {
									label: "代币支付",
									type: 'COIN',
									visible: false,
									img: '../../static/an/point.gif',
									width: '32rpx',
									height: '34rpx'
								};
							}
							// 只有在objToAdd被赋值的情况下才添加到payList
							if (objToAdd) {
								if (objToAdd.type === 'ALIPAY') {
									// 如果是WECHAT类型，则先添加到数组第一位
									this.payList.unshift(objToAdd);
								} else {
									// 其他类型添加到数组末尾
									this.payList.push(objToAdd);
								}
							}
						});
						this.payList[0].visible = true
						this.payType = this.payList[0].type
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
			// 减
			sub() {
				return
				if (this.quantity === 1) {
					this.$api.msg("不能小于1！");
					return;
				}
				if (this.quantity > 1) {
					this.quantity--
				}
				this.getOrderPreview()
			},
			// 加
			add() {
				return
				this.quantity++
				this.getOrderPreview()
			},
			
			// 确认购买
			confirmBuy() {
				if(this.isPayBtn){
					return
				}
				this.isPayBtn = true
				setTimeout(()=>{
					this.isPayBtn = false;
				}, 2000);
				if(!this.agreementVisible){
					this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
					return
				}
				uni.hideLoading()
				clearInterval(this.timer)
				this.timer = null
				if(this.isBtnStatus){
					return
				}
				this.isBtnStatus = true
				setTimeout(()=>{
					this.isBtnStatus = false;
				}, 2000);
				if (JSON.stringify(this.address) === '{}') {
					this.$api.msg('请选择地址')
					return
				}
				let data = {
					productId: this.detailShopData.id,
					userAddressId: this.address.id,
					// method: this.payType,
					method: 'POINTS',
					methodCarriage: this.payType,
					quantity: this.quantity,
					source:'ACTIVITY_EXCHANGE'
				}
				// uni.showLoading()
				createShopOrder(data).then(res => {
					if (res.code === 200) {
						// if (this.payType === 'WECHAT' || this.payType === 'ALIPAY') {
						// 	window.location.href = res.data.payParams.payinfo
						// }
						if (res.data.payParams.payinfo) {
							window.location.href = res.data.payParams.payinfo
						}
						reportClickFn(`activity_pay_clk_${this.detailData.id}_${this.detailData.curTask.id}`)
						this.orderNo = res.data.no
						this.isPayShopDlgVisible = true
						this.getOrderPaid(res.data.no)
						let clearTime = 0
						this.timer = setInterval(() => {
							this.getOrderPaid(res.data.no)
							clearTime += 3
							if (clearTime == 30) {
								uni.hideLoading()
								clearInterval(this.timer)
								this.timer = null
								// this.$api.msg("未查询到支付结果")
							}
						}, 3000);
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
			getOrderPaid(no,types) {
				orderPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						// 实际兑换埋点
						reportClickFn('product_detail_ preview_pay_clk')
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						this.isPayShopDlgVisible = false
						uni.navigateTo({
							url: `/pages/shop/paySuccess?no=${no}&price=${this.previewData.deliveryFee}&point=${this.previewData.points}&payType=${this.payType}&productName=${this.previewData.productName}&quantity=${this.previewData.quantity}`
						})
						this.shopShow = false
						uni.hideLoading()
					}else{
						if(types === 'click'){
							this.$api.msg('未查询到支付结果')
						}
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
			isPayShopStatus(){
				this.getOrderPaid(this.orderNo,'click')
			},
			isShopCancelCk(){
				this.isPayShopDlgVisible = false
			},
			againShopPay(){
				this.confirmBuy()
			},
			// 商城相关结束
			isPayStatus(){
					boxOrderPaidApi({
						no:this.paidData.no
					}).then(payResult => {
						if (payResult.data) {
							this.$api.msg('支付成功')
							this.isPayDlgVisible = false
							console.log(`/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
							uni.navigateTo({
								url: `/pages/index/draw?no=${this.paidDatano.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}&isActivity=runActivity`
							})
							uni.hideLoading()
						}else{
							this.$api.msg('未查询到支付结果')
							uni.hideLoading()
						}
					}).catch(err => {
						uni.hideLoading()
					})
			},
			
			isCancelCk(){
				this.isPayDlgVisible = false
			},
			
			againPay(){
				this.payNum += 1
			},
			getBoxDetail(id){
				boxesDetail({
					id
				}).then(res => {
					if (res.code === 200) {
						this.detailBoxData = res.data
						this.show = true
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 购买弹框回传回来的方法 用于是否打开是否支付弹框
			payStatus(val){
				this.isPayDlgVisible = true
				console.log(val)
				this.paidData = val
			},
			
			// 购买成功
			buySuccess() {
				this.isPayDlgVisible = false
				this.show = false
			},
			goBack(){
				uni.switchTab({
					url:`/pages/index/new-index`
				})
			},
			exchangeShop(){
				if(this.detailData.curTask.conditions.type === "PRODUCT_EXCHANGE"){
					reportClickFn(`activity_to_complete_btn_${this.detailData.id}_${this.detailData.curTask.id}`)
					// 商品兑换
					this.getShopDetail(this.detailData.curTask.conditions.productId)
					// uni.navigateTo({
					// 	url:`/pages/shop/detail?id=${this.detailData.curTask.conditions.productId}`
					// })
				}
			},
			buyBox(){
				if(this.detailData.curTask.conditions.type === "BOX_PURCHASE"){
					console.log("this.detailData.curTask.conditions.boxId:",this.detailData.curTask.conditions.boxId)
					reportClickFn(`activity_to_complete_btn_${this.detailData.id}_${this.detailData.curTask.id}`)
					if(this.detailData.curTask.conditions.isNormal){
						this.getBoxDetail(this.detailData.curTask.conditions.boxId)
					}else{
						uni.navigateTo({
							url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}&cellBuy=active&isNo=active&curTaskId=${this.detailData.id}&activityId=_${this.detailData.id}_${this.detailData.curTask.id}&activityType=${this.detailData.curTask.conditions.countType}&isNormal=${this.detailData.curTask.conditions.isNormal}`
						})
					}
					
					
					// 盲盒购买
					// uni.navigateTo({
					// 	url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}`
					// })
				}
				
			},
			lookOne(){
				uni.navigateTo({
					url:`/pages/index/boxDetail?id=${this.detailData.boxId}&isNo=active`
				})
			},
			goDetail(){
				if(this.detailData.curTask.conditions.type === "BOX_PURCHASE"){
					// 盲盒购买
					if(this.detailData.boxId){
						uni.navigateTo({
							url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}&isNo=active`
						})
					}else{
						uni.navigateTo({
							url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}`
						})
					}
					
				}
				if(this.detailData.curTask.conditions.type === "PRODUCT_EXCHANGE"){
					// 商品兑换
					uni.navigateTo({
						url:`/pages/shop/detail?id=${this.detailData.curTask.conditions.productId}`
					})
				}
			},
			// 去完成
			toComplete(){
				reportClickFn(`activity_to_complete_btn_${this.detailData.id}_${this.detailData.curTask.id}`)
				if(this.detailData.curTask.conditions.type === "POINT_CLEAR"){
					// 清除积分
					uni.showLoading({
						mask:true
					})
					pointClearApi({points:this.detailData.curTask.conditions.points}).then(res => {
						this.$api.msg(res.message)
						uni.hideLoading()
						if(res.code === 200){
							this.getActivityDetail()
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}
				if(this.detailData.curTask.conditions.type === "BOX_PURCHASE"){
					console.log("this.detailData.curTask.conditions.boxId:",this.detailData.curTask.conditions.boxId)
					this.getBoxDetail(this.detailData.curTask.conditions.boxId)
					
					// 盲盒购买
					// uni.navigateTo({
					// 	url:`/pages/index/boxDetail?id=${this.detailData.curTask.conditions.boxId}`
					// })
				}
				if(this.detailData.curTask.conditions.type === "PRODUCT_EXCHANGE"){
					// 商品兑换
					this.getShopDetail(this.detailData.curTask.conditions.productId)
					// uni.navigateTo({
					// 	url:`/pages/shop/detail?id=${this.detailData.curTask.conditions.productId}`
					// })
				}
				if(this.detailData.curTask.conditions.type === "PROMPT_PURCHASE"){
					// 提示卡购买
					uni.navigateTo({
						url:`/pages/index/card?activity=activity`
					})
				}
				if(this.detailData.curTask.conditions.type === "COUPON_AWARD" || this.detailData.curTask.conditions.type === "POINT_AWARD"){
					// 提示卡购买
					uni.showLoading({
						mask:true
					})
					activityTaskAwardApi().then(res => {
						uni.hideLoading()
						if(res.code === 200){
							if(this.detailData.curTask.conditions.type === "POINT_AWARD"){
								this.$api.msg(`获得积分${res.data.points}`)
							}
							if(this.detailData.curTask.conditions.type === "COUPON_AWARD"){
								this.$api.msg(`获得优惠券：${res.data.name}*${res.data.num}`)
							}
							this.getActivityDetail()
						}else{
							this.$api.msg(res.message)
						}
						
					}).catch(errr => {
						uni.hideLoading()
					})
				}
				// 
			},
			lookDraw(){
				this.rewardVisible = true
			},
			getActivityDetail(){
				activityDetailNewApi().then(res => {
					if(res.code === 200){
						this.detailData = JSON.parse(JSON.stringify(res.data))
						// this.detailData.rewardsMap = this.transformedData(this.detailData.rewardsMap)
						setTimeout(() => {
							this.spineLeft = this.detailData.taskList[this.detailData.curPeriodNum].left + 'px'
							this.spineTop = this.detailData.taskList[this.detailData.curPeriodNum].top + 'px'
						})
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					
				})
			},
			transformedData(data) {
			      let result = {};
			      let prevKey = null;
			
			      for (let key in data) {
			        const numericKey = parseInt(key, 10);
			
			        if (numericKey <= 3) {
			          result[key] = data[key];
			        } else {
			          if (prevKey !== null) {
			            let newKey = `${prevKey + 1}-${key}`;
			            result[newKey] = data[key];
			          } else {
			            result[key] = data[key];
			          }
			        }
			
			        prevKey = numericKey;
			      }
			
			      return result;
			    },
			getBlockStyle(index) {
				console.log(index)
				const cols = 3;
				const windowWidth = window.innerWidth;
				const elWidth = 130;
				const elHeight = 126;

				const spaceX = (windowWidth - (elWidth * cols)) / (cols + 1);

				const startX = spaceX;
				const startY = 0;

				const rowList = [
					0, 0, 0,
					1,
					2,
					3, 3, 3,
					4,
					5,
				]
				const offset = Math.floor(index / rowList.length) * 6;
				const row = rowList[index % rowList.length] + offset;

				const colList = [
					0, 1, 2,
					2,
					2,
					2, 1, 0,
					0,
					0,
				]
				const col = colList[index % colList.length]

				let left = (col * elWidth) + (col * spaceX);
				let top = startY + (elHeight * row);

				this.$set(this.detailData.taskList[index], 'left', left+10)
				this.$set(this.detailData.taskList[index], 'top', top +90)
				// this.$set(this.detailData.taskList[index], 'top', top*2+10)
				return {
					left: left + "px",
					top: top + "px",
					backgroundImage:`url('/static/activity/${this.detailData.taskList[index].style}.png')`
				}
			},
			getViewPosition(index) {
				// 获取元素
				var element = document.getElementById(`list-item-${index}`);

				// 获取元素的边界矩形
				var rect = element.getBoundingClientRect();

				// 获取页面的滚动偏移
				var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

				// 计算元素相对于整个文档的 x 和 y 轴位置
				var x = rect.left + scrollLeft;
				var y = rect.top + scrollTop;

				console.log("页面中X轴位置: " + x);
				console.log("页面中Y轴位置: " + y);

			},
			getPosition(index) {
				// console.log(this.list[index].left,this.list[index].top)
				// setTimeout(() => {
				// 	// this.leftTop(this.list[index].left + "px",this.list[index].top + "px")
				// },1000)

				this.spineLeft = this.list[index].left + 'px'
				this.spineTop = this.list[index].top + 'px'
				console.log("this.spineLeft:", this.spineLeft)
			},
		},
	}
</script>

<style scoped lang="scss">
	.guidance{
		height: 100vh;
		
		.guidance-img{
			height: 100vh;
			background-size: 100%;
			background-repeat: no-repeat;
			position: relative;
			.skip-btn{
				width: 158rpx;
				height: 109rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
			.kown-btn{
				position: absolute;
				width: 335rpx;
				height: 100rpx;
				left: 209rpx;
				top: 1074rpx;
				// bottom: 160rpx;
			}
			.step0{
				position: absolute;
				width: 335rpx;
				height: 100rpx;
				left: 209rpx;
				top: 953rpx;
			}
			.step1{
				position: absolute;
				width: 335rpx;
				height: 100rpx;
				left: 209rpx;
				top: 880rpx;
			}
			.step2{
				position: absolute;
				width: 335rpx;
				height: 100rpx;
				left: 209rpx;
				top: 1293rpx;
			}
			.step3{
				position: absolute;
				width: 335rpx;
				height: 100rpx;
				left: 209rpx;
				top: 1074rpx;
			}
		}
		.guidance-img0{
			background-image: url('@/static/guidance/0.jpg');
		}
		.guidance-img1{
			background-image: url('@/static/guidance/1.jpg');
		}
		.guidance-img2{
			background-image: url('@/static/guidance/2.jpg');
		}
		.guidance-img3{
			background-image: url('@/static/guidance/3.jpg');
		}
		
	}
	.activity-page {
		height: 100vh;
		width: 100%;
		background-image: url('@/static/activity/bg.jpg');
		background-size: 100%;
		background-repeat: no-repeat;
		
		.header-back {
			width: 80rpx;
			height: 85rpx;
			// width: 40rpx;
			// height: 45rpx;
			position: fixed;
			top: 20rpx;
			left: 30rpx;
			z-index: 390;
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 21rpx 0 21rpx;

			.rule {
				width: 117rpx;
				height: 68rpx;
			}

			.title {
				width: 435rpx;
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 38rpx;
				color: #EDDDA9;
				background-image: url('@/static/activity/title.png');
				background-size: 100%;
				background-repeat: no-repeat;
			}
		}

		.header-time {
			width: 100%;
			height: 32rpx;
			background-color: rgba(0, 0, 0, 0.1);
			font-weight: bold;
			font-size: 24rpx;
			color: #EDDDA9;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 14rpx;
		}
		
		.scroll-main {
			padding-top: 20rpx;
			height: 100vh;
			// height: calc(100vh - 190rpx);
			position: relative;
			// margin-left: 52rpx;

			.list {
				// padding-left: 52rpx;
				position: relative;
				z-index: 1;
				margin-top: 60rpx;
				margin-left: 32rpx;

				.list-item {
					position: absolute;
					z-index: 1;
					width: 193rpx;
					height: 186rpx;
					background-image: url('@/static/activity/goupeng.png');
					background-size: 100%;
					background-repeat: no-repeat;
				}

				.list-item:first-child {
					background-image: url('@/static/activity/frist.png');
					background-size: 100%;
					background-repeat: no-repeat;
				}

				.list-item:last-child {
					background-image: url('@/static/activity/last.png');
					background-size: 100%;
					background-repeat: no-repeat;
				}
			}
			.rank{
				position: absolute;
				top: 410rpx;
				// top: 250rpx;
				left: 10rpx;
				width: 496rpx;
				height: 470rpx;
				background-image: url('@/static/activity/phb.png');
				background-size: 100%;
				background-repeat: no-repeat;
				padding-top: 100rpx;
				padding: 100rpx 39rpx 0 39rpx;
				.rank-header{
					width: 416rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: absolute;
					top: 33rpx;
					left: 40rpx;
					.look-draw{
						width: 117rpx;
						height: 57rpx;
					}
					.look-zoom{
						animation: zoomAnimation 1s infinite alternate;
					}
					@keyframes zoomAnimation {
					  0% {
					    transform: scale(1); /* 初始状态，原始大小 */
					  }
					  100% {
					    transform: scale(1.3); /* 回到原始大小 */
					  }
					}
				}
				
				.rank-list{
					height: 310rpx;
					overflow-y: scroll;
					.rank-item{
						width: 100%;
						height: 78rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-size: 100%;
						background-repeat: no-repeat;
						margin-bottom: 4rpx;
						padding: 0 27rpx 0 16rpx;
						font-size: 24rpx;
						color: #FFFAEB;
						.item-name{
							width: 155rpx;
							height: 43rpx;
							line-height: 43rpx;
							background-color: rgba(0,0,0,0.3);
							border-radius: 20rpx;
							padding: 0 10rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
			.task{
				position: absolute;
				top: 1170rpx;
				// top: 930rpx;
				left: 270rpx;
				width: 473rpx;
				height: 301rpx;
				background-image: url('@/static/activity/task.png');
				background-size: 100%;
				background-repeat: no-repeat;
				font-weight: bold;
				font-size: 24rpx;
				color: #fff;
				padding-top: 20rpx;
				.task-main{
					width: 100%;
					height: 160rpx;
					font-weight: bold;
					font-size: 34rpx;
					color: #FFFAEB;
					line-height: 54rpx;
					padding: 0rpx 30rpx 10rpx 30rpx;
					overflow-y: auto;
				}
				.accomplish-icon{
					display: block;
					margin: 20rpx auto;
					width: 234rpx;
					height: 78rpx;
				}
				.task-footer{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					.task-footer-icon{
						width: 186rpx;
						height: 78rpx;
					}
				}
			}
		}

		.spine-view {
			width: 100rpx;
			height: 100rpx;
			pointer-events: none;
			z-index: 100;
			position: absolute;
			transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
			.person-icon{
				width: 200rpx;
				height: 200rpx;
				animation: slide 0.5s infinite alternate linear;
				// border: 1px solid red;
			}
			@keyframes slide {
			  0% {
			    transform: rotate(-5deg); /* 动画开始时倾斜度数 */
			  }
			  100% {
			    transform: rotate(5deg); /* 动画结束时倾斜度数 */
			  }
			}
		}
		.reward-main{
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.3);
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			z-index: 9999;
			.reward{
				
				.reward-content{
					width: 591rpx;
					height: 679rpx;
					background-image: url('@/static/activity/jl.png');
					background-size: 100%;
					background-repeat: no-repeat;
					padding-top: 100rpx;
					.content{
						margin-left: 46rpx;
						width: 500rpx;
						height: 500rpx;
						overflow-y: auto;
						.content-item{
							width: 462rpx;
							height: 134rpx;
							background-image: url('@/static/activity/jl-4.png');
							background-size: 100%;
							background-repeat: no-repeat;
							margin: 0 auto;
							margin-bottom: 1rpx;
							.content-item-title{
								font-weight: bold;
								font-size: 28rpx;
								color: #FFFFFF;
								text-align: center;
								padding-top: 6rpx;
							}
							.award{
								margin-left: 20rpx;
								width: 422rpx;
								white-space: nowrap;
								padding-top: 10rpx;
								// display: flex;
								
								.award-item{
									display: inline-block;
									width: 131rpx;
									height: 76rpx;
									margin-right: 34rpx;
									text-align: center;
									.award-name{
										font-weight: bold;
										font-size: 22rpx;
										color: #FFFCF0;
										margin-top: -10rpx;
										width: 131rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
									}
									.coupon{
										width: 100rpx;
										height: 43rpx;
										line-height: 43rpx;
										background-image: url('@/static/activity/yhq.png');
										background-size: contain;
										background-repeat: no-repeat;
										font-size: 26rpx;
										color: #E9FF7A;
										text-align: center;
										border: 1px solid pink;
									}
								}
							}
						}
						.one{
							background-image: url('@/static/activity/jl-1.png');
						}
						.two{
							background-image: url('@/static/activity/jl-2.png');
						}
						.three{
							background-image: url('@/static/activity/jl-3.png');
						}
						.content-frist{
							background-image: url('@/static/activity/jl-1.png');
						}
					}
				}
				.rule-content{
					width: 591rpx;
					height: 679rpx;
					background-image: url('@/static/activity/gz.png');
					background-size: 100%;
					background-repeat: no-repeat;
					padding-top: 100rpx;
					.content{
						margin-left: 46rpx;
						width: 500rpx;
						height: 500rpx;
						overflow-y: auto;
					}
				}
				.reward-close{
					margin: 0 auto;
					margin-top: 24rpx;
					display: block;
					width: 103rpx;
					height: 109rpx;
					
				}
			}
		}
		.popup-main {
			padding: 30rpx 22rpx;
			// padding: 32rpx 32rpx 0rpx 32rpx;
			z-index: 9991;
		
			// max-height: 900rpx;
			// position: relative;
			.address {
				// width: 686rpx;
				width: 100%;
				// background: #FFFFFF;
				// border-radius: 8rpx;
				// padding: 24rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 18rpx;
		
				.detail {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
		
					.address-info {
						.info {
							display: flex;
							align-items: center;
		
							.address-icon {
								width: 30rpx;
								height: 40rpx;
								margin-right: 10rpx;
							}
		
							.name {
								font-weight: 800;
								font-size: 32rpx;
								color: #000000;
								// max-width: 250rpx;
								// overflow: hidden;
								// white-space: nowrap;
								// text-overflow: ellipsis;
							}
		
							.phone {
								font-weight: 500;
								font-size: 24rpx;
								color: #666666;
								margin-left: 8rpx;
							}
						}
		
						.address-detail {
							width: 600rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
							margin-top: 12rpx;
						}
					}
		
					.arr-icon {
						width: 20rpx;
						height: 30rpx;
					}
		
				}
		
				.edit-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		
			.popup-header {
				display: flex;
				align-items: center;
				height: 158rpx;
		
				.popup-header-img {
					width: 158rpx;
					height: 158rpx;
					border-radius: 10rpx;
				}
		
				.popup-info {
					margin-left: 25rpx;
					width: 500rpx;
		
					.popup-info-name {
		
						width: 482rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
		
					.popup-info-price {
						margin-top: 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
		
						.popup-info-price-left {
							display: flex;
							align-items: center;
		
							.popup-price {
								display: flex;
								align-items: center;
								font-weight: 300;
								font-size: 16rpx;
								color: #888888;
								margin-left: 20rpx;
								height: 50rpx;
								display: flex;
								align-items: flex-end;
								padding-bottom: 8rpx;
								text-decoration: line-through;
		
								.popup-symbol {
									// font-size: 20rpx;
								}
							}
		
							.popup-clover {
								display: flex;
								align-items: center;
								font-weight: bold;
								font-size: 42rpx;
								color: #000000;
								height: 50rpx;
		
								.clover-img {
									width: 48rpx;
									height: 48rpx;
									margin-right: 6rpx;
								}
							}
						}
		
						.operation {
							display: flex;
							align-items: center;
							width: 144rpx;
							height: 48rpx;
							border-radius: 8rpx;
		
							.subs {
								height: 48rpx;
								width: 48rpx;
							}
		
							.operation-num {
								height: 48rpx;
								width: 48rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
								color: #000000;
								border-top: 2rpx solid #E6E6E6;
								border-bottom: 2rpx solid #E6E6E6;
							}
		
							.add {
								height: 48rpx;
								width: 48rpx;
							}
						}
					}
				}
			}
		
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 685rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
		
			.popup-title {
				color: #333333;
				font-weight: 800;
				font-size: 28rpx;
				margin-top: 48rpx;
				margin-bottom: 24rpx;
			}
		
			.specification-list {
				// display: flex;
				// align-items: center;
				// flex-wrap: wrap;
		
				width: 100%;
				max-height: 600rpx;
				margin-bottom: 50rpx;
				padding-bottom: 220rpx;
				overflow-y: auto;
		
				.specification-item {
					z-index: 9999;
					display: inline-block;
					padding: 0 64rpx;
					// width: 200rpx;
					height: 56rpx;
					line-height: 56rpx;
					border: 2rpx solid #B3B3BE;
					border-radius: 28rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					font-size: 24rpx;
					color: #B3B3BE;
					margin-right: 32rpx;
					margin-bottom: 32rpx;
				}
		
				.specification-item-active {
					border: 2rpx solid #333333;
					color: #333333;
				}
			}
		
			.popup-footer {
				z-index: 9999;
				background-color: #fff;
				// padding-bottom: 20rpx;
				margin-top: 30rpx;
		
				.footer-num {
					// display: flex;
					// align-items: center;
					// justify-content: space-between;
					z-index: 9999;
					margin-top: 20rpx;
		
					.footer-info {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;
		
						.footer-info-num {
							margin-left: 10rpx;
							font-size: 24rpx;
							color: #999999;
							font-weight: 400;
						}
					}
		
					.item-step {
						margin-top: 17rpx;
						z-index: 9999;
						display: flex;
						align-items: center;
		
						.item-sub {
							width: 41rpx;
							height: 41rpx;
						}
		
						.item-num {
							width: 78rpx;
							font-size: 28rpx;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: center;
						}
		
						.item-add {
							width: 41rpx;
							height: 41rpx;
						}
					}
				}
		
				.now-buy {
					z-index: 9999;
					margin-top: 26rpx;
		
		
					width: 706rpx;
					height: 88rpx;
					background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
					border-radius: 16rpx;
		
		
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	.agreement{
		// margin: 40rpx;
		width: 670rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 46rpx;
		.agreement-icon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
			vertical-align: middle;
		}
		.agreement-color{
			color: #0080FF;
		}
	}
</style>