<template>
	<view>
		<view class="address" @click="goAddress">
			<view class="address_left">
				<view class="address_title">
					<image src="../../static/img/address.png" mode=""></image>
					<view class="address_title_name">{{address.consignee}}</view>
					<text>{{address.mobile}}</text>
				</view>
				<view class="address_content">
					{{address.sign_building}}
					{{address.country_name}}{{address.province_name}}{{address.city_name}}{{address.address}}{{address.zipcode}}
				</view>
			</view>
			<image src="../../static/img/right.png" class="address_more"></image>
			<image src="../../static/img/address_xian.png" class="address_xian" mode=""></image>
		</view>
		
		<view class="order_info" @click="openMore(0)">
			<view class="info_title">
				<text>Items in cart</text>
				<view class="info_title_right">
					<text>{{goods_list.length}} ltems</text>
					<image src="../../static/img/right.png" class="address_more"></image>
				</view>
			</view>
			<view class="info_image">
				<image class="info_image_item" :src="item.goods_thumb" v-for="(item,index) in goods_list" :key="index"/>
			</view>
		</view>
		
		<view class="method" v-if="shipping_list">
			<view class="method_title">Shipping Method</view>
			
			<view class="method_item" v-for="(item,index) in shipping_list " :key="index">
				<view class="method_item_image" @click="cartselectshipping(item.shipping_id)">
					<image src="../../static/img/select1.png"  style="width: 30rpx;height: 30rpx;" v-if="order.shipping_id==item.shipping_id"></image>
					<image src="../../static/img/select2.png"  style="width: 30rpx;height: 30rpx;"v-else ></image>
				</view>
				
				<view class="method_item_right">
					<view class="item_price">
						<text>{{item.shipping_name}}:</text>
						<text class="item_price_span">US${{item.shipping_fee}}</text>
					</view>
					<view class="item_time">
						<text class="item_time_span">{{item.shipping_desc}} </text>
						<!-- <text> 15/05/2022-04/05/2022</text> -->
					</view>
				</view>
			</view>
		</view>
		
		<view class="discount">
			<view class="discount_item" @click="openMore(1)">
				<text>Coupons</text>
				<view class="discount_item_right">
					<text v-show="isCoupons">-US$12.5</text>
					<image src="../../static/img/right.png" mode="" class="address_more"></image>
				</view>
			</view>
			<view class="discount_item" @click="openMore(3)">
				<view class="discount_item_left">
					<text>Points</text>
					<text class="discount_item_left_span">({{orderDate.your_integral || 0}})</text>
				</view>
				<view class="discount_item_right">
					<text v-show="isPoints">-US$2.5</text>
					<image src="../../static/img/right.png" mode="" class="address_more"></image>
				</view>
			</view>
		</view>
		
		<view class="settlement">
			<view class="settlement_item">
				<text>Subtotal:</text>
				<text class="settlement_item_right">US${{total.goods_price}}</text>
			</view>
			<view class="settlement_item">
				<text>Shipping fee:</text>
				<text class="settlement_item_right">US${{total.shipping_fee}}</text>
			</view>
			<view class="settlement_item">
				<text>Discount :</text>
				<text class="settlement_item_right1">-US${{total.discount || 0}}</text>
			</view>
		</view>
		
		<view class="total">
			<text>Total: US${{total.amount}}</text>
			<button @click="openMore(2)">PLACE ORDER</button>
		</view>
		
		<view class="mask" v-show="isShow" @click="isShow=false"></view>
		<view class="order_popup" v-show="isShow">
			<view class="order_popup_title">
				<text>
					{{popup_index==0?'Commodity information':popup_index==1?'Coupons':popup_index==2?'Payment Method':'Points'}}<text v-show="popup_index==3">(total:<text class="order_popup_title_span" >{{orderDate.your_integral || 0}}</text>)</text>
				</text>
				<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image>
			</view>
			
			<view class="order_popup_commodity" v-show="popup_index==0">
				
				<view class="good_info" v-for="(item,index) in goods_list " :key="index">
					<view class="good_info_left ">
						<view class="good_info_image" >
							<image :src="item.goods_thumb" mode=""></image>
						</view>
						<view class="left_info">
							<view class="info_name">{{item.goods_name}}</view>
							<view class="left_info_bottom">
								<view class="info_lable">
									<text>{{item.goods_attr |goodsAttr}}</text>
									<image src="/static/img/bottom.png" mode=""></image>
								</view>
								<text>x{{item.goods_number}}</text>
							</view>
							<view class="info_price">US${{item.goods_price}}</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="order_popup_coupons" v-show="popup_index==1">
				<view class="coupons_item" v-for="(item,index) in 3 " :key="index">
					<view class="coupons_item_left">
						<view class="item_left_prcie">$20.00</view>
						<text class="item_left_span">Min.spend</text>
						<view>$200.00</view>
					</view>
					<view class="coupons_item_right">
						<view class="coupons_right_info">
							<view class="coupons_right_info_title">All-purpose</view>
							<text>The tide zone is available</text>
							<view class="coupons_right_info_time">2022.09.23  10:37 - 2022.12.23  10:37</view>
						</view>
						<button>Use Now</button>
						<image src="../../static/img/select3.png" mode="" class="coupons_item_right_select"></image>
					</view>
				</view>
			</view>
			
			<view class="order_popup_pay" v-show="popup_index==2">
				<view class="pay_item" @click="selectPay(0)">
					<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==0"></image>
					<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
					<view class="pay_item_right">
						<image src="../../static/img/pay_pal.png" mode=""></image>
						<text>Pay Pal</text>
					</view>
				</view>
				<view class="pay_item" @click="selectPay(1)">
					<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==1"></image>
					<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
					<view class="pay_item_right">
						<image src="../../static/img/card.png" mode=""></image>
						<text>Credit/Debit Card</text>
					</view>
				</view>
				<view class="pay_item" @click="selectPay(2)">
					<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==2"></image>
					<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
					<view class="pay_item_right">
						<image src="../../static/img/GPay.png" mode=""></image>
						<text>Google Pay</text>
					</view>
				</view>
				<view class="pay_item" @click="selectPay(3)">
					<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==3"></image>
					<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image>
					<view class="pay_item_right">
						<image src="../../static/img/APay.png" mode=""></image>
						<text>Apple pay</text>
					</view>
				</view>
				<!-- <navigator url="/pages/order/paySuccess"> -->
					<button @click="submitorder">PAY NOW</button>
				<!-- </navigator> -->
			</view>
			
			<view class="order_popup_points" v-show="popup_index==3">
				<view class="points_item">
					<image src="../../static/img/select2.png" mode=""></image>
					<text>Use points</text>
				</view>
				<view class="points_item">
					<image src="../../static/img/select1.png" mode=""></image>
					<text>Do not use points</text>
				</view>
			</view>
			
		</view>
		<!-- <pay :payShow="" :orderId=""></pay> -->
	</view>
