<template>
	<view class="box-order-confirm-page">
		<HeaderCom></HeaderCom>
		<view class="main">
			<view class="box">
				<image class="box-img" src="/static/box/box-bg.png" mode="aspectFit"></image>
				<view class="detail">
					<view class="name">{{detailData.name}}</view>
					<view class="ponit">
						<view class="price" v-if="activity === 'ROOKIE'">¥ {{detailData.amount.sale}}</view>
						<view class="price" v-else>{{detailData.amount.sale}}代币</view>
						<view class="num">X {{numObj[detailData.type]}}</view>
					</view>
				</view>
			</view>
			<view class="coupon" v-if="!activity">
				<view class="item">
					<view class="label">优惠券</view>
					<view class="value" v-if="activity">
						无
						<!-- <image src="@/static/my/back.png" mode="" class="back-icon"></image> -->
					</view>
					<view class="value" v-else>
						{{detailData.couponName || "无"}}
						<!-- <image src="@/static/my/back.png" mode="" class="back-icon"></image> -->
					</view>
				</view>
				<view class="item">
					<view class="label">优惠金额</view>
					<view class="value" v-if="activity">
						0
					</view>
					<view class="value" v-else>
						{{detailData.discountAmount || 0}}
					</view>
				</view>
			</view>
		</view>
		<view class="mains" v-if="activity === 'ROOKIE'">
			<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="footer">
			<view class="point">
				<image src="@/static/an/point.gif" mode="" class="ponit-icon" v-if="activity !== 'ROOKIE'"></image>
				<template v-if="activity === 'ROOKIE'">¥ {{detailData.amount.sale || 0}}</template>
				<template v-else-if="activity === 'PREFERENTIAL_DAY'">{{detailData.amount.sale || 0}}代币</template>
				<template v-else>{{detailData.total || 0}}代币</template>
			</view>
			<view class="buy " @click="pay">立即支付</view>
		</view>
		
		<img v-for="(imgSrc, index) in bgList" :key="index" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in btnList" :key="index" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in bgList" :key="index" :src="imgSrc" style="display: none;" />
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/boxOrderConfirm"></page-popup>
	</view>
</template>

