<template>
	<view class="body">
		<view class="details_title">
			<view class="shipped" v-if="details_index==1">
				<view class="shipped_left">
					<image src="../../static/img/order_shipped.png" mode=""></image>
				</view>
				<view>
					<text class="shipped_right_text">Ready for shipment</text>
					<view>The buyer has paid,Waiting for the merchant to deliver</view>
				</view>
			</view>

			<view class="cancelled" v-if="details_index==4">
				<view class="cancelled_left">
					<image src="../../static/img/close2.png" mode=""></image>
					<view class="cancelled_left_info">
						<text class="shipped_right_text">Deal’s off</text>
						<view>The transaction has been closed, looking forward to your re-selection</view>
					</view>
				</view>

			</view>

			<view class="cancelled completed" v-if="details_index==3" @click="goLogistics">
				<view class="cancelled_left">
					<image src="../../static/img/completed.png" mode=""></image>
					<view class="cancelled_left_info">
						<text class="shipped_right_text">Signed for</text>
						<view>2022-04-27 21:15:55</view>
					</view>
				</view>
				<view class="cancelled_right">
					<image src="../../static/img/right2.png" mode=""></image>
				</view>
			</view>

			<view class="cancelled toPaid" v-if="details_index==0">
				<view class="cancelled_left">
					<view>
						<text class="shipped_right_text">Waiting for payment</text>
						<view>The timeout order will be closed automatically</view>
					</view>
				</view>
				<!-- <view class="cancelled_right">
					<text class="shipped_right_text">23:59:58</text>
					<view>T-minus payment</view>
				</view> -->
			</view>

			<view class="cancelled transit" @click="goLogistics" v-if="details_index==2">
				<view class="cancelled_left">
					<image src="../../static/img/transit.png" mode=""></image>
					<view class="cancelled_left_info">
						<view class="shipped_right_text">【New York】Has arrived statesHas arrived states</view>
						<view>2022-04-27 21:15:55</view>
					</view>
				</view>
				<view class="cancelled_right">
					<image src="../../static/img/right2.png" mode=""></image>
				</view>
			</view>


		</view>
		<view class="address">
			<view class="address_left">
				<view class="address_title">
					<image src="../../static/img/address.png" mode=""></image>
					<view class="address_title_name">{{goodsDate.consignee}}</view>
					<text>{{goodsDate.mobile}}</text>
				</view>
				<view class="address_content">
					<text>{{goodsDate.sign_building}}</text>
					<view>{{goodsDate.address_detail}}</view>
				</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_popup_commodity">
			<view class="good_info" v-for="(item,index) in goods_list " :key="index" @click="goDetails(item.goods_id)">
				<view class="good_info_left ">
					<view class="good_info_image" style="border-radius: 10rpx;">
						<image :src="item.goods_thumb" mode="" style="border-radius: 10rpx;"></image>
					</view>
					<view class="left_info">
						<view class="info_name">{{item.goods_name}}</view>
						<view class="left_info_bottom" v-if="item.goods_attr">
							<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">
							<text>US${{item.subtotal}}</text>
							<!-- <button v-if="details_index!=0 && details_index!=4">RREFUND</button> -->
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="summary">
			<view class="summary_title">Order summary</view>
			<view class="summary_item">
				<view>
					Subtotal
					<text :class="details_index==2?'summary_item_text1':'summary_item_text'">（Tax included）</text>
				</view>
				<view class="summary_item_right">US${{goodsDate.goods_amount}}</view>
			</view>
			<view class="summary_item">
				<view>Shipping</view>
				<view class="summary_item_right">US${{goodsDate.shipping_fee}}</view>
			</view>
			<view class="summary_item">
				<view>Coupon</view>
				<view class="summary_item_right1">-US${{goodsDate.bonus}}</view>
			</view>
			<view class="summary_item">
				<view>Points</view>
				<view class="summary_item_right1">-US${{goodsDate.surplus}}</view>
			</view>
			<view class="summary_item">
				<view>Order total</view>
				<view>US${{goodsDate.order_amount}}</view>
			</view>
			<!-- <view class="summary_tips" v-if="details_index==0">
				<image src="../../static/img/gantan1.png" mode=""></image>
				<text>Reward 10 points</text>
			</view> -->
		</view>

		<view class="summary">
			<view class="summary_title">Order information</view>
			<view class="summary_item">
				<view>Order id</view>
				<view class="summary_item_right">
					<text>{{goodsDate.order_sn}}</text>
					<button @click="Copy(goodsDate.order_sn)">copy</button>
				</view>
			</view>
			<view class="summary_item">
				<view>Shipping</view>
				<view class="summary_item_right">{{goodsDate.shipping_name}}</view>
			</view>
			<view class="summary_item">
				<view>Order Time</view>
				<view class="summary_item_right">{{goodsDate.formated_add_time}}</view>
			</view>
			<view class="summary_item" v-if="details_index!=0 && goodsDate.formated_pay_time">
				<view>Payment time</view>
				<view class="summary_item_right">{{goodsDate.formated_pay_time}}</view>
			</view>
			<view class="summary_item" v-if="details_index==2">
				<view>Delivery time</view>
				<view class="summary_item_right">{{goodsDate.formated_shipping_time}}</view>
			</view>
			<!-- 完成时间 -->
			<view class="summary_item" v-if="details_index==3">
				<view>Completion time</view>
				<view class="summary_item_right"></view>
			</view>
			<!-- 取消时间 -->
			<view class="summary_item" v-if="details_index==4">
				<view>Cancel time</view>
				<view class="summary_item_right"></view>
			</view>

		</view>

		<view class="details_footer" v-if="details_index!=1">
			<button class="white" v-if=" details_index==2||details_index==3" @click="goLogistics">LOGISTICS</button>
			<button class="white" v-if="details_index==4 || details_index==3" @click.stop="openTips(1)">DELETE
				ORDER</button>
			<button class="black" v-if="details_index==3 && goodsDate.comment_status_code==0"
				@click="goComment()">COMMENT</button>

			<button class="white" v-if="details_index==0 " @click.stop="openTips(0)">CANCEL ORDER</button>
			<button class="black" v-if="details_index==0" @click="isPay=true">PAY NOW</button>

			<button class="black" v-if="details_index==2" @click.stop="openTips(2)">CONFIRM RECEIPT</button>
		</view>

		<!-- 支付 -->
		<view class="mask" v-show="isPay" @click="isPay=false"></view>
		<view class="order_popup" v-show="isPay">
			<view class="order_popup_title">
				<text>
					Payment Method
				</text>
				<image src="../../static/img/close1.png" mode="" @click="isPay=false"></image>
			</view>
			<view class="order_popup_pay">
				<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> -->
				<button @click="getPayDate">PAY NOW</button>
			</view>
		</view>
		<!-- 删除、取消弹框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="Close" :confirmText="tipsBut" title="Tips" :content="tipsInfo"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	import {
		defaultRequest2
	} from '../../api/index.js'
	export default {
		data() {
			return {
				// 0、待发货 1、已取消 2、已完成 3、待支付 4、运输中 (已废弃)
				// 0、待支付 1、待发货 2、运输中 3、已完成 4、已取消
				details_index: 4,
				query: {
					_action: 'getorder',
					order_id: '',
					order_sn: ''
				},
				goodsDate: {},
				goods_list: [],
				isPay: false,
				payQuery: {
					_action: 'payorder',
					order_id: '',
					order_type: 'GOODSBUY',
					payment_method: 'alipay.native'
				},
				pay_index: 0,
				logisticsinfo: {},
				// 弹出提示框的状态 0：取消订单 1、删除订单 2、确认收货
				tipsType: 0,
				tipsInfo: '',
				tipsBut: '',
				cancelQuery: {
					_action: 'cancelorder',
					order_id: ''
				},
			}
		},
		methods: {
			// 跳转商品详情
			goDetails(id) {
				uni.navigateTo({
					url: '/pages/productDetails/index?goodid=' + id
				})
			},
			// 跳转评论页面
			goComment() {
				let data = this.goodsDate
				data.order_goods = this.goods_list
				uni.navigateTo({
					url: '../productDetails/review?data=' + JSON.stringify(data)
				})
			},
			// 淡出提示
			openTips(type) {
				this.tipsType = type
				if (type == 0) {
					this.tipsInfo =
						'Are you sure you want to cancel this order? This order will be regarded as invalid after cancellation'
					this.tipsBut = 'CancelOrder'
					this.cancelQuery._action = 'cancelorder'
				} else if (type == 1) {
					this.tipsInfo = 'Are you sure you want to delete this order?'
					this.tipsBut = 'DeleteOrder'
					this.cancelQuery._action = 'deleteorder'
				} else if (type == 2) {
					this.tipsInfo = 'Are you sure you have received the products?'
					this.tipsBut = 'Confirm'
					this.cancelQuery._action = 'affirmorder'
				}
				this.$refs.alertDialog.open()

			},
			// 提示框点击确操作 取消订单、删除订单
			dialogConfirm() {
				defaultRequest2(this.cancelQuery).then(res => {
					console.info(res)
					if (res.error == 0) {
						if (this.tipsType == 0) {
							this.details_index = 4
						} else if (this.tipsType == 1) {
							uni.navigateBack()
						} else {
							this.details_index = 3
						}
						this.getList()
					}
				})
			},
			goLogistics() {
				uni.navigateTo({
					url: './logisticsDetails?order_id=' + this.goodsDate.order_id
				})
			},
			// 选择支付方式
			selectPay(index) {
				this.pay_index = index
			},
			// 获取调用支付信息数据
			getPayDate() {
				console.log(this.pay_index)
				if (this.pay_index == 0) {
					let data = {
						_action: 'payorder',
						order_id: this.payQuery.order_id,
						order_type: 'GOODSBUY',
						payment_method: 'paypal'
					}
					defaultRequest2(data).then(res => {
						console.info(data)
						console.log(res)
						if (res.error == 0) {
							if (res.data.need_pay_amount == 0) return
							// plus.runtime.openURL(res.data.prepay_data.checkoutnow_url)
							// this.src = res.data.prepay_data.checkoutnow_url
							uni.navigateTo({
								url: './paypalWebview?src=' + res.data.prepay_data.checkoutnow_url
							})
						}
					})
				} else if(this.pay_index == 1) {
					let data = {
						_action: 'payorder',
						order_id: this.payQuery.order_id,
						order_type: 'GOODSBUY',
						payment_method: 'oceanpay'
					}
					defaultRequest2(data).then(res => {
						console.info(data,'det 支付')
						console.log(res,'det 支付')
						if (res.error == 0) {
							if (res.data.need_pay_amount == 0) return
							// plus.runtime.openURL(res.data.prepay_data.checkoutnow_url)
							// this.src = res.data.prepay_data.checkoutnow_url
							uni.navigateTo({
								url: './paypalWebview?src=' + res.data.prepay_data.checkoutnow_url
							})
						}
					})
				} else {
					console.info(this.payQuery, '支付宝')
					defaultRequest2(this.payQuery).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?order_id=' + this.payQuery.order_id
									});
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									uni.showToast({
										title: 'Payment failed',
										icon: 'none'
									})
								}
							});
						}
					})
				}
			},
			payNow(id) {
				this.payQuery.order_id = id
				this.isPay = true
			},
			getDate() {
				defaultRequest2(this.query).then(res => {
					console.info(res)
					if (res.error == 0) {
						this.goodsDate = res.data
						this.goods_list = res.goods_list
						if (this.details_index == 4) {
							this.getLogistics()
						}
					}
				})
			},
			getLogistics() {
				let data = {
					_action: 'getlogisticsinfo',
					order_id: this.goodsDate.order_id,
					order_sn: ''
				}
				defaultRequest2(data).then(res => {
					console.info(res)
					if (res.error == 0) {
						this.logisticsinfo = res.data[0]
					}
				})
			},
			// 复制
			Copy(e) {
				console.log(e)
				uni.setClipboardData({
					data: e,
					success: () => {
						uni.showToast({
							title: 'ok!',
							icon: 'none'
						})
					}

				})
			}
		},
		onLoad(e) {
			console.info(e)
			this.details_index = e.details_index
			this.query.order_id = e.id
			this.cancelQuery.order_id = e.id
			this.payQuery.order_id = e.id
			this.getDate()
		},
		filters: {
			goodsAttr(e) {
				return e.replace(/\s\n/g, ';');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/scss/order.scss";

	page {}

	.body {
		padding-bottom: 130rpx;
	}
</style>
