<template>
	<view class="bg">
		<view class="title-box">
			<span class="iconfont" @click="goBack">&#xe660;</span>
			<view>订单状态</view>
		</view>
		<view class="top-box">
			<view>{{info.status_text}}</view>
			
			<!-- 待支付时会显示自动取消时间 -->
			<view v-if="info.status=='WAIT_PAYMENT'" class="close-time">订单将在{{info.close_time.slice(-8)}}自动取消</view>
		</view>
		
		<!-- 子订单里info.order_child[0].goods_genre：景点ticket、酒店hotel、美食food、邮寄自提pgoods、 -->
		
		<!-- 景点订单 -->
		<view v-if="info.order_child[0].goods_genre == 'ticket'">
			<!-- 景点详情 -->
			<view class="scenic-detail">
				<view>
					<view class="scenic-title">
						{{info.order_child[0].goods_title}}
						<image src="https://static.ticket.sz-trip.com/yandu/images/order/rightIcon.png"></image>
					</view>
					<view class="scenic-subtitle">
						出行时间：<span>{{info.order_child[0].use_date}}</span>
					</view>
					<view class="scenic-subtitle" v-if="info.order_child[0].scenic_data.open_description">
						开放时间：<span>{{info.order_child[0].scenic_data.open_description}}</span>
					</view>
				</view>
				
				<!-- 子订单规格 -->
				<view>
					<view v-for="(item,index) in info.order_child" :key="index" class="specifications-item flex-between">
						<view>{{item.specifications_name}}</view>
						<view class="flex-between" style="width: 150rpx;">
							<view>￥{{item.pay_money / 100}}</view>
							<view>x{{item.num}}</view>
						</view>
					</view>
				</view>
				
				<!-- 商品价格 -->
				<view class="public-price">
					<view class="flex-between">
						商品总额：<span>￥{{info.money / 100}}</span>
					</view>
					<view class="flex-between" v-if="info.discounts">
						优惠券：<span>-￥{{info.discounts / 100}}</span>
					</view>
					<view class="flex-between">
						实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span>
					</view>
				</view>
			</view>
			
			<!-- 出行人 -->
			<view class="novice-box">
				出行人
				<view v-for="(item,index) in info.order_child" :key="index" class="novice-item">
					<view class="novice-title">{{item.specifications_name}}</view>
					<view class="novice-subtitle">
						<span>姓名：</span>{{item.contact_name}}
					</view>
					<view class="novice-subtitle">
						<span>身份证：</span>{{item.id_number}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 邮寄、自提订单 -->
		<view v-if="info.order_child[0].goods_genre == 'pgoods'">
			<view class="shipping-address" v-if="info.order_child[0].consignee_id">
				收货地址
				<view>{{info.order_child[0].consignee.name}}  {{info.order_child[0].consignee.tel}}</view>
				<view class="text-overflowRows">{{info.order_child[0].consignee.address}}</view>
			</view>
			
			<!-- 产品详情 -->
			<view class="pgoods-detail" :style="{marginTop: info.order_child[0].consignee_id ? '20rpx' : '-66rpx'}">
				商家名称
				<view class="pgoods-product" v-for="(item,index) in info.order_child" :key="index">
					<image :src="showImg(item.specifications_image)" mode="aspectFill" class="product-img"></image>
					<view class="product-content flex-column">
						<view class="product-title">{{item.goods_title}}</view>
						<view class="product-subtitle flex-between">
							{{item.specifications_name}}
							<span>x{{item.num}}</span>
						</view>
					</view>
				</view>
				
				<!-- 商品价格 -->
				<view class="public-price">
					<view class="flex-between">
						商品总额：<span>￥{{info.money / 100}}</span>
					</view>
					<view class="flex-between" v-if="info.discounts">
						优惠券：<span>-￥{{info.discounts / 100}}</span>
					</view>
					<view class="flex-between">
						实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span>
					</view>
				</view>
			</view>
			
			<!-- 自提信息 -->
			<view class="pickup-box" v-if="info.order_child[0].contact_id && info.order_child[0].extract_id">
				自提信息
				<view class="pickup-user">
					<image src="https://static.ticket.sz-trip.com/yandu/images/order/user.png" class="picker-userImg"></image>
					<view>{{info.order_child[0].contact.name}}</view>
					<view>{{info.order_child[0].contact.tel}}</view>
				</view>
				<view class="pickup-address">
					<image></image>
				</view>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info">
			订单信息
			<view class="order-subtitle" style="display: flex;align-items: center;">
				<span>订单账号：</span>{{info.order_id}}
				<view class="copy flex-around" @click="clickCopy">
					<image src="https://static.ticket.sz-trip.com/yandu/images/order/copy.png" class="copy-img"></image>
					复制
				</view>
			</view>
			<view class="order-subtitle">
				<span>下单时间：</span>{{info.create_time}}
			</view>
			<view class="order-subtitle" v-if="info.pay_time">
				<span>支付时间：</span>{{info.pay_time}}
			</view>
		</view>
		
		<!-- 联系客服 -->
		<view class="kefu-box" @click="clickPhone('110')">
			<image src="https://static.ticket.sz-trip.com/yandu/images/order/kefu.png" mode="" class="kefu-img"></image>
			联系客服
		</view>
		
		<!-- 底部按钮 -->
		<footer>
			<view class="bottom-price" v-if="info.status == 'WAIT_PAYMENT'">
				合计：
				<span class="price">{{info.pay_money/100}}</span>
			</view>
			<view class="btn-box">
				<view class="btn" v-if="['PAYMENT_SUCCESSFULLY','WAIT_PAYMENT'].includes(info.status)" @click="closeOrder(info.order_id)">
					取消订单
				</view>
				
				<view class="btn" v-if="['WAIT_REFUND','REFUND_SUCCESS','WAIT_COMMENT','COMPLETE','CLOSED'].includes(info.status)" @click="gotoDetail">
					再次购买
				</view>
				
				<view class="btn pay-btn" v-if="info.status == 'WAIT_PAYMENT'" @click="setOrderId(info.order_id)">
					立即支付
				</view>
			</view>
		</footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				info: {},
				
			}
		},
		onLoad(option) {
			this.order_id = option.id
			this.getDetail()
		},
		onShow() {
			
		},
		methods: {
			// 获取订单详情
			getDetail() {
				this.Post({
					order_id: this.order_id
				},'/api/order/orderDetail').then(res => {
					this.info = res.data;
				})
			},
			// 复制订单号
			clickCopy() {
				uni.setClipboardData({
					data: this.info.order_id, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			// 再次购买：跳转产品详情
			gotoDetail() {
				
			},
			// 取消订单
			closeOrder(id, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否关闭订单？',
					success: successRes => {
						if (successRes.confirm) {
							that.Post({
								order_id: id
							},'/api/order/closeOrder').then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '关闭成功',
										icon: 'success'
									});
									that.getDetail();
								}
							});
						}
					}
				});
			},
			// 立即支付
			setOrderId(id) {
				let that = this;
				that.orderId = id;
				that.Post({
					order_id: id,
					type: "miniprogram",
					platform: 'miniprogram'
				},'/api/pay/unify').then(res => {
					if (res.data) {
						uni.requestPayment({
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success:()=>{
								that.getDetail();
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		overflow-x: hidden;
		min-height: 100vh;
		background-color: #F7F7F7;
		padding-bottom: 200rpx;
	}
	
	.title-box {
		position: absolute;
		left: 5rpx;
		top: 101rpx;
		font-size: 40rpx;
		padding: 0 26.67rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;
		
		view {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			margin-left: 245rpx;
		}
	}
	
	.top-box {
		width: 750rpx;
		height: 414rpx;
		background: linear-gradient(180deg, #DDF2E2, #DDF2E2, #DDF2E2, #DDF2E2, #DDF2E2, #F7F7F7);
		padding: 200rpx 0 0 50rpx;
		font-weight: bold;
		font-size: 43rpx;
		color: #000000;
		
		.close-time {
			font-weight: 400;
			font-size: 27rpx;
			margin-top: 20rpx;
		}
	}
	
	// 景点订单详情
	.scenic-detail {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		margin: -66rpx auto 0;
		
		&>view:nth-child(2) {
			margin: 30rpx 0;
			border-top: 1rpx solid #D8D8D8;
			border-bottom: 1rpx solid #D8D8D8;
		}
		
		.scenic-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			
			image {
				width: 17.33rpx;
				height: 29.33rpx;
				margin-left: 20rpx;
				vertical-align: middle;
			}
		}
		
		.scenic-subtitle {
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
			margin-top: 20rpx;
			
			span {
				color: #000;
			}
		}
		
		.specifications-item {
			font-weight: 500;
			font-size: 27rpx;
			color: #000000;
			margin: 25rpx 0;
		}
	}
	
	.novice-box {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #010101;
		margin: 20rpx auto;
		
		.novice-item {
			view {
				margin: 20rpx 0;
			}
			
			.novice-title {
				font-weight: 800;
				font-size: 27rpx;
				color: #333333;
			}
			
			.novice-subtitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
				
				span {
					display: inline-block;
					width: 130rpx;
					color: #666666;
				}
			}
		}
		.novice-item:nth-child(n+2) {
			border-top: 1rpx solid #D8D8D8;
		}
	}
	
	// 邮寄订单详情
	.shipping-address {
		width: 697rpx;
		height: 235rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		margin: -66rpx auto 0;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		
		&>view {
			margin-top: 25rpx;
			font-weight: 500;
		}
		
		&>view:first-child {
			font-size: 31rpx;
			color: #222222;
		}
		
		&>view:last-child {
			font-size: 31rpx;
			color: #222222;
			font-size: 27rpx;
			color: #666666;
		}
	}
	
	.pgoods-detail {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		margin: 20rpx auto;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		
		.pgoods-product {
			display: flex;
			margin-top: 24rpx;
			padding-bottom: 33rpx;
			border-bottom: 1rpx solid #D8D8D8;
			
			.product-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 13rpx;
			}
			
			.product-content {
				width: 485rpx;
				height: 140rpx;
				margin-left: 18rpx;
				padding: 5rpx 0 12rpx;
				justify-content: space-between;
				
				.product-title {
					font-weight: bold;
					font-size: 27rpx;
					color: #000000;
				}
				
				.product-subtitle {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}
	
	// 自提点信息
	.pickup-box {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 33rpx 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		
		&>view {
			margin-top: 40rpx;
		}
		
		.pickup-user {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			
			.picker-userImg {
				width: 33.33rpx;
				height: 33.33rpx;
			}
			
			&>view:first-of-type {
				margin: 0 63rpx 0 19rpx;
			}
		}
		
		.pickup-address {
			display: flex;
			
			.pickup-addressImg {
				width: 33.33rpx;
				height: 33.33rpx;
			}
			
			&>view:first-of-type {
				width: 305rpx;
				margin-left: 18rpx;
			}
			
			.picker-shopName {
				font-weight: bold;
				font-size: 31rpx;
				color: #222222;
			}
			
			.picker-shopAddress {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				margin-top: 15rpx;
			}
			
			.pickup-icon {
				margin-left: auto;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				
				&>view {
					text-align: center;
				}
				&>view:last-child {
					margin-left: 40rpx;
				}
				
				image {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 5rpx;
				}
			}
		}
	}
	
	// 商品价格
	.public-price {
		
		view {
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
			margin-top: 25rpx;
			
			span {
				font-weight: bold;
				font-size: 27rpx;
				color: #111111;
			}
		}
	}
	
	// 订单信息
	.order-info {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 33rpx 26rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		
		.order-subtitle {
			font-weight: 500;
			font-size: 27rpx;
			color: #000;
			margin: 30rpx 0;
			
			span {
				display: inline-block;
				width: 130rpx;
				color: #666666;
			}
		}
		
		.copy {
			width: 93rpx;
			height: 37rpx;
			border-radius: 11rpx;
			border: 1rpx solid #71B580;
			font-weight: 500;
			font-size: 22rpx;
			color: #71B580;
			margin-left: 30rpx;
			
			.copy-img {
				width: 22rpx;
				height: 23.33rpx;
			}
		}
	}
	
	// 客服
	.kefu-box {
		width: 697rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
		padding-left: 27rpx;
		
		.kefu-img {
			width: 44rpx;
			height: 44rpx;
			margin-right: 14rpx;
		}
	}
	
	// 底部按钮
	footer {
		width: 750rpx;
		height: 167rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-top: 10rpx solid #F7F7F7;
		padding: 0 26rpx;
		
		.bottom-price {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			
			span {
				font-weight: bold;
				font-size: 48rpx;
				color: #EE3E3B;
			}
			span::before {
				content: '￥';
				font-size: 27rpx;
			}
		}
		.btn-box {
			margin-left: auto;
			display: flex;
			
			.btn {
				width: 213rpx;
				line-height: 71rpx;
				border-radius: 37rpx;
				border: 1rpx solid #999999;
				text-align: center;
				margin-right: 14rpx;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
			}
			.btn:last-of-type {
				margin-right: 0;
			}
			
			.pay-btn {
				height: 73rpx;
				background: linear-gradient(270deg, #FD6F34, #F4A61F);
				border: none;
				color: #FFFFFF;
			}
		}
	}
</style>