<template>
	<view class="shop-confirm-page">
		<HeaderCom></HeaderCom>
		<view class="main">
			<view class="address" @click="goAddress">
				<view class="detail" v-if="address.id">
					<view class="info">
						<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>
				<view class="detail" v-else>
					<view class="info">
						<view class="name">选择地址</view>
					</view>
				</view>
				<image src="" mode="aspectFit" class="edit-icon"></image>
			</view>
			<view class="shop" v-for="(item,index) in previewData.products" :key="index">
				<view class="shop-main">
					<view class="img">
						<image :src="item.coverResource.url" class="shop-img" mode="aspectFit"></image>
					</view>
					<view class="detail">
						<view class="name">{{item.name}}</view>
						<view class="point">
							<view class="point-num">{{item.price.sale}}</view>
							<view class="num">X1</view>
						</view>
					</view>
				</view>
			</view>
			<view class="other">
				<view class="item">
					<view class="label">商品数量</view>
					<view class="value">{{previewData.quantity}}</view>
				</view>
				<view class="item">
					<view class="label">邮费</view>
					<view class="value">{{previewData.deliveryFee}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<!-- <view class="price">¥ {{previewData.totalAmount}}</view> -->
			<view class="price">运费：{{previewData.totalAmount}}代币</view>
			<view class="btn" @click="confirmPay">立即支付</view>
		</view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { mathMul,mathAdd } from '@/utils/mathUtils.js'
	import { userAddress,userInfo } from '@/API/user.js'
	import { orderPreview,channelGetApi,createShopOrder } from '@/API/order.js'
	import { productDetail } from '@/API/shop.js'
	import { boxDeliveryPreviewApi,boxDeliveryApi,orderPaidApi,deliveryReviewBatchApi,deliveryBatchApi } from '@/API/index.js'
	import NavCom from '@/pages/components/nav.vue'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	import HeaderCom from '@/pages/components/header.vue'
	export default {
	mixins: [myMixins],
		data() {
			return {
				id:"",
				statusBarHeight,
				payList:[
					// {label:"繁豆支付",type:1,visible:true},
					// {label:"现金支付",type:2,visible:false},
				],//支付方式
				quantity:0,
				detailData:{},
				address:{},//收货地址
				payIndex:0,
				previewData:{
					productCoverResource:{},
					price:{},
					methods:[],
					products:[]
				},//订单预览
				no:"",
				orderId:'',
				paidWith:"",
				payType:'',
				infoDetail:{},
				timer:null,
				deliverList:[],
				productName:'',
				addressList:[]
			}
		},
		components:{NavCom,HeaderCom},
		onShow() {
			
		},
		onLoad(opation) {
			
			// this.getOrderPreview()
			
		},
		mounted() {
			try{
				this.getAddress()
				uni.$on('backAddressParams', params => {
					if(params.id){
						this.address = params
					}
				});
				this.deliverList = JSON.parse(uni.getStorageSync('deliverList'))
				this.getDeliveryReviewBatch()
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			goAddress(){
				uni.navigateTo({
					url:`/pages/mine/address?type=select`
				})
			},
			// 获取用户信息
			getUserInfo(){
				userInfo().then(res => {
					if(res.code === 200){
						this.infoDetail = res.data
						
					}
				})
			},
			getDeliveryReviewBatch(){
				uni.showLoading()
				deliveryReviewBatchApi({boxRecordIds:this.deliverList,userAddressId:this.address.id ? this.address.id : ''}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.previewData = res.data
						this.quantity = this.previewData.quantity
						this.productName = ''
						this.previewData.products.forEach(item => {
							this.productName += `${item.name}、`
						})
						// 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()
				})
			},
			// 订单预览
			getOrderPreview(){
				uni.showLoading()
				boxDeliveryPreviewApi({boxRecordId: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)
					}
				})
			},
			// 选择地址
			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.addressList = res.data.content
						this.deliverList = JSON.parse(uni.getStorageSync('deliverList'))
						this.getDeliveryReviewBatch()
					}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 = {
					userAddressId:this.address.id,
					boxRecordIdList:this.deliverList,
					method: 'COIN'
					// quantity:this.quantity,
					// boxRecordId: this.id,
				 //  userAddressId: this.address.id,
				  // method: this.payType
				}
				uni.showLoading()
				deliveryBatchApi(data).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						// orderPaidApi
						this.getOrderPaid(res.data.no)
						this.timer = setInterval(() => {
							 this.getOrderPaid(res.data.no)
						},3000); 
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
				// boxDeliveryApi(data).then(res => {
				// 	uni.hideLoading()
				// 	if(res.code === 200){
				// 		// orderPaidApi
				// 		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}&type=record&quantity=${this.quantity}&productName=${this.productName}`
					 })
					 uni.hideLoading()
				 }
				}).catch(err => {
					 clearInterval(this.timer);　　// 清除定时器
					 this.timer = null;
					 uni.hideLoading()
				})
			},
		},
		onUnload() {
		    // 在页面离开时清除定时器
		    clearInterval(this.timer);
		  }
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.shop-confirm-page{
		padding-top: 112rpx;
		.main{
			padding: 0 32rpx 24rpx 32rpx;
			.address{
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.detail{
					.info{
						display: flex;
						align-items: center;
						.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: 520rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
						margin-top: 12rpx;
					}
				}
				.edit-icon{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.shop{
				margin-top: 24rpx;
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding-right: 32rpx;
				.shop-main{
					display: flex;
					align-items: center;
					.img{
						width: 160rpx;
						height: 160rpx;
						background-image: url('@/static/new/box-shop.png');
						  background-repeat: no-repeat;
						  background-size: 100%;
						// background: linear-gradient( 180deg, rgba(98,126,153,0) 0%, #627E99 100%), #E6EBF0;
						border-radius: 8rpx 0 0 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.shop-img{
							width: 142rpx;
							height: 132rpx;
						}
					}
					.detail{
						margin-left: 24rpx;
						.name{
							width: 470rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 28rpx;
							color: #000000;
						}
						.point{
							margin-top: 32rpx;
							width: 470rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.point-num{
								font-weight: 800;
								font-size: 28rpx;
								color: #000000;
							}
							.num{
								font-weight: 500;
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
			}
			.other{
				margin-top: 24rpx;
				height: 192rpx;
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				.item{
					height: 96rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 24rpx;
					.label{
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
					}
					.value{
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
					}
				}
			}
		}
		
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 144rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			.price{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
			.btn{
				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>