<!-- 免费试玩 -->
<template>
	<view class="buy-popup" @click.stop="">
		<view class="header">
			<view class="header-info">
				<image v-if="previewData.coverResource" :src="previewData.coverResource.url" mode="aspectFit"
					class="info-img"></image>
				<view class="info-right">
					<view class="right-name">{{previewData.name}}</view>
					<!-- <view class="right-price">¥{{detailData.price[0].settlement}}/个</view> -->
					<!-- <view class="right-price" v-else>原价 ¥{{Number(previewData.amount.sale)}}/个</view> -->

				</view>
			</view>
			<view class="header-tip">
				<view class="header-num">x {{listLengthObj[type]}}</view>
			</view>
		</view>
		
		
		<view class="btn-main">
			<template v-for="(item,index) in detailData.price">
				<view class="btn-buy one" :class="{'buy-active':typeIndex === index}" v-if="item.type === 'SINGLE'"
					@click="goBuy(item.type,index)">
					一发入魂
				</view>
				<view class="btn-buy three" :class="{'buy-active':typeIndex === index}" v-if="item.type === 'TRIPLE'"
					@click="goBuy(item.type,index)">
					<!-- <view class="tips">9.5折</view> -->
					欧气三连
				</view>
				<view class="btn-buy five" :class="{'buy-active':typeIndex === index}" v-if="item.type === 'PENTA'"
					@click="goBuy(item.type,index)">
					<!-- <view class="tips">8.8折</view> -->
					霸气五连
				</view>
			</template>
		</view>

		<view class="agreement">
			*试玩结果仅供参考
		</view>


		<view class="popup-buy" @click="pay">
			<template>马上试玩</template>
		</view>
	</view>
</template>