<script>
	import {
		myMixins
	} from "@/mixins/mixins.js";
	import {
		boxOrderReviewApi,
		boxOrderApi,
		boxOrderPaidApi,
		activityReviewApi,
		activityBuyApi,
		activityOrderApi
	} from '@/API/index.js'
	import { coinPaidApi,payMethodApi } from '@/API/user.js'
	import HeaderCom from '@/pages/components/header.vue'
	export default {
		mixins: [myMixins],
		data() {
			return {
				boxId: "",
				type: "",
				buyMethod: "",
				detailData: {
					coverResource: {},
					amount: {}
				},
				statusObj: {
					SINGLE: "一发入魂",
					TRIPLE: "三连抽",
					PENTA: "五连抽",
				},
				numObj:{
					SINGLE: "1",
					TRIPLE: "3",
					PENTA: "5"
				},
				payList: [],
				payType: '',
				timer: null,
				timers:null,
				activity:'',
				boxOrderNo:'',
				promptId:'',
				
				btnList: [
				  'static/an/btn/0.png', 'static/an/btn/1.png', 'static/an/btn/2.png', 'static/an/btn/3.png',
				  'static/an/btn/4.png', 'static/an/btn/5.png', 'static/an/btn/6.png', 'static/an/btn/7.png',
				  'static/an/btn/8.png', 'static/an/btn/9.png', 'static/an/btn/10.png', 'static/an/btn/11.png',
				  'static/an/btn/12.png', 'static/an/btn/13.png', 'static/an/btn/14.png', 'static/an/btn/15.png',
				  'static/an/btn/16.png', 'static/an/btn/17.png', 'static/an/btn/18.png', 'static/an/btn/19.png',
				  'static/an/btn/20.png', 'static/an/btn/21.png', 'static/an/btn/22.png', 'static/an/btn/23.png',
				  'static/an/btn/24.png', 'static/an/btn/25.png', 'static/an/btn/26.png', 'static/an/btn/27.png',
				  'static/an/btn/28.png', 'static/an/btn/29.png', 'static/an/btn/30.png', 'static/an/btn/31.png',
				  'static/an/btn/32.png', 'static/an/btn/33.png', 'static/an/btn/34.png', 'static/an/btn/35.png',
				  'static/an/btn/36.png', 'static/an/btn/37.png', 'static/an/btn/38.png', 'static/an/btn/39.png',
				  'static/an/btn/40.png', 'static/an/btn/41.png', 'static/an/btn/42.png', 'static/an/btn/43.png',
				  'static/an/btn/44.png', 'static/an/btn/45.png', 'static/an/btn/46.png', 'static/an/btn/47.png',
				  'static/an/btn/48.png', 'static/an/btn/49.png'
				],
				bgList:['static/new/bg.png','static/box/draw.png'],
			}
		},
		components:{HeaderCom},
		onLoad(opation) {
			if(opation.promptId){
				this.promptId = opation.promptId
			}
			this.boxId = opation.boxId
			if(opation.activity){
				// 活动盲盒订单预览
				this.activity = opation.activity
				this.getActivityReview()
			}else{
				this.type = opation.type
				this.getDetail()
			}
			this.preloadImages()
			this.getPayMethod()
		},
		methods: {
			getPayMethod(){
				payMethodApi({type:'COIN_RECHARGE'}).then(res => {
					console.log(res)
					if(res.code === 200){
						res.data.forEach(item => {
							if(item === 'ALIPAY'){
								this.payList.push({label:'支付宝支付',type:'ALIPAY',visible:false,height: '30rpx',width: '30rpx',img: '../../static/new/pay/zfb.png',})
							}else if(item === 'WECHAT'){
								this.payList.push({label:'微信支付',type:'WECHAT',visible:true,width: '34rpx',height: '29rpx',img: '../../static/new/pay/wx.png',})
							}else if(item === 'POINTS'){
								this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/an/point.gif',width:'30rpx',height:'31rpx'})
							}else if(item === 'NONE'){
								this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
							}else if(item === 'COIN'){
								this.payList.push({label:"代币支付",type:'COIN',visible:false,img:'../../static/an/point.gif',width:'32rpx',height:'34rpx'})
							}
						})
						// this.payList
						this.payList[0].visible = true
						console.log("this.payList[0].type:",this.payList)
						this.payType = this.payList[0].type
					}
				})
			},
			preloadImages() {
					this.bgList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
			      this.btnList.forEach((imgSrc) => {
			        const img = new Image();
			        img.src = imgSrc;
			      });
			    },
			goBack() {
				uni.navigateBack()
			},
			// 活动盲盒订单预览
			getActivityReview(){
				activityReviewApi().then(res => {
					if (res.code === 200) {
						this.detailData = res.data
						this.boxId = res.data.boxId
						// this.detailData.methods.forEach(item => {
						// 	if(item === 'ALIPAY'){
						// 		this.payList.push({label:'支付宝支付',type:'ALIPAY',visible:false,height: '30rpx',width: '30rpx',img: '../../static/new/pay/zfb.png',})
						// 	}else if(item === 'WECHAT'){
						// 		this.payList.push({label:'微信支付',type:'WECHAT',visible:true,width: '34rpx',height: '29rpx',img: '../../static/new/pay/wx.png',})
						// 	}else if(item === 'POINTS'){
						// 		this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/an/point.gif',width:'30rpx',height:'31rpx'})
						// 	}else if(item === 'NONE'){
						// 		this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
						// 	}else if(item === 'COIN'){
						// 		this.payList.push({label:"代币支付",type:'COIN',visible:false,img:'../../static/an/point.gif',width:'32rpx',height:'34rpx'})
						// 	}
						// })
						// this.payList[0].visible = true
						// this.payType = this.payList[0].type
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					
				})
			},
			// 订单预览
			getDetail() {
				boxOrderReviewApi({
					boxId: this.boxId,
					type: this.type
				}).then(res => {
					if (res.code === 200) {
						this.detailData = res.data
						this.detailData.methods.forEach(item => {
							if (item === 'ALIPAY') {
								this.payList.push({
									label: "支付宝支付",
									type: 'ALIPAY',
									visible: false,
									img: '../../static/index/zfb.png',
									width: '30rpx',
									height: '30rpx'
								})
							} else if (item === 'WECHAT') {
								this.payList.push({
									label: "微信支付",
									type: 'WECHAT',
									visible: false,
									img: '../../static/index/wx.png',
									width: '34rpx',
									height: '29rpx'
								})
							} else if (item === 'POINTS') {
								this.payList.push({
									label: "积分支付",
									type: 'POINTS',
									visible: false,
									img: '../../static/mine/jf.png',
									width: '30rpx',
									height: '31rpx'
								})
							} else if (item === 'NONE') {
								this.payList.push({
									label: "无需支付",
									type: 'NONE',
									visible: false,
									img: '',
									width: '30rpx',
									height: '31rpx'
								})
							}
						})
						this.payList[0].visible = true
						this.payType = this.payList[0].type
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 切换支付方式
			payChange(index, item) {
				this.payList.forEach((v, i) => {
					v.visible = false;
				})
				this.payType = item.type
				this.payList[index].visible = !this.payList[index].visible
			},
			pay() {
				// 活动盲盒购买
				if(this.activity === 'ROOKIE'){
					
					let data = {
						method: this.payType
					}
					uni.showLoading()
					activityBuyApi(data).then(res => {
						// uni.hideLoading()
						if (res.code === 200) {
							// 
							if(res.data.payParams.payinfo){
								location.href = res.data.payParams.payinfo
								// window.open(res.data.payParams.payinfo)
							}
							console.log(res)
							this.boxOrderNo = res.data.boxOrderNo
							this.nos = JSON.stringify(res.data)
							this.getCoinPaid(res.data.no)
							this.timers = setInterval(() => {
								this.getCoinPaid(res.data.no)
							}, 3000);
							// uni.navigateTo({
							// 	url: `/pages/index/paySuccess?no=${res.data.no}`
							// })
						} else {
							this.$api.msg(res.message)
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}else if(this.activity === 'PREFERENTIAL_DAY'){
					let data = {
						// method: this.payType,
						method:'COIN'
					}
					activityOrderApi(data).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							// 
							// this.boxOrderNo = res.data.boxOrderNo
							// this.getBoxOrderPaid(res.data.no)
							this.timer = setInterval(() => {
								this.getBoxOrderPaid(res.data.no)
							}, 3000);
							// uni.navigateTo({
							// 	url: `/pages/index/paySuccess?no=${res.data.no}`
							// })
						} else {
							this.$api.msg(res.message)
						}
						})
				}else{
					// 普通盲盒购买 //每日优惠
					let data = {
						boxId: this.boxId,
						type: this.type,
						// method: this.payTyp
						method:'COIN'
					}
					// 如果有提示卡ID则传入
					if(this.promptId){
						data['promptId'] = this.promptId
					}
					if(this.detailData.couponId){
						data['couponId'] = this.detailData.couponId
					}
					
					uni.showLoading()
					boxOrderApi(data).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							// 
							this.getBoxOrderPaid(res.data.no)
							this.timer = setInterval(() => {
								this.getBoxOrderPaid(res.data.no)
							}, 3000);
							// uni.navigateTo({
							// 	url: `/pages/index/paySuccess?no=${res.data.no}`
							// })
						} else {
							this.$api.msg(res.message)
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}

			},
			// 查询活动盲盒支付订单
			getCoinPaid(no) {
				coinPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						uni.redirectTo({
							url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.amount.sale}`
						})
						// uni.redirectTo({
						// 	url: `/pages/index/order?no=${no}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.amount.sale}`
						// })
						uni.hideLoading()
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
			
			getBoxOrderPaid(no) {
				boxOrderPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						clearInterval(this.timers); // 清除定时器
						this.timers = null;
						this.$api.msg('支付成功')
						uni.redirectTo({
							url: `/pages/index/boxPaySuccess?no=${no}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.total}`
						})
						// uni.redirectTo({
						// 	url: `/pages/index/order?no=${no}&boxId=${this.boxId}&name=${this.detailData.name}&type=${this.detailData.type}&sale=${this.detailData.amount.sale}`
						// })
						uni.hideLoading()
					}
				}).catch(err => {
					clearInterval(this.timer); // 清除定时器
					this.timer = null;
					uni.hideLoading()
				})
			},
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.timer);
			clearInterval(this.timers)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.box-order-confirm-page {
		padding-top: 112rpx;
		.main {
			padding: 0 32rpx 32rpx 32rpx;
			

			.box {
				width: 686rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				padding-right: 32rpx;
				

				.box-img {
					width: 160rpx;
					height: 160rpx;
					  background-image: url('@/static/new/shop-bg.png');
					  background-size: contain;
				}

				.detail {
					margin-left: 24rpx;

					.name {
						font-size: 28rpx;
						color: #000000;
						width: 470rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.ponit {
						width: 470rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 32rpx;

						.price {
							font-weight: 800;
							font-size: 28rpx;
							color: #000000;
						}

						.num {
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}
					}
				}
			}

			.coupon {
				width: 686rpx;
				height: 192rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 0 24rpx;
				margin-top: 24rpx;

				.item {
					height: 96rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.label {
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
					}

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

						.back-icon {
							width: 32rpx;
							height: 32rpx;
							margin-left: 8rpx;
						}
					}
				}
			}
			
			
		}
		.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;
				}
			}
		}
		.footer {
			width: 750rpx;
			height: 144rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.point {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;

				.ponit-icon {
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;
				}
			}

			.buy {
				width: 328rpx;
				height: 96rpx;
				background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 8rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>