<template>
	<view class="confirm-order-page">
		<view class="nav" :style="{'padding-top': statusBarHeight}">
			<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
			<view class="nav-title">确认订单</view>
			<view class="nav-back"></view>
		</view>
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation>
			<view class="shop">
				<view class="shop-detail">
					<view class="shop-img" :style="{'backgroundImage':`url(${detailData.coverResource.url})`}"></view>
					<view class="detail">
						<view class="detail-title">{{detailData.name}}</view>
						<view class="detail-num">{{statusObj[detailData.type]}}</view>
						<view class="detail-price">
							<text class="detail-sym">¥</text>
							{{detailData.amount.sale}}
						</view>
					</view>
				</view>
				<view class="pay">
					<!-- <view class="pay-item">
						<view class="item-name">
							<view class="pay-img-main" >
								<image src="@/static/index/hb.png" style="width: 26rpx;height: 27rpx" class="pay-img" mode=""></image>
							</view>
							优惠券
						</view>
						<view class="coupon">
							<view class="coupon-price">- ¥8</view>
							<view class="coupon-num">3张可用</view>
							<image src="@/static/index/hb-g.png" mode="" class="coupon-arr"></image>
						</view>
					</view> -->

					<view class="pay-item" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
						<view class="item-name">
							<view class="pay-img-main">
								<image :src="item.img" :style="{width:item.width,height:item.height}" class="pay-img"
									mode="" v-if="item.img"></image>
								<view :style="{width:item.width,height:item.height}" v-else></view>
							</view>
							{{item.label}}
						</view>
						<image src="@/static/index/g.png" mode="" class="item-img" v-if="item.visible"></image>
						<view class="item-img-view" v-else></view>
					</view>
					<view class="coupon-total">
						<!-- 优惠<text class="price">¥8</text> -->
						实付<text class="total">¥{{detailData.amount.sale}}</text>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="title">买家需知</view>
				<view class="main-txt">1.商品抽奖存在概率性，付费请谨慎。</view>
				<view class="main-txt">2.本公司惊喜礼盒开箱概率已经过公证处鉴定(公证后台
					设置与app展示一致)。</view>
				<view class="main-txt">3.惊喜礼盒一经购买不支持退款(除商品质量问题)，但可
					8折回收后自动兑换成繁豆用于兑换商品，繁豆为平台积
					分，暂不支持提现。</view>
				<view class="main-txt">4.本平台禁止未成年人消费。</view>
				<view class="main-txt">5.受疫情影响，部分地区物流公司暂时无法接单及派送，
					为此给您带来的不便我们深表歉意。请您耐心等待我们
					会在疫情解除的第一时间为您派件。</view>
			</view>
			<view class="footer">
				<view class="footer-detail">
					<text class="footer-total">合计：</text>
					<text class="footer-sym">¥</text>
					<text class="footer-price">{{detailData.amount.sale}}</text>
				</view>
				<view class="footer-btn" @click="pay">确认支付</view>
			</view>
		</scroll-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/confirmOrder"></page-popup>

	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {
		boxOrderReviewApi,
		boxOrderApi,
		boxOrderPaidApi
	} from '@/API/index.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	export default {
mixins: [myMixins],
		data() {
			return {
				statusBarHeight,
				boxId: "",
				type: "",
				buyMethod: "",
				detailData: {
					coverResource: {},
					amount: {}
				},
				statusObj: {
					SINGLE: "一发入魂",
					TRIPLE: "三连抽",
					PENTA: "五连抽",
				},

				payList: [],
				payType: '',
				timer: null
			}
		},
		onLoad(opation) {
			this.boxId = opation.boxId
			this.type = opation.type
			this.getDetail()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 订单预览
			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
					}
				})
			},
			// 切换支付方式
			payChange(index, item) {
				this.payList.forEach((v, i) => {
					v.visible = false;
				})
				this.payType = item.type
				this.payList[index].visible = !this.payList[index].visible
			},
			pay() {
				let data = {
					boxId: this.boxId,
					type: this.type,
					method: this.payType
				}
				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()
				})

			},
			getBoxOrderPaid(no) {
				boxOrderPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						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);
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}

	.confirm-order-page {
		.nav {
			z-index: 100;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 23rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;

			.nav-back {
				width: 19rpx;
				height: 34rpx;
				z-index: 11;
			}

			.nav-title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
		}

		.scroll-list-view {
			height: 100vh;
			padding-top: 130rpx;
			box-sizing: border-box;
		}

		.shop {
			width: 706rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 19rpx 16rpx 32rpx 20rpx;
			margin-left: 22rpx;

			.shop-detail {
				display: flex;
				align-items: center;

				.shop-img {
					width: 146rpx;
					height: 146rpx;
					background-size: 100%;
					background-position: 50%;
					background-repeat: no-repeat;
					border-radius: 10rpx;
				}

				.detail {
					margin-left: 21rpx;

					.detail-title {
						width: 400rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 28rpx;
						font-weight: 500;
						color: #333;

					}

					.detail-num {
						margin-top: 10rpx;
						font-size: 22rpx;
						color: #888888;
					}

					.detail-price {
						margin-top: 17rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #F04236;

						.detail-sym {
							// font-size: 24rpx;
						}
					}
				}
			}

			.pay {
				margin-top: 26rpx;
				border-top: 1px solid #EEEEEE;

				.pay-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 29rpx;

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

						.pay-img-main {
							width: 35rpx;
							display: flex;
							align-items: center;
							margin-right: 10rpx;
						}

						.pay-img {}
					}

					.coupon {
						display: flex;
						align-items: center;
						
						.coupon-price{
							font-size: 28rpx;
							color: #EF4235;
						}
						.coupon-num{
							font-size: 24rpx;
							color: #FFFFFF;
							background: #F04437;
							border-radius: 8rpx;
							padding: 6rpx 12rpx;
						}

						.coupon-arr {
							margin-left: 13rpx;
							width: 12rpx;
							height: 22rpx;
						}
					}

					.item-img {
						width: 41rpx;
						height: 41rpx;
					}

					.item-img-view {
						width: 41rpx;
						height: 41rpx;
						border-radius: 50%;
						border: 2rpx solid #888888;
					}
				}

				.coupon-total {
					border-top: 1px solid #EEEEEE;
					padding-top: 35rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-top: 27rpx;

					.price {
						font-weight: 500;
						font-size: 28rpx;
						color: #EF4235;
						margin: 0 38rpx 0 10rpx;
					}

					.total {
						margin-left: 19rpx;
						font-weight: bold;
						font-size: 40rpx;
						color: #EF4235;
					}
				}
			}
		}


		.main {
			padding: 45rpx 71rpx 0 26rpx;

			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 6rpx;
			}

			.main-txt {
				font-size: 24rpx;
				color: #888888;
				margin-bottom: 15rpx;
			}
		}

		.footer {
			position: fixed;
			bottom: 54rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 22rpx 0 76rpx;

			.footer-detail {

				.footer-total {
					display: inline-block;
					font-size: 20rpx;
					color: #888888;
				}

				.footer-sym {
					display: inline-block;
					margin-left: 8rpx;
					font-size: 30rpx;
					color: #FF6256;
				}

				.footer-price {
					display: inline-block;
					// font-family: YouSheBiaoTiHei; 
					font-size: 52rpx;
					color: #FF6256;
					font-weight: 800;
					margin-left: 5rpx;
				}
			}

			.footer-btn {
				width: 323rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>