<template>
	<view class="bg">
		<view class="title-box">
			<uni-icons type="left" size="30" @click="goBack"></uni-icons>
			<view>订单状态</view>
		</view>

		<view class="state-box">
			<view>{{info.state_text}}</view>

			<!-- 待支付时会显示自动取消时间 -->
			<view v-if="info.state=='UNPAID'" class="close-time">
				订单将在<span>{{info.close_time.slice(-8)}}</span>自动取消</view>

			<!-- 待退款 -->
			<view v-if="info.state=='REFUNDING' || info.state=='WAIT_REFUND'" class="close-time">系统将在1-7个工作日内原路退回您的原支付账户</view>

			<!-- 退款完成 -->
			<view v-if="info.state=='REFUND'" class="close-time">您的退款金额已退还到您的原支付账户</view>
		</view>

		<view class="box">
			<!-- 循环子订单 -->
			<view v-for="(item,index) in orderChildList" :key="index">
				<!-- 核销码 景点、自提 -->
				<view class="" v-if="item.isQrcode && item.qrcode.length > 0 && item.product_model != 'line'">
					<view class="qrcode-remain">
						还剩<span>{{item.remainNum}}</span>张未核销
					</view>

					<swiper class="qrcode-box" :circular="false" previous-margin="100rpx" next-margin="100rpx"
						:duration="800" :current="item.current" @change="swiperChange($event,item)">
						<swiper-item v-for="(qrItem, qrIndex) in item.qrcode" :key="qrIndex" class="flex-center">
							<view class="qrcode-item flex-column">
								<view class="qrcode-title">{{item.sku_name}}</view>
								<image :src="qrItem.qrcodeimg" style="width: 300rpx;height: 300rpx;" mode="aspectFill">
								</image>
								<canvas :id="'qrcodeT'+qrItem.use_code+qrIndex"
									:canvas-id="'qrcodeT'+qrItem.use_code+qrIndex"
									style="width:150px;height:150px;z-index: -20;bottom: -500px;position: absolute;"></canvas>
								<view class="qrcode-subtitle">
									核销码:{{qrItem.use_code}}</view>

								<view class="complete-text flex-center" v-if="qrItem.state > 0">
									<view class="flex-center" v-if="qrItem.state == 1">
										已核销
									</view>
									<view class="flex-center" v-else>
										已失效
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>

					<!-- 指示点 -->
					<view class="swiper-point flex-center">
						<view v-for="(qrItem,qrIndex) in item.qrcode" :key="qrIndex"
							:class="[{'swiper-points': qrIndex == item.current}]"></view>
					</view>

					<!-- 提示语 -->
					<view class="swiper-prompt">左右滑动核销其他二维码</view>
				</view>

				<!-- 景点商品详情 -->
				<view class="product-box" v-if="item.product_model == 'ticket'">
					<view class="title" @click="item.type=item.product_model;gotoDetailByType(item)">
						{{item.product_title}}
						<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/rightIcon.png"
							class="rightIcon"></image>
					</view>
					<view class="subtitle" v-if="item.use_date && item.is_package != 1"><span>出行时间：</span>{{item.use_date}}</view>
					<view class="subtitle" v-if="item.scene_detail.open_time">
						<span>开放时间：</span>{{item.scene_detail.open_time}}
					</view>
					<view class="lines"></view>
					<view class="skutitle flex-between">
						<view>{{item.sku_name}}</view>
						<view>
							<span>￥{{item.product_price / 100}}</span>
							x{{item.product_num}}
						</view>
					</view>
					
					<view class="childStatus">{{item.state_text}}</view>
					
					<!-- 景点出行人 -->
					<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'ticket' && item.phone">
						<view class="title">出行人</view>
						<view class="subtitle">
							<span>手机号：</span>{{item.phone}}
						</view>
					</view>
				
					<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
						<view class="com-comment-btn">去评价</view>
					</view>
				</view>

				<!-- 邮寄、自提商品详情 -->
				<view class="product-box" v-if="item.product_model == 'post'&&item.is_bsamecity!=1">
					<view class="good-box">
						<image :src="item.product_img" mode="aspectFill"
							@click="item.type=item.product_model;gotoDetailByType(item)"></image>
						<view class="flex-column">
							<span class="good-title text-overflowRows">{{item.product_title}}</span>
							<span class="good-subtitle">{{item.sku_name}}</span>
						</view>
						<view class="flex-column">
							<span class="good-title">￥{{item.product_price / 100}}</span>
							<span class="good-subtitle">x{{item.product_num}}</span>
						</view>
					</view>
					
					<view class="childStatus">{{item.state_text}}</view>
					
					<!-- 收货地址 -->
					<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'post' && !Array.isArray(item.consignee_info)">
						<view class="title">收货信息</view>
						<view class="subtitle" style="font-weight: bold;font-size: 31rpx;">{{item.consignee_info.name}}
							{{item.consignee_info.tel}}
						</view>
						<view class="subtitle"><span>{{item.consignee_info.address}}</span></view>
						
						<view class="flex-between" style="justify-content: flex-end;padding-top: 20rpx;">
							<view class="mask-btn" style="margin: 0 20rpx 0 0;" @click="openMask(item)" v-if="item.state == 'WAIT_DELIVERY'">快递查询</view>
							<view class="mask-btn" style="margin: 0 20rpx 0 0;" @click="confirmDelivery(item)" v-if="item.state == 'WAIT_DELIVERY'">确认收货</view>
						</view>
					</view>
					
					<!-- 自提信息 -->
					<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'post' && item.pickup_shop_id > 0">
						<view class="title">自提信息</view>
						<view class="pick-box flex-between">
							<view class="pick-title">
								<view style="display: flex;align-items: center;">
									<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/location.png"
										mode=""></image>
									{{item.pickup_shop_info.title}}
								</view>
								<view class="pick-subtitle" style="padding: 20rpx 0 0 50rpx;">
									{{item.pickup_shop_info.address}}
								</view>
							</view>
							<view class="pick-subtitle flex-center">
								<view v-if="item.pickup_shop_info.tel" @click="clickPhone(item.pickup_shop_info.tel)">
									<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/phone.png"
										mode=""></image>
									电话
								</view>
								<view style="margin-left: 35rpx;"
									v-if="item.pickup_shop_info.lon && item.pickup_shop_info.lat"
									@click="openLocation(item.pickup_shop_info.lat,item.pickup_shop_info.lon)">
									<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/navigation.png"
										mode=""></image>
									导航
								</view>
							</view>
						</view>
					</view>
					
					<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
						<view class="com-comment-btn">去评价</view>
					</view>
				</view>
				
				<!-- 酒店信息 -->
				<view class="product-box" v-if="item.product_model == 'hotel'">
					<view class="title">入住信息</view>
					<view class="hotel-title">
						{{item.product_title}}
					</view>
					<view class="order-time flex-between" style="padding-right: 30rpx;">
						<view class="time">
							<view style="font-size: 35rpx;font-weight: bold;">
								{{new Date(item.order_product_extend.start_date).Format('MM-dd')}}
							</view>
							<view style="padding:0 14rpx">
								{{ ShowDateDay(new Date(item.order_product_extend.start_date).getDay()) }}
							</view>
							<view style="color: #999999;">入住</view>
						</view>
						<view class="cal-day">
							共{{calDate(item.order_product_extend.start_date,item.order_product_extend.end_date)}}晚
						</view>
						<view class="time">
							<view style="font-size: 35rpx;font-weight: bold;">
								{{new Date(item.order_product_extend.end_date).Format('MM-dd')}}
							</view>
							<view style="padding:0 14rpx">
								{{ShowDateDay(new Date(item.order_product_extend.end_date).getDay()) }}
							</view>
							<view style="color: #999999;">离店</view>
						</view>
					</view>

					<view class="flex-between">
						<view class="address-container flex  flex-shrink-0 flex-between" @click="goMap(item)">
							<view class="address-title text-overflowRows">
								{{item.scene_detail.address}}
							</view>
							<view class="flex-column flex-center">
								<image
									src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/location.png">
									<view class="tip" style="padding-top: 11rpx;">地图</view>
							</view>
						</view>
						<view class="phone-container flex-column flex-center" @click="callPhone(item.scene_detail.tel)">
							<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/phone.png">
								<view class="tip" style="padding-top: 11rpx;">电话</view>
						</view>
					</view>

					<view class="skutitle flex-between"
						style="padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;margin-top: 30rpx;">
						<view>{{item.sku_name}}</view>
						<view>
							<span>￥{{item.product_price / 100}}</span>
							x{{item.product_num}}
						</view>
					</view>
					
					<view class="childStatus">{{item.state_text}}</view>
					
					<!-- 酒店预订信息 -->
					<view style="margin-top: 30rpx;padding-top: 30rpx;border-top: 1rpx solid #D8D8D8;" v-if="item.product_model == 'hotel'">
						<view class="title">预订信息</view>
						<view class="subtitle">
							<span>房间数：</span>{{item.product_num}}
						</view>
						<view class="subtitle">
							<span>入住姓名：</span>{{item.order_product_extend.customer_name}}
						</view>
						<view class="subtitle">
							<span>联系电话：</span>{{item.order_product_extend.reserve_mobile}}
						</view>
					</view>
				</view>
			
			<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
				<view class="com-comment-btn">去评价</view>
			</view>
				
			</view>
			
			
			<!-- 配送产品 -->
			<view class="product-box" v-if="deliveryList.length>0">
				<!-- 地址 -->
				<view style="padding-bottom: 30rpx;margin-bottom: 30rpx;border-bottom: 1px solid #D8D8D8;" v-if="deliveryInfo">
					<view class="title">{{deliveryInfo.consignee_info.name}}
						{{deliveryInfo.consignee_info.tel}}
					</view>
					<view class="subtitle"><span>{{deliveryInfo.consignee_info.address}}</span></view>
				</view>
				
				<view class="delivery" v-for="(shop,i) in deliveryList" :key="i">
					<view style="font-weight: bold;font-size: 31rpx;margin-bottom: 20rpx;">{{shop.shop_name}}</view>
					<view class="good-box" style="margin-bottom: 20rpx;" v-for="(item,itemI) in shop.goods" :key="itemI">
						<image :src="item.product_img" mode="aspectFill"
							@click="item.type=item.product_model;gotoDetailByType(item)"></image>
						<view class="flex-column">
							<span class="good-title text-overflowRows">{{item.product_title}}</span>
							<span class="good-subtitle">{{item.sku_name}}</span>
						</view>
						<view class="flex-column">
							<span class="good-title">￥{{item.product_price / 100}}</span>
							<span class="good-subtitle">x{{item.product_num}}</span>
						</view>
					</view>
					
					<view class="childStatus" v-if="shop.goods[0].bsamecity_status">
						{{deliveryInfoStatus[shop.goods[0].bsamecity_status]||''}}
						<text v-if="shop.goods[0].bsamecity_expect_finish_time">(预计{{new Date(shop.goods[0].bsamecity_expect_finish_time).Format("hh:mm")}}送达)</text>
					</view>
					<!-- <view class="mask-btn" @click="openMask(item)">联系骑手</view> -->
				
				</view>
			</view>
			
			
			
			<!-- 线路下单 -->
			<view v-if="info.order_product_list && info.order_product_list[0].product_model == 'line'">
				<view class="" v-if="lineQrcodeList && lineQrcodeList.length > 0">
					<view class="qrcode-remain">
						还剩<span>{{lineNum}}</span>张未核销
					</view>
				
					<swiper class="qrcode-box" :circular="false" previous-margin="100rpx" next-margin="100rpx"
						:duration="800" :current="current" @change="swiperChanges">
						<swiper-item v-for="(qrItem, qrIndex) in lineQrcodeList" :key="qrIndex" class="flex-center">
							<view class="qrcode-item flex-column">
								<view class="qrcode-title">{{qrItem.sku_name}}</view>
								<image :src="qrItem.qrcodeimg" style="width: 300rpx;height: 300rpx;" mode="aspectFill">
								</image>
								<canvas :id="'qrcodeT'+qrItem.use_code+qrIndex"
									:canvas-id="'qrcodeT'+qrItem.use_code+qrIndex"
									style="width:150px;height:150px;z-index: -20;bottom: -500px;position: absolute;"></canvas>
								<view class="qrcode-subtitle">
									核销码:{{qrItem.use_code}}</view>
				
								<view class="complete-text flex-center" v-if="qrItem.state > 0">
									<view class="flex-center" v-if="qrItem.state == 1">
										已核销
									</view>
									<view class="flex-center" v-else>
										已失效
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				
					<!-- 指示点 -->
					<view class="swiper-point flex-center">
						<view v-for="(qrItem,qrIndex) in item.qrcode" :key="qrIndex"
							:class="[{'swiper-points': qrIndex == item.current}]"></view>
					</view>
				
					<!-- 提示语 -->
					<view class="swiper-prompt">左右滑动核销其他二维码</view>
				</view>
				<!-- 线路下单多个规格、多个子订单 -->
				<view>
					<view class="product-box">
						<view class="title" @click="info.order_product_list[0].type=info.order_product_list[0].product_model;gotoDetailByType(info.order_product_list[0])">
							{{info.order_product_list[0].product_title}}
							<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/rightIcon.png"
								class="rightIcon"></image>
						</view>
						<view class="subtitle" v-if="info.order_product_list[0].use_date">
							<span>出行时间：</span>{{info.order_product_list[0].use_date}}
						</view>
						
						<!-- 规格信息 -->
						<view style="margin-top: 30rpx;border-top: 1rpx solid #D8D8D8;">
							<view class="skutitle flex-between" v-for="(item,index) in info.order_product_list" :key="index" style="margin-top: 20rpx;">
								<view>{{item.sku_name}}</view>
								<view>
									<span>￥{{item.product_price / 100}}</span>
									x{{item.product_num}}
								</view>
							</view>
						</view>
					</view>
					<!-- 线路出行人信息 -->
					<view class="product-box">
						<view class="title">出行人</view>
						<view v-for="(item,index) in info.order_product_list" :key="index" style="margin-top: 25rpx;padding-top: 25rpx;border-top: 1rpx solid #D8D8D8;">
							出行人{{index + 1}}
							<view class="subtitle">
								<span>姓名：</span>{{item.contacts_info[0].name}}
							</view>
							<view class="subtitle">
								<span>{{item.contacts_info[0].title}}：</span>{{item.contacts_info[0].id_number}}
							</view>
						</view>
					</view>
					
					<view class="com-comment-box" v-if="item.state=='WAIT_COMMENT' && info.order_product_list.length>1">
						<view class="com-comment-btn">去评价</view>
					</view>
				</view>
			</view>

			<view class="product-box">
				<view class="subtitle flex-between">
					<span>商品总额：</span>￥{{info.total_money / 100}}
				</view>
				<view class="subtitle flex-between" v-if="info.total_post_fee">
					<span>邮费：</span>￥{{info.total_post_fee / 100}}
				</view>
				<view class="subtitle flex-between" v-if="info.total_bsamecity_fee">
					<span>配送费：</span>￥{{info.total_bsamecity_fee / 100}}
				</view>
				<view class="subtitle flex-between">
					<span>优惠券：</span>-￥{{info.preference_money / 100}}
				</view>
				<view class="subtitle flex-between" v-if="info.total_score_amount">
					<span>积分：</span>-{{info.total_score_amount}}</span>
				</view>
				
				<view class="subtitle flex-between">
					<span>实付金额：</span>
					<view class="price">{{info.paid_money / 100}}</view>
				</view>
			</view>

			<view class="product-box">
				<view class="title">订单信息</view>
				<view class="subtitle" style="display: flex;">
					<span>订单账号：</span>{{info.order_id}}
					<view class="copy flex-around" @click="clickCopy">
						<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/copy.png"></image>
						复制
					</view>
				</view>
				<view class="subtitle">
					<span>下单时间：</span>{{info.close_time}}
				</view>
			</view>

			<button id="contact" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
				<view class="kefu-box">
					<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/kefu.png"></image>
					联系客服
				</view>
			</button>
		</view>
		
		<!-- 底部按钮 -->
		<footer>
			<view class="bottom-price" v-if="info.state == 'UNPAID'">
				合计：
				<span class="price">{{info.paid_money/100}}</span>
			</view>
			<view class="btn-box">
				<view class="btn" v-if="['WAIT_POST','WAIT_USE','PAID'].includes(info.state)" @click="refund()">
					取消订单
				</view>
		
				<view class="btn" v-if="info.state === 'UNPAID'" @click="closeOrder()">
					关闭订单
				</view>
		
				<view class="btn pay-btn" v-if="info.state === 'UNPAID'" @click="setOrderId()">
					立即支付
				</view>
				
				<view class="btn" v-if="info.state=='WAIT_COMMENT'&& info&&info.order_product_list.length==1"
				 @click="goComment(info.order_product_list[0])">
					去评价
				</view>
		
				<!-- <view class="btn" v-if="info.state == 'POST' && info.order_child[0].goods_genre == 'pgoods'"
					@click="openMask()">
					快递查询
				</view>
		
				<view class="btn" v-if="info.state == 'POST' && info.order_child[0].goods_genre == 'pgoods'"
					@click="confirmGoods()">
					确认收货
				</view> -->
			</view>
		</footer>
		
		<!-- 快递详情 -->
		<view class="mask" v-if="maskShow">
			<view class="mask-bg" @click="maskShow = false"></view>
			<view class="mask-content">
				<p class="mask-title">物流信息</p>
				<view class="iconfont" @click="maskShow = false">x</view>
				<view class="express-all">
					<view class="express-item" v-for="item,index in postInfo" :key="index">
						<view class="line" v-if="index != postInfo.length - 1"></view>
						<view class="express-item-icon" v-if="index!=0"></view>
						<view class="express-item-icon express-item-icons" v-else></view>
						<view :class="['express-info',index==0?'active':'']">
							<p>{{item.context}}</p>
							<p class="express-time">{{item.time}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QRCode from '@/static/js/weapp-qrcode.js'
	export default {
		data() {
			return {
				orderId: '',
				info: {},
				orderChildList: [],
				lineQrcodeList: [],
				deliveryList: [],
				deliveryInfo: null,
				deliveryInfoStatus:  {
				  0: '下单成功',
				  1: '待下单',
				  2: '非同城配送',
				  3: '待退款',
				  100: '骑手已接单',
				  210: '待取件',
				  230: '骑手已到店',
				  310: '骑手配送中',
				  510: '订单状态异常（非终态）',
				  515: '转单改派中',
				  520: '已完成（骑手已送达）',
				  710: '用户取消订单',
				  720: '订单取消'
				},
				lineNum: 0,
				current: 0,
				maskShow: false,
				postInfo: {},
				showReload: false,
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.getDetail()
		},
		onShow () {
			if (this.showReload) {
				this.getDetail()
				this.showReload = false;
			}
		},
		methods: {
			// 获取订单详情
			async getDetail() {
				try {
					const res = await this.Post({
						order_id: this.orderId
					}, '/api/order/query');
					this.info = res.data;
					this.orderChildList = res.data.order_product_list;
					this.processOrderData(this.orderChildList);
				} catch (error) {
					console.error('获取订单详情失败:', error);
				}
			},
			// 处理订单数据
			processOrderData(orderList) {
				let groups = {};
				orderList.forEach(item => {
					// 处理收货地址
					if (item.product_model === 'post' && item.consignee_info) {
						item.consignee_info = JSON.parse(item.consignee_info);
					}
					// 处理自提信息
					if (item.product_model === 'post' && item.pickup_shop_id > 0) {
						item.pickup_shop_info = JSON.parse(item.pickup_shop_info);
					}
					// 处理线路出行人信息
					if (item.product_model === 'line' && item.contacts_info) {
						item.contacts_info = JSON.parse(item.contacts_info);
					}
					// 处理配送数据 todo
					if (item.product_model == "post"&&item.is_bsamecity) {
						let shopInfo = {
							shop_id: item.order_product_key,
							shop_name: item.supplier_name,
							goods: item // 这里不用数组，下面可以直接push
						}
						if (groups[shopInfo.id]) {
							// 如果已存在，将data添加到数组中
							groups[shopInfo.id].goods.push(shopInfo.goods);
						} else {
							// 如果不存在，创建新的分组对象，并将data初始化为数组
							groups[shopInfo.id] = {
								...shopInfo,
								goods: [shopInfo.goods]
							};
						}
					}
					
					// 处理线路核销码
					if (item.product_model === 'line') {
						item.qrcode.forEach(qrItem => {
							qrItem.sku_name = item.sku_name;
						});
									
						this.lineQrcodeList = [...this.lineQrcodeList, ...item.qrcode];
						let lineNum = 0;
						if (this.lineQrcodeList.length > 0) {
							this.lineQrcodeList.forEach((qrItem, index) => {
								if (qrItem.state === 0) {
									lineNum += 1;
								}
								this.getCodeImg(qrItem, index);
							});
							this.lineNum = lineNum;
						}
					}
					// 判断是否展示核销码
					if (['ticket', 'post'].includes(item.product_model)) {
						item.isQrcode = true;
						if (item.product_model === 'post' && !item.pickup_shop_id) {
							item.isQrcode = false;
						}
						// 未核销数量
						item.remainNum = 0;
						// 轮播图滚动index
						item.current = 0;
						// 生成二维码
						item.qrcode.forEach((qrItem, qrIndex) => {
							if (qrItem.state === 0) {
								item.remainNum += 1;
							}
							this.getCodeImg(qrItem, qrIndex);
						});
					}
				});
				this.deliveryList = Object.values(groups);
				if (this.deliveryList.length>0 && this.deliveryList[0].goods[0]) {
					let goods0 = this.deliveryList[0].goods[0]
					this.deliveryInfo = this.deliveryList[0].goods[0]
				}
				console.log(this.deliveryList, this.deliveryInfo)
			},
			// 生成二维码
			getCodeImg(item, index) {
				new QRCode('qrcodeT' + item.use_code + index, {
					text: item.use_code,
					width: 150,
					height: 150,
					padding: 2,
					colorDark: 'rgb(0,0,0)',
					colorLight: 'rgb(255,255,255)',
					correctLevel: QRCode.CorrectLevel.M, // 二维码可辨识度
					callback: res => {
						this.$set(item, 'qrcodeimg', res.path);
						this.$forceUpdate();
					}
				});
			},
			//轮播图左右滑动
			swiperChange(e, item) {
				let {
					current,
					source
				} = e.detail;
				//在自动或手动的时候才赋予current值
				if (source === 'autoplay' || source === 'touch') {
					item.current = current;
				}
				this.$forceUpdate()
			},
			//线路轮播图左右滑动
			swiperChanges(e) {
				let {
					current,
					source
				} = e.detail;
				//在自动或手动的时候才赋予current值
				if (source === 'autoplay' || source === 'touch') {
					this.current = current;
				}
				this.$forceUpdate()
			},
			// 复制订单号
			clickCopy() {
				uni.setClipboardData({
					data: this.info.order_id, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			calDate(startDate, endDate) {
				var start = new Date(startDate);
				var end = new Date(endDate);
				var diff = end - start;
				var days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 计算天数差
				return days;
			},
			callPhone(tel) {
				let _this = this
				uni.showActionSheet({
					itemList: [tel, '呼叫'],
					success: function(res) {
						_this.clickPhone(tel)
					}
				});
			},
			goMap(item) {
				if (!item.scene_detail.lon && !item.scene_detail.lat) {
					uni.showToast({
						title: '暂未配置地理位置',
						icon: 'none'
					})
					return
				}
				debugger
				uni.openLocation({
					latitude: Number(item.scene_detail.lat),
					longitude: Number(item.scene_detail.lon),
					name: item.scene_detail.title,
					address: item.scene_detail.address,
					success: function() {
						console.log('success');
					}
				});
			},
			// 申请退款
			refund() {
			    uni.showModal({
			        title: '提示',
			        content: '是否申请退款？',
			        success: successRes => {
			            if (successRes.confirm) {
			                this.Post({ order_id: this.info.order_id }, '/api/order/refund')
			                   .then(res => {
			                        if (res.code === 1) {
			                            uni.showToast({ title: '申请成功', icon: 'success' });
			                            this.getDetail();
			                        }
			                    });
			            }
			        }
			    });
			},
			// 关闭订单
			closeOrder(id, index) {
			    uni.showModal({
			        title: '提示',
			        content: '是否关闭订单？',
			        success: successRes => {
			            if (successRes.confirm) {
			                this.Post({ order_id: this.info.order_id }, '/api/order/close')
			                   .then(res => {
			                        if (res.code === 1) {
			                            uni.showToast({ title: '关闭成功', icon: 'success' });
			                            this.getDetail();
			                        }
			                    });
			            }
			        }
			    });
			},
			// 支付
			setOrderId(id) {
				// #ifdef MP-WEIXIN
			    this.Post({
			        order_id: this.info.order_id,
			        pay_platform: "MINI",
			        pay_method: 'WEIXIN',
			    }, '/api/order/pay')
			   .then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success: () => {
								this.getDetail();
							}
						});
					}
				});
				// #endif
												
				// #ifdef H5
				uni.navigateTo({
					url: "/subPackages/order/orderPay?orderId=" +this.info.order_id
				})
				// #endif
			},
			// 快递查询
			openMask(item) {
				this.Post({
					child_order_id: item.child_order_id
				}, '/api/order/getExpress').then(res => {
					if (res.data.length > 0) {
						this.postInfo = res.data.reverse()
						this.maskShow = true
					} else {
						uni.showToast({
							title: '暂未查询到物流信息，请联系客服',
							icon: 'none'
						});
					}
				})
			},
			
			confirmDelivery (item) {
				let _this = this
				this.Post({
					order_id: item.order_id,
				},"/api/order/confirm_post").then(function (res) {
					if (res) {
						_this.getDetail();
					}
				})
			},
			
			// 去评价
			goComment (item) {
				if (item) {
					uni.setStorageSync("commentProd", item)
					uni.navigateTo({
						url:`/subPackages/user/comment`
					})
					this.showReload = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		overflow-x: hidden;
		min-height: 100vh;
		background-color: #F7F7F7;
		padding-bottom: 200rpx;
	}

	.title-box {
		font-size: 40rpx;
		padding: 0 26.67rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 100%;
		background: #D3E8A7;
		height: 176rpx;
		padding: 90rpx 26rpx 0;

		view {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			margin-left: 230rpx;
		}
	}

	.state-box {
		width: 750rpx;
		height: 240rpx;
		background: linear-gradient(180deg, #D3E8A7, #D3E8A7, #D3E8A7, #F7F7F7);
		padding: 42rpx 0 0 53rpx;
		font-weight: bold;
		font-size: 43rpx;
		color: #000000;

		.close-time {
			font-weight: 500;
			font-size: 27rpx;
			color: #000000;
			margin-top: 10rpx;

			span {
				color: #C3282E;
			}
		}
	}

	.box {
		position: relative;
		padding: 0 26rpx;
		margin-top: -66rpx;

		.product-box {
			padding: 28rpx 28rpx 46rpx;
			margin-bottom: 22rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.title {
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
				display: flex;
				align-items: center;

				.rightIcon {
					width: 17.33rpx;
					height: 29.33rpx;
					margin-left: 25rpx;
				}
			}

			.subtitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
				margin-top: 18rpx;

				span {
					color: #666666;
					min-width: 125rpx;
				}
			}
			
			.mask-btn {
				width: fit-content;
				line-height: 53rpx;
				background: #F8F9FA;
				border-radius: 11rpx;
				border: 1px solid #999999;
				padding: 0 15rpx;
				margin: 10rpx 0 0 auto;
				flex-shrink: 0;
			}

			.lines {
				width: 643rpx;
				height: 1rpx;
				background: #D8D8D8;
				margin: 33rpx 0;
			}

			.skutitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;

				span {
					margin-right: 60rpx;
				}
			}

			.price {
				font-weight: bold;
				font-size: 34rpx;
				color: #C3282E;
			}

			.price::before {
				font-size: 24rpx;
				content: '￥';
			}

			.copy {
				width: 93rpx;
				height: 37rpx;
				border-radius: 11rpx;
				border: 1rpx solid #515150;
				font-weight: 500;
				font-size: 22rpx;
				color: #515150;
				margin-left: 30rpx;

				image {
					width: 22rpx;
					height: 23.33rpx;
				}
			}

			.pick-box {
				margin-top: 50rpx;

				.pick-title {
					font-weight: bold;
					font-size: 31rpx;
					color: #222222;
					width: 500rpx;

					image {
						width: 33.33rpx;
						height: 33.33rpx;
						margin-right: 18rpx;
					}
				}

				.pick-subtitle {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;

					image {
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 10rpx;
						display: block;
					}

					&>view {
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}
			}

			.hotel-title {
				font-weight: bold;
				font-size: 31rpx;
				color: #222222;
				margin-top: 30rpx;
			}

			.order-time {
				height: 107rpx;

				.time {
					display: flex;
					font-family: PingFang SC;
					font-size: 24rpx;
					color: #000000;
					align-items: center;
				}
			}

			.cal-day {
				background: #F2F2F2;
				border-radius: 17rpx;
				padding: 5rpx 16rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
			}

			.address-container {
				width: 525rpx;
				height: 107rpx;
				border-radius: 20rpx;
				padding: 25rpx 20rpx 25rpx 33rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
				background-color: #F2F2F2;
				background-image: url('https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/mapBg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				.tip {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}

				.address-title {
					width: 400rpx;
				}
			}

			.phone-container {
				width: 93rpx;
				height: 107rpx;
				background: #F2F2F2;
				border-radius: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				.tip {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

		.kefu-box {
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding-left: 27rpx;
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 31rpx;
			color: #000000;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 14rpx;
			}
		}

		.good-box {
			display: flex;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 13rpx;
			}

			&>view {
				height: 140rpx;
				justify-content: space-between;
				padding-bottom: 14rpx;
				margin-left: 18rpx;
				width: 371rpx;
			}

			&>view:last-child {
				margin-left: auto;
				width: fit-content;
				text-align: right;
			}

			.good-title {
				font-weight: bold;
				font-size: 27rpx;
				color: #000000;
			}

			.good-subtitle {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	button {
		padding: 0;
	}

	button::after {
		border: none;
		background-color: rgba(0, 0, 0, 0);
	}








	// 二维码
	.qrcode-remain {
		font-weight: bold;
		font-size: 29rpx;
		color: #000000;
		text-align: center;

		span {
			width: 60rpx;
			text-align: center;
			color: #C3282E;
			display: inline-block;
		}
	}

	.qrcode-box {
		height: 456rpx;
		display: flex;
		align-items: center;
		margin-top: 32rpx;

		.qrcode-item {
			width: 467rpx !important;
			height: 456rpx !important;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 33rpx 0rpx rgba(102, 102, 102, 0.2);
			border-radius: 20rpx;
			padding: 25rpx 0;
			justify-content: space-between;
			align-items: center;
			position: relative;

			image {
				width: 300rpx;
				height: 300rpx;
			}

			.qrcode-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}

			.qrcode-subtitle {
				font-weight: 500;
				font-size: 27rpx;
				color: #888888;
			}

			.complete-text {
				position: absolute;
				width: 300rpx;
				height: 300rpx;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background: rgba(0, 0, 0, .5);

				view {
					width: 200rpx;
					height: 200rpx;
					background: #FFFFFF;
					border-radius: 100rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}
			}
		}
	}

	.swiper-point {
		height: 63rpx;

		view {
			width: 11rpx;
			height: 11rpx;
			background: #D3E8A7;
			border-radius: 50%;
		}

		view:not(:first-child) {
			margin-left: 13rpx;
		}

		.swiper-points {
			background: #6A8A2D;
		}
	}

	.swiper-prompt {
		font-weight: 500;
		font-size: 29rpx;
		color: #C3282E;
		text-align: center;
		margin-bottom: 45rpx;
	}
	
	// 底部按钮
	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;
		box-sizing: border-box;
	
		.bottom-price {
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
	
			span {
				font-weight: bold;
				font-size: 40rpx;
				color: #DC2525;
			}
	
			span::before {
				content: '￥';
				font-size: 24rpx;
			}
		}
	
		.btn-box {
			margin-left: auto;
			display: flex;
	
			.btn {
				width: 213rpx;
				line-height: 71rpx;
				background: #F8F9FA;
				border-radius: 11rpx;
				border: 1rpx solid #999999;
				text-align: center;
				margin-right: 14rpx;
				font-weight: 500;
				font-size: 31rpx;
				color: #111111;
			}
	
			.btn:last-of-type {
				margin-right: 0;
			}
	
			.pay-btn {
				height: 73rpx;
				background: #6A8A2D;
				border: none;
				color: #FFFFFF;
			}
		}
	}
	
	// 快递查询
	.mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	
	.mask-bg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	.mask-content {
		width: 100%;
		padding: 28rpx 0;
		border-radius: 20rpx 20rpx 0 0;
		background: white;
		height: 70%;
		position: relative;
		overflow-y: auto;
	}
	
	.mask-content .icon-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	
	.mask-content .close-btn {
		background-image: url("https://static.ticket.sz-trip.com/taizhou/images/close.png");
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		bottom: -100rpx;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.mask-title {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 37rpx;
	}
	
	.mask-content .iconfont {
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	
	.express-all {
		margin: 40rpx;
		position: relative;
	}
	
	.express-item {
		display: flex;
		justify-content: space-between;
		padding-bottom: 60rpx;
		position: relative;
		z-index: 1;
	}
	
	.line {
		width: 1rpx;
		height: 100%;
		background: #CCCCCC;
		position: absolute;
		left: 13rpx;
	}
	
	.express-info {
		width: 600rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		color: #999;
	}
	
	.express-info.active {
		color: #000;
	}
	
	.express-time {
		font-size: 22rpx;
		color: #666;
		margin-top: 10rpx;
	}
	
	.express-item-icon {
		width: 27rpx;
		height: 27rpx;
		background: #CCCCCC;
		border-radius: 50%;
		position: relative;
	}
	
	.express-item-icons {
		background: #D3E8A7;
	}
	
	.childStatus {
		text-align: right;
		font-size: 27rpx;
		color: #6A8A27;
		margin-top: 10rpx;
	}

.com-comment-box{
	border-top: 1px solid #D8D8D8;
	margin-top: 30rpx;
	padding-top: 30rpx;
	display: flex;
	justify-content: flex-end;
}	
.com-comment-btn{
	width: 173rpx;
	height: 60rpx;
	background: #FFFFFF;
	border-radius: 11rpx;
	border: 1px solid #999999;
	line-height: 60rpx;
	text-align: center;
	font-weight: 500;
	font-size: 27rpx;
	color: #111111;
	
}
</style>