<template>
	<view class="shop-confirm-page">
		<view class="main">
			<view class="address">
				<view class="detail" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
					<view class="info">
						<view class="name">新建收货地址，让快递到家~</view>
					</view>
				</view>
				<view class="detail" @click="selectAddress" v-else>
					<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>
				<image src="" mode="aspectFit" class="edit-icon"></image>
			</view>
			<view class="shop">
				<view class="shop-main">
					<view class="img">
						<image :src="previewData.productCoverResource.url" class="shop-img" mode="aspectFit"></image>
					</view>
					<view class="detail">
						<view class="name">{{previewData.productName}}</view>
						<view class="point">
							<view class="point-num">{{previewData.price.sale}}</view>
							<view class="num">X{{previewData.quantity}}</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"><text>{{previewData.points}} 积分</text><text style="margin-left: 10rpx;" v-if="previewData.deliveryFee > 0">{{previewData.deliveryFee}} 代币</text></view>
			<view class="btn" @click="confirmPay">立即支付</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/shop/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'
	import HeaderCom from '@/pages/components/header.vue'
	export default {
	mixins: [myMixins],
		data() {
			return {
				id:"",
				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
			}
		},
		props:{
			detailData:{
				type:Object,
				default: () => {}
			}
		},
		components:{HeaderCom},
		onShow() {
				
				// if(!uni.getStorageSync('address')){
				// 	this.getAddress()
				// 	console.log("bb")
				// }else{
				// 	this.address = JSON.parse(uni.getStorageSync('address'))
				// 	this.getDetail()
				// 	this.getOrderPreview()
				// 	this.getUserInfo()
				// }
				
		},
		onLoad(opation) {
			this.id = opation.id
			this.quantity = opation.quantity
			if(opation.no){
				this.no = opation.no
				this.orderId = opation.orderId
			}
			this.getAddress()
			uni.$on('backAddressParams', params => {
				if(params.id){
					this.address = params
					this.getOrderPreview()
				}
			});
			// this.getDetail()
			// this.getOrderPreview()
			// this.getUserInfo()
			// 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.detailData.id,quantity:this.quantity,userAddressId:this.address.id ?this.address.id : ''}).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
							}
						})
						// this.getDetail()
						this.getOrderPreview()
						this.getUserInfo()
					}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,
				  method:'POINTS',
				  methodCarriage:'COIN',
				  quantity:this.quantity
				}
				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.deliveryFee}&point=${this.previewData.points}&payType=${this.payType}&productName=${this.previewData.productName}&quantity=${this.previewData.quantity}`
					 })
					 uni.hideLoading()
				 }
				}).catch(err => {
					 clearInterval(this.timer);　　// 清除定时器
					 this.timer = null;
					 uni.hideLoading()
				})
			},
		},
		onUnload() {
		    // 在页面离开时清除定时器
		    clearInterval(this.timer);
		  }
	}
</script>

<style lang="scss" scoped>
	page{
	}
	.shop-confirm-page{
		.main{
			.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: 16rpx;
				padding-right: 32rpx;
				.shop-main{
					display: flex;
					align-items: center;
					.img{
						width: 160rpx;
						height: 160rpx;
						background-image: url('@/static/new/box-shop.png');
						background-size: 100%;
						background-repeat: no-repeat;
						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>