</template>

<script>
	import {defaultRequest2,defaultRequest3} from '../../api/index.js'
	export default {
		data() {
			return {
				isShow:false,
				popup_index:'',
				isCoupons:false,
				isPoints:false,
				query:{
					_action:'cartcheckout',
					is_new:0,
					direct_shopping:0,
					consignee:''
				},
				orderDate:{},
				address:{},
				goods_list:[],
				shipping_list:[],
				bonus_list:[],
				total:{},
				order:{},
				// 支付方式: 0、支付宝 1、银行卡、信用卡 2、谷歌支付 4、苹果支付
				pay_index:0
			}
		},
		methods:{
			
			// 获取调用支付信息数据
			getPayDate(id,will_get_integral){
				let data={_action:'payorder',order_id:id,order_type:'GOODSBUY',payment_method:'alipay.native'}
				defaultRequest2(data).then(res=>{
					console.info(res)
					if(res.error==0){
						//订单对象，从服务器获取
						if(res.data.need_pay_amount==0) return
						uni.requestPayment({
						    provider: 'alipay',
						    orderInfo: res.data.prepay_data.order_info, //支付宝订单数据
						    success: function (res) {
						        console.log('success:' + JSON.stringify(res));
										uni.redirectTo({
											url: 'paySuccess?type=0&order_id='+id+'&will_get_integral='+will_get_integral
										});
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
										uni.redirectTo({
											url: 'paySuccess?type=1&order_id='+id+'&will_get_integral='+will_get_integral
										});
						    }
						});
					}
				})
				
			},
			// 选择支付方式
			selectPay(index){
				this.pay_index=index
			},
			goAddress(){
				uni.navigateTo({
					url:'../account/address?type=1'
				})
			},
			// 提交订单
			submitorder(){
				let data={
					_action:'submitorder',
					consignee:this.address,
					postscript:'',
					bonus:this.order.bonus,
					surplus:this.order.surplus,
					shipping_id:this.order.shipping_id,
					directshopping:0,
				}
				defaultRequest3(data,'consignee').then(res=>{
					console.info(res)
					if(res.error==0){
						this.getPayDate(res.data.order.order_id,res.data.will_get_integral)
					}
				})
			},
			// 变更配送方式
			cartselectshipping(id){
				let data={_action:'cartselectshipping',shipping_id:id,consignee:this.address}
				defaultRequest3(data,'consignee').then(res=>{
					console.info(res)
					if(res.error==0){
						this.total=res.data.total
						this.order=res.data.order
					}
				})
			},
			getList(){
				defaultRequest3(this.query,'consignee').then(res=>{
					console.info(res)
					if(res.error==0){
						this.orderDate=res.data
						this.address=res.data.consignee
						this.goods_list=res.data.goods_list
						this.shipping_list=res.data.shipping_list
						if(res.data.bonus_list){
							this.bonus_list=res.data.bonus_list
						}
						this.total=res.data.total
						this.order=res.data.order
					}
				})
			},
			openMore(i){
				this.popup_index=i
				if(i==1){
					if(this.bonus_list.length==0){
						uni.showToast({
							icon:'none',
							title:'No coupon available'
						})
						return
					}
					if(this.orderDate.allow_use_bonus==0){
						uni.showToast({
							icon:'none',
							title:'Coupon cannot be used for this product'
						})
						return
					}
				}else if(i==3){
					if(this.orderDate.allow_use_integral==0){
						uni.showToast({
							icon:'none',
							title:'Points cannot be used for this product'
						})
						return
					}
				}
				this.isShow=true
			}
		},
		onLoad(e) {
			this.query=JSON.parse(e.query)
			this.getList()
		},
		onShow() {
			uni.$once('query' ,(query)=>{
				console.info(query)
				if(query.type=='address'){
					this.query.consignee=query.consignee
					this.query.is_new=0
					this.getList()
				}
			});
		},
		filters:{
			goodsAttr(e){
				return e.replace(/\s\n/g,';');
			}
		}
	}
