<style>
	.orderDetail {
		background-color: #FAF8F9;
	}

	.orderDetail .orderItem {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 0 15px;
	}

	.orderDetail .orderDay {
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
	}

	.orderDetail .order_big {
		font-size: 14px;
		color: #08090E;
		font-weight: bold;
	}

	.orderDetail .order_mini {
		font-size: 11px;
		color: #919191;
		margin-top: 10px;
	}

	.orderDetail .orderCar {
		display: flex;
		justify-content: space-between;
		padding: 30px 0;
	}

	.orderDetail .order_carImg image {
		width: 200rpx;
		height: 200rpx;
	}

	.orderDetail .order_small {
		font-size: 14px;
		color: #919191;
	}

	.orderDetail .order_GName {
		width: 100%;
		height: 50px;
		border-top: 1px solid #e2e2e2;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.orderDetail .order_dList {
		border-bottom: 1px solid #e2e2e2;
		padding: 20px 0;
	}

	.order_dList:last-child {
		border-bottom: 0;
	}

	.orderDetail .order_comLeft {
		margin-left: 70px;
	}

	.orderDetail .order_Tprice {
		display: flex;
		justify-content: space-between;
	}

	.order_redPrice {
		color: #F20707;
		font-size: 14px;
	}

	.orderDetail .order_BtnList {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order_Apply,
	.order_Sure {
		width: 50%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60px;
	}

	.orderDetail .order_ImgS {
		width: 17px;
		height: 17px;
		margin-right: 5px;
	}

	.orderDetail .order_Line {
		width: 1px;
		height: 40px;
		background-color: #e2e2e2;
	}
	.orderDetail .order_nonBtm{
		border-bottom: 0!important;
	}
</style>
<template>
	<view class="orderDetail" style="height:100vh;">
		<view class="orderItem">
			<view class="orderDay">
				<view>
					<template v-if="dataList.DetailList&&dataList.DetailList.length>0">
						<view class="order_big">{{getStart(dataList.DetailList[0].TripSTime)}}</view>
						<view class="order_mini">{{getWeek(dataList.DetailList[0].TripSTime)}}</view>
					</template>
				</view>
				<view style="text-align: center;margin-top:8px;">
					<view style="font-size:13px;color:#1B1D1E;" v-if="dataList.DetailList&&dataList.DetailList.length>0">{{getDays()}}</view>
					<view style="position: relative;top:-8px;">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/dir_arrow.png" mode="aspectFill" style="width: 55px;height: 4px;"></image>
					</view>
				</view>
				<view>
					<template v-if="dataList.DetailList&&dataList.DetailList.length>0">
						<view class="order_big">{{getStart(dataList.DetailList[0].TripETime)}}</view>
						<view class="order_mini">{{getWeek(dataList.DetailList[0].TripETime)}}</view>
					</template>
				</view>
			</view>
			<view class="orderCar">
				<view class="order_carImg">
					<image mode="aspectFit" :src="dataList.DetailList[0].CoverImagePath" />
					</image>
				</view>
				<view style="width:55%">
					<view class="order_big">{{dataList.DetailList[0].CarName}}</view>
					<view class="order_small" style="margin-top:5px;">
						{{dataList.DetailList[0].GoodsName}}
					</view>
				</view>
				<view style="text-align: right;">
					<view class="order_big">¥ {{getPrice()}}</view>
					<view style="color:#727272;font-size:13px;">×{{dataList.DetailList[0].Number}}</view>
				</view>
			</view>
			<view class="order_GName">
				<view class="order_small order_comLeft">匹配导游</view>
				<view style="display: flex;align-items: center;">
					<u-avatar mode="circle" :src="dataList.DetailList[0].GuidePhoto" size="60"></u-avatar>
					<text class="order_big" style="margin-left:5px;">{{dataList.DetailList[0].GuideName}}</text>
				</view>
			</view>
		</view>
		<view class="orderItem">
			<view class="order_dList">
				<text class="order_small order_comLeft">订单编号:</text>
				<text class="order_big" style="margin-left:20px;">{{dataList.OrderNo}}</text>
			</view>
			<view class="order_dList">
				<text class="order_small order_comLeft">下单时间:</text>
				<text class="order_big" style="margin-left:20px;">{{dataList.CreateDate}}</text>
			</view>
			<view class="order_dList">
				<text class="order_small order_comLeft">支付方式:</text>
				<text class="order_big" style="margin-left:20px;">{{dataList.PaymentWayName}}</text>
			</view>
		</view>
		<view class="orderItem" style="margin-bottom:0;">
			<view class="order_dList order_Tprice">
				<text class="order_small order_comLeft">商品总额</text>
				<text class="order_big">¥ {{dataList.Income}}</text>
			</view>
			<view class="order_dList order_Tprice">
				<text class="order_small order_comLeft">优惠</text>
				<text class="order_big">¥ {{dataList.CouponMoney}}</text>
			</view>
			<view class="order_dList" style="text-align: right" :class="{'order_nonBtm':dataList.OrderStatus!=3}">
				<text class="order_big">实付款：</text>
				<text class="order_redPrice">¥ {{dataList.Income}}</text>
			</view>
			<view class="order_BtnList">
				<view class="order_Apply" @click="openAfterHandler" v-if="dataList.OrderStatus == '3'&& dataList.PresentFXGrade!=1">
					<image class="order_ImgS" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_apply.png"></image>申请售后
				</view>
				<view class="order_Line" v-if="dataList.OrderStatus == '3'"></view>
				<view class="order_Sure" @click="shouhuoHandler" v-if="dataList.OrderStatus == '3'">
					<image class="order_ImgS" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/o_shouhuo.png"></image>确认收货
				</view>
			</view>
		</view>
		<after-sale :list="dataList.DetailList" v-if="showAfter" @close="closeAfterHandler"></after-sale>
		<u-modal v-model="showReviceModal" content="是否确认收货？" :show-cancel-button="true" :show-title="false" @confirm="submitReviceGoodHandler"
		 :border-radius="20"></u-modal>
	</view>
</template>

<script>
	import afterSale from "@/components/userorder/after-sale";
	export default {
		components: {
			afterSale
		},
		data() {
			return {
				pageTitle: '订单详情',
				mainColor: '',
				msg: {
					OrderId: 0,
					NewUserId: 0
				},
				dataList: {},
				showAfter: false,
				showReviceModal: false,
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad(option) {
			this.u = uni.getStorageSync("mall_UserInfo");
			this.msg.OrderId = option.OrderId;
			this.getData();
		},
		methods: {
			//获取数据
			getData() {
				this.request2({
						url: "/api/AppletGCOrder/GetAppletGuidecarOrderOrderInfo",
						data: this.msg,
					},
					(res) => {
						if (res.resultCode == 1) {
							this.dataList = res.data;
						}
					}
				);
			},
			//获取价格
			getPrice() {
				if (this.dataList.DetailList && this.dataList.DetailList.length > 0) {
					var price = 0;
					var p1 = this.dataList.DetailList[0].Final_Price;
					var number = this.dataList.DetailList[0].Number;
					price = p1 / number;
					return price;
				}
			},
			//获取日期
			getStart(data) {
				if (data) {
					var data = data;
					var year = data.split(' ')[0];
					var days = year.split('-');
					return days[1] + '月' + days[2] + '日';
				}
			},
			//获取周几
			getWeek(data) {
				if (data) {
					var data = data;
					var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
					var year = data.split(' ')[0];
					var b = new Date(Date.parse(year.replace(/\-/g, "/")));
					var days = b.getDay();
					var days = weekArray[days];
					var time = data.split(' ')[1];
					var time2 = time.split(':');
					return '周' + days + ' ' + time2[0] + ':' + time2[1];
				}
			},
			//计算天数
			getDays() {
				let startTime = new Date(this.dataList.DetailList[0].TripSTime);
				let endTime = new Date(this.dataList.DetailList[0].TripETime);

				let usedTime = endTime - startTime; // 相差的毫秒数
				let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
				let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
				let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
				let Str = '';
				if (days > 0) {
					if (leavel > 0) {
						Str = days + 1 + ' ' + '天'
					} else {
						Str = days + ' ' + '天'
					}
				} else {
					if (hours >= 6) {
						Str = 1 + ' ' + '天'
					} else {
						Str = '半天'
					}
				}
				return Str;
			},
			//申请售后
			openAfterHandler() {
				this.showAfter = true;
			},
			closeAfterHandler() {
				this.showAfter = false;
			},
			//确认收货
			shouhuoHandler() {
				this.showReviceModal = true;
			},
			submitReviceGoodHandler() {
				let that = this
				that.request2({
						url: '/api/AppletOrder/SetAppletOrderGoodsReceiving',
						data: {
							OrderId: that.dataList.OrderId
						}
					},
					(res) => {
						uni.showToast({
							title: res.message
						})
						that.getData()
					}
				);
			}
		}
	}
</script>
