<!-- 确认订单 -->
<template>
	<view class="confirm-order">
		<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 scroll-y="true" class="main">
			<view class="address" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
				<view class="address-detail">
					<view class="address-header">
						<view class="address-info">
							<view class="user-info">新建收货地址，让快递到家~</view>
						</view>
						<view class="address-edit">
							创建地址
							<image src="@/static/index/go.png" mode="" class="edit-img"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="address" @click="selectAddress" v-if="JSON.stringify(address) !== '{}'">
				<image src="@/static/index/ad.png" mode="" class="address-img"></image>
				<view class="address-detail">
					<view class="address-header">
						<view class="address-info">
							<view class="user-info">{{address.receiver}}</view>
							<view class="info-phone">{{address.phone}}</view>
						</view>
						<view class="address-edit">
							修改地址
							<image src="@/static/index/go.png" mode="" class="edit-img"></image>
						</view>
					</view>
					<view class="address-all">地址：{{address.province}} {{address.city}} {{address.area}} {{address.address}}</view>
				</view>
				
			</view>
			
			<view class="shop">
				<view class="shop-detail">
					<image class="shop-img" :src="previewData.productCoverResource.url" mode=""></image>
					<view class="shop-info">
						<view class="shop-name">{{previewData.productName}}</view>
						<view class="shop-gk">
							<view class="shop-price">
								<view class="shop-symbol" style="display: inline-block;">¥</view>
								{{previewData.price.sale}}
							</view>
							<view>x{{previewData.quantity}}</view>
						</view>
						
					</view>
				</view>
				<!-- <view class="sundry">
					<view class="sundry-item">
						<view class="title">运费</view>
						<view class="value">¥0</view>
					</view>
					<view class="sundry-item">
						<view class="title">优惠券</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> -->
				<view class="pay">
					<view class="pay-item" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
						<view class="item-name">
							<view style="width: 35rpx;display: flex;align-items: center;margin-right: 10rpx;">
								<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>
			</view>
			<view class="money" v-if="payType != 'NONE'">
				<view class="money-item" style="margin-bottom: 32rpx;">
					<view class="money-item-title">
						配送服务：
					</view>
					<view class="money-price">¥ {{previewData.deliveryFee}}</view>
				</view>
				<view class="money-item" v-if="payType === 'ALIPAY' || payType === 'WECHAT'">
					<view class="money-item-title">
						实付金额：
					</view>
					<view class="money-price">¥ {{previewData.totalAmount}}</view>
				</view>
				<view class="money-item" v-if="payType === 'POINTS'">
					<view class="money-item-title">
						实付积分：
					</view>
					<view class="money-clover">
						<image src="@/static/mine/jf.png" mode="" class="clover-img"></image>
						{{detailData.mallPoint}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="submit" :class="{'submit-forbid':(payType === 'POINTS' && detailData.mallPoint > infoDetail.points) || previewData.methods.length === 0}" @click="confirmPay">{{(payType === 'POINTS' && detailData.mallPoint > infoDetail.points) ? '繁豆不足' : '确认支付'}}</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/order/confirm"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { userAddress,userInfo } from '@/API/user.js'
	import { orderPreview,channelGetApi,createShopOrder } from '@/API/order.js'
	import { productDetail } from '@/API/shop.js'
	import { orderPaidApi } from '@/API/index.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	export default {
	mixins: [myMixins],
		data() {
			return {
				id:"",
				statusBarHeight,
				payList:[
					// {label:"繁豆支付",type:1,visible:true},
					// {label:"现金支付",type:2,visible:false},
				],//支付方式
				quantity:0,
				detailData:{},
				totalPrice:0,//实付金额  需加上15的运费
				address:{},//收货地址
				payIndex:0,
				previewData:{
					price:{},
					productCoverResource:{},
					methods:[]
				},//订单预览
				no:"",
				orderId:'',
				paidWith:"",
				payType:'',
				infoDetail:{},
				timer:null
			}
		},
		onShow() {
			try{
				this.address = JSON.parse(uni.getStorageSync('address'))
			}catch(e){
				//TODO handle the exception
			}
		},
		onLoad(opation) {
			this.id = opation.id
			this.quantity = opation.quantity
			if(opation.no){
				this.no = opation.no
				this.orderId = opation.orderId
			}
			this.getAddress()
			this.getDetail()
			this.getOrderPreview()
			this.getUserInfo()
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			// 获取用户信息
			getUserInfo(){
				userInfo().then(res => {
					if(res.code === 200){
						this.infoDetail = res.data
					}
				})
			},
			// 订单预览
			getOrderPreview(){
				uni.showLoading()
				orderPreview({productId:this.id,quantity:this.quantity}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.previewData = res.data
						if(this.previewData.methods){
							this.previewData.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:'32rpx',height:'34rpx'})
								}
							})
							this.payList[0].visible = true
							this.payType = this.payList[0].type
						}
						// this.channelGet()
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 获取支付通道
			channelGet(){
				channelGetApi({method:'NONE'}).then(res => {
					if(res.code === 200){
						
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 获取详情
			getDetail(){
				uni.showLoading()
				productDetail(this.id).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.detailData = res.data
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 选择地址
			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
							}
						})
						
					}else{
						this.$api.msg(res.message)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 切换支付方式
			payChange(index,item){
				this.payList.forEach((v, i) => {
					v.visible = false;
				})
				this.payIndex = index;
				this.payType = item.type
				this.payList[index].visible = !this.payList[index].visible
			},
			// 确认支付
			confirmPay(){
				if(this.previewData.methods.length === 0){
					return
				}
				if(JSON.stringify(this.address) === '{}'){
					this.$api.msg('请选择地址')
					return
				}
				if(this.payType === 'POINTS' && this.detailData.mallPoint > this.infoDetail.points){
					return
				}
				let data = {
					productId: this.id,
				  userAddressId: this.address.id,
				  method: this.payType
				}
				uni.showLoading()
				createShopOrder(data).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.getOrderPaid(res.data.no)
						this.timer = setInterval(() => {
							 this.getOrderPaid(res.data.no)
						},3000); 
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			getOrderPaid(no){
				orderPaidApi({no}).then(payResult => {
				 if(payResult.data){
					 clearInterval(this.timer);　　// 清除定时器
					 this.timer = null;
					 this.$api.msg('支付成功')
					 uni.redirectTo({
					 	url:`/pages/shop/paySuccess?no=${no}&price=${this.previewData.totalAmount}&point=${this.detailData.mallPoint}&payType=${this.payType}`
					 })
					 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{
		.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;
			}
			.nav-title{
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
		}
		.main{
			height: 100vh;
			padding: 130rpx 22rpx 150rpx 22rpx;
			padding-top: 130rpx;
			padding-bottom: 150rpx;
			box-sizing: border-box;
			.address{
				width: 706rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				// margin-left: 22rpx;
				padding: 35rpx 31rpx 35rpx 31rpx;
				display: flex;
				.address-img{
					width: 25rpx;
					height: 30rpx;
					margin-top: 6rpx;
				}
				.address-detail{
					margin-left: 15rpx;
					.address-header{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 600rpx;
						.address-info{
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;
							.user-info{}
							.info-phone{
								margin-left: 26rpx;
							}
						}
						.address-edit{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #333333;
							
							.edit-img{
								margin-left: 9rpx;
								width: 8rpx;
								height: 14rpx;
							}
						}
					}
					.address-all{
						margin-top: 14rpx;
						font-size: 20rpx;
						color: #888888;
					}
				}
			}
			.shop{
				margin-top: 18rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 19rpx 22rpx 24rpx 12rpx;
				.shop-detail{
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #ECECEC;
					padding: 24rpx 24rpx 36rpx 20rpx;
					.shop-img{
						width: 146rpx;
						height: 146rpx;
						border-radius: 10rpx;
						background-size: 100%;
						background-repeat: no-repeat;
						background-position: 50%;
						margin-right: 22rpx;
					}
					.shop-info{
						.shop-name{
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							width: 455rpx;
							height: 78rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
						.shop-gk{
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 28rpx;
							color: #333333;
							.shop-price{
								// display: flex;
								// align-items: center;
								font-weight: bold;
								font-size: 28rpx;
								color: #F04236;
								.shop-symbol{
									// font-size: 24rpx;
								}
							}
						}
						
					}
				}
				.sundry{
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 26rpx;
					.sundry-item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						padding: 26rpx 11rpx 0 11rpx;
						.title{
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}
						.value{
							font-size: 28rpx;
							color: #888888;
						}
						.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;
							}
						}
					}
				}
				.pay{
					.pay-item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 24rpx;
						.item-name{
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							display: flex;
							align-items: center;
							margin-right: 15rpx;
							.pay-img{
								
							}
						}
						.item-img{
							width: 41rpx;
							height: 41rpx;
						}
						.item-img-view{
							width: 41rpx;
							height: 41rpx;
							border-radius: 50%;
							border: 2rpx solid #888888;
						}
					}
				}
			}
			.money{
				border-radius: 20rpx;
				background-color: #fff;
				padding: 18rpx 24rpx;
				margin-top: 20rpx;
				.money-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.money-item-title{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
				.money-price{
					color: #666;
					font-size: 28rpx;
					text-align: right;
				}
				.money-clover{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #666;
					.clover-img{
						width: 30rpx;
						height: 31rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.submit{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 706rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.submit-forbid{
				color: #FFFFFF;
				// background-color: #BAF2F1;
			}
		}
	}
</style>