</script>
<style>
	page{
		border-top:14.67rpx #F6F5FA solid ;
		padding-bottom: 140rpx;
	}
</style>
<style lang="scss" scoped>
	@import "@/common/scss/order.scss";
	
	
	
	.order_info{
		padding-left: 26.67rpx;
		padding-right: 22.67rpx;
		padding-top: 50.67rpx;
		padding-bottom: 42.67rpx;
		border-bottom:14.67rpx #F6F5FA solid ;
		.info_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			font-size: 26.67rpx;
			
			.info_title_right{
				display: flex;
				align-items: center;
				color: #666666;
				font-size: 24rpx;
				
				image{
					margin-left: 33.33rpx;
				}
			}
		}
		.info_image{
			display: flex;
			margin-top: 26.67rpx;
			.info_image_item{
				width: 133.33rpx;
				height: 133.33rpx;
				margin-right: 12rpx;
				background-color: #999999;
			}
		}
	}
	.method{
		border-bottom:14.67rpx #F6F5FA solid ;
		padding-top: 50rpx;
		
		.method_title{
			font-size: 26.67rpx;
			font-weight: bold;
			padding-left: 25.33rpx;
		}
		.method_item{
			padding:41.33rpx 0 ;
			border-bottom: 1px #E2E2E2 solid;
			padding-left: 42.67rpx;
			padding-right: 29.33rpx;
			display: flex;
			align-items: center;
			
			&:last-child{
				border-bottom: none;
			}
			.method_item_image{
				width: 30rpx;
				height: 30rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.method_item_right{
				margin-left: 30.67rpx;
				.item_price{
					font-size: 28rpx;
					margin-bottom: 14rpx;
					
					.item_price_span{
						color: #B22234;
					}
				}
				.item_time{
					font-size: 25.33rpx;
					font-weight: 400;
					.item_time_span{
						color: #555555;
					}
				}
			}
		}
	}
	.discount{
		border-bottom:14.67rpx #F6F5FA solid ;
		padding-left: 26rpx;
		padding-right: 22.67rpx;
		padding-top: 42rpx;
		padding-bottom: 45.33rpx;
		
		.discount_item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom: 42rpx;
			&:last-child{
				margin-bottom: 0;
			}
			
			.discount_item_left{
				.discount_item_left_span{
					color: #666666;
				}
			}
			.discount_item_right{
				display: flex;
				align-items: center;
				color: #B22234;
				font-weight: bold;
				
				image{
					margin-left: 14rpx;
				}
			}
		}
	}
	.settlement{
		border-bottom:14.67rpx #F6F5FA solid ;
		padding: 44rpx 26rpx;
		
		.settlement_item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom: 44rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.settlement_item_right{
				color: #3C3B6E;
				font-weight: bold;
			}
			.settlement_item_right1{
				color: #B22234;
				font-weight: bold;
			}
		}
	}
	.total{
		padding: 30.67rpx 0;
		padding-left: 26rpx;
		padding-right: 19.33rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		z-index: 99;
		box-sizing: border-box;
		font-size: 36rpx;
		font-weight: 600;
		
		button{
			font-size: 26.67rpx;
			color: white;
			height: 73.33rpx;
			line-height: 73.33rpx;
			border-radius: 0;
			border: none;
			background-color: black;
			margin: 0;
		}
	} 
	
</style>