<script>
	import {
		boxOrderReviewApi,
		boxOrderApi,
		boxOrderPaidApi,
		activityReviewApi,
		activityBuyApi,
		activityOrderApi,
		activityReviewSourceApi,
		activitySourceBuyApi,
		freeBoxApi,
		boxesDetail
	} from '@/API/index.js'
	import {
		coinPaidApi,
		payMethodApi,
		userInfo
	} from '@/API/user.js'
	import reportClickFn from '@/utils/report.js'
	import isPayDlgVue from '@/pages/components/isPayDlg.vue'

	import {
		showWebview
	} from '@/utils/webViewCom.js'

	export default {
		data() {
			return {
				type: '',
				typeIndex: 2,
				previewData: {
					amount: {}
				}, //预览订单
				timer: null, //盲盒购买
				rookieTimer: null, //新手盲盒购买
				payList: [], //支付方式
				payType: '',
				boxOrderNo: '',
				isTopUp: false,
				infoDetail: {},
				payLink: '',
				orderSn: '',
				payinfoUrl: '',
				timeSec: 0,
				userInfo: {},
				isTip: true,
				orderNo: '',
				isPayDlgVisible: false,
				agreementVisible: false,
				listLengthObj: {
					SINGLE: 1,
					TRIPLE: 3,
					PENTA: 5
				},
				isPayBtn: false
			}
		},
		props: {
			isActivityReport: {
				type: Boolean,
				default: false
			}, //新活动调起支付埋点
			visible: {
				type: Boolean,
				default: false
			},
			isCard: {
				type: Boolean,
				default: true
			}, //是否显示使用提示卡
			detailData: {
				type: Object,
				default: () => {
					coverResource: {}
				}
			},
			boxType: {
				type: String,
				default: ''
			}, //buy 为不同购买   ROOKIE 新手盲盒   PREFERENTIAL_DAY 每日优惠  SPECIAL_PRICE 薅羊毛
			isDetail: {
				type: Boolean,
				default: false
			}, //是否详情进入
			isActivityClick: {
				type: Boolean,
				default: false
			}, //是否点击打开新人福利
			payNum: {
				type: Number,
				default: 0
			},
			promptId: {
				type: String,
				default: ''
			}, //提示卡ID
			isActivity: {
				type: String,
				default: ''
			},
			activityId: {
				type: String,
				default: ''
			},
			activityType: {
				type: String,
				default: ''
			},
		},
		components: {
			isPayDlgVue
		},
		watch: {
			
		},
		mounted() {
			this.payLink = ''
			this.type = this.detailData.price[2].type
			this.typeIndex = 2
			this.getDetail()

		},
		methods: {
			// 订单预览
			getDetail() {
				boxesDetail({
					id: this.detailData.id
				},{}).then(res => {
					if (res.code === 200) {
						this.previewData = res.data
						
					} else {
						this.$api.msg(res.message)
					}
				})
				
			},
			// 切换购买类型
			goBuy(type, index) {
				this.typeIndex = index
				this.type = type
				this.getDetail()
			},
			// 立即支付
			pay() {
				if (this.isPayBtn) {
					return
				}
				this.isPayBtn = true
				setTimeout(() => {
					this.isPayBtn = false;
				}, 2000);
				this.$emit('isOk')
				uni.navigateTo({
					url:`/pages/index/drawFree?type=${this.type}&boxId=${this.detailData.id}`
				})
				// uni.showLoading({
				// 	mask:true
				// })
				// freeBoxApi({boxId:this.detailData.id,type:this.type}).then(res => {
				// 	uni.hideLoading()
				// 	if(res.code === 200){
				// 		console.log(res)
				// 		uni.navigateTo({
				// 			url:`/pages/index/drawFree?type=${this.type}&boxId=${this.detailData.id}`
				// 		})
				// 	}else{
				// 		this.$api.msg(res.message)
				// 	}
				// }).catch(err => {
				// 	uni.hideLoading()
				// })
				
				
			},
			// 盲盒购买订单回调(如果type为click则是点击)
			getBoxOrderPaid(no, type) {
				boxOrderPaidApi({
					no
				}).then(payResult => {
					console.log("payResult")
					if (payResult.data) {
						if (type != 'click') {
							// 活动实际支付埋点
							if (this.boxType === 'PREFERENTIAL_DAY') {
								reportClickFn('box_activity_review_pay_accomplish_clk')
							}
							// 盲盒实际支付埋点
							if (this.boxType === 'buy') {
								reportClickFn('box_buy_review_pay_accomplish_clk')

								if (this.isDetail) {
									// 指定盲盒详情订单预览支付成功
									reportClickFn(`boxId_detail_review_pay_accomplish_${this.detailData.id}`)
								} else {
									// 指定盲盒订单预览支付成功
									reportClickFn(`boxId_review_pay_accomplish_${this.detailData.id}`)
								}

							}

							if (this.isActivityClick) {

								if (this.boxType === 'SPECIAL_PRICE') {
									// 点击打开薅羊毛订单预览支付成功数
									reportClickFn('box_special_price_clk_activity_review_pay_accomplish');
								}
								if (this.boxType === 'ROOKIE') {
									// 点击打开新人福利订单预览支付成功数
									reportClickFn('box_clk_activity_review_pay_accomplish');
								}
								if(this.boxType === 'NINE'){
									// 点击打开九连抽订单预览支付成功数
									reportClickFn('box_clk_nine_review_pay_accomplish');
								}
							} else {
								if (this.boxType === 'SPECIAL_PRICE') {
									// 首次弹出薅羊毛订单预览支付成功数
									reportClickFn('box_special_price_activity_review_pay_accomplish');
								}
								if (this.boxType === 'ROOKIE') {
									// 首次弹出新人福利订单预览支付成功数
									reportClickFn('box_activity_review_pay_accomplish');
								}
								if(this.boxType === 'NINE'){
									// 首次弹出九连抽订单预览支付成功数
									reportClickFn('box_nine_review_pay_accomplish');
								}
							}
						}



						if (this.isActivity === 'runActivity') {
							// 新活动支付调起埋点
							reportClickFn(`activity_pay_clk${this.activityId}`)
						}

						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						clearInterval(this.rookieTimer); // 清除定时器
						this.rookieTimer = null;
						this.$emit('isOk')
						this.$api.msg('支付成功')
						let listLength = 1
						if (this.previewData.type === 'SINGLE') {
							listLength = 1
						} else if (this.previewData.type === 'TRIPLE') {
							listLength = 3
						} else {
							listLength = 5
						}
						this.isPayDlgVisible = false
						if (this.isActivity) {
							uni.navigateTo({
								url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}&isActivity=${this.isActivity}`
							})
						} else {
							uni.navigateTo({
								url: `/pages/index/draw?no=${no}&boxId=${this.previewData.boxId}&type=${listLength}`
							})
						}

						// uni.redirectTo({
						// 	url: `/pages/index/boxPaySuccess?no=${no}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.total}`
						// })
						uni.hideLoading()
					} else {
						// if(type == 'click'){
						// 	this.$api.msg('未查询到支付结果')
						// }
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
			// 查询新手盲盒支付订单
			getCoinPaid(no) {
				coinPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						// 活动实际支付埋点
						reportClickFn('box_activity_review_pay_accomplish_clk')
						if (this.isActivityClick) {
							// 点击打开新人福利订单预览支付成功数
							reportClickFn('box_clk_activity_review_pay_accomplish');
						} else {
							// 首次弹出新人福利订单预览支付成功数
							reportClickFn('box_activity_review_pay_accomplish');
						}
						clearInterval(this.rookieTimer); // 清除定时器
						this.rookieTimer = null;
						this.$emit('isOk')
						this.$api.msg('支付成功')
						uni.navigateTo({
							url: `/pages/index/draw?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&type=1`
						})
						// uni.redirectTo({
						// 	url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.amount.sale}`
						// })
						uni.hideLoading()
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.timer);
			clearInterval(this.rookieTimer)
		}
	}
</script>

<style lang="scss" scoped>
	.buy-popup {
		// background-color: #fff;
		// position: absolute;
		// bottom: 0;
		// left: 0;
		// border-radius: 30rpx 0rpx 30rpx 0rpx;
		padding: 32rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.header-info {
				display: flex;
				align-items: center;

				.info-img {
					width: 158rpx;
					height: 158rpx;
					border-radius: 10rpx;
				}

				.info-right {
					margin-left: 24rpx;
					display: flex;
					// align-items: center;
					justify-content: space-between;
					flex-direction: column;
					// height: 158rpx;
					font-weight: bold;
					font-size: 42rpx;
					color: #000000;

					.right-name {}

					.right-price {
						font-size: 28rpx;
						font-weight: normal;
					}
				}
			}

			.header-tip {
				font-size: 30rpx;
				color: #0080FF;

				.header-num {
					text-align: center;
					font-size: 40rpx;
					color: #000;
					font-weight: bold;
				}
			}
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 685rpx;
			height: 80rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;

			.label {}

			.value {}
		}

		.popup-buy {
			z-index: 9999;
			margin-top: 16rpx;
			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;
		}

		.btn-main {
			display: flex;
			align-items: center;
			justify-content: center;

			margin-top: 40rpx;

			.btn-buy {
				margin: 0 20rpx;
				// background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				width: 30%;
				height: 80rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				font-size: 28rpx;
				// color: #FFFFFF;
				color: #999999;
				border: 2rpx solid #E6E6E6;

				.tips {
					position: absolute;
					width: 158rpx;
					height: 40rpx;
					background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%);
					border-radius: 20rpx 0px 20rpx 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #FFFFFF;
					top: -20rpx;
					left: 0rpx;
				}
			}

			.buy-active {
				background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				color: #fff;
			}

			.one {}

			.three {}

			.five {}
		}

		.mains {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 24rpx;

			// margin-left: 32rpx;
			.pay {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 104rpx;
				padding: 0 24rpx;


				.left {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;

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

				.select-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.log-out {
			width: 590rpx;
			height: 300rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.log-out-tip {
				height: 200rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.85);
				line-height: 200rpx;
				text-align: center;
			}

			.log-out-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 2rpx solid rgba(0, 0, 0, 0.06);
				height: 100rpx;

				.cancel {
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					text-align: center;
					border-right: 1px solid rgba(0, 0, 0, 0.06);
				}

				.log-out-submit {
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #E55353;
					text-align: center;
				}
			}
		}
	}

	.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>