<template>
	<view class="backcor9 pd-main pdb50">
		<!-- 已送达 -->
		<view v-if="status == 1" class="order-de-title pd-main">
			<view class="font22 fcor333">
				已送达
			</view>
			<view class="font16 fcor666 mart10">
				感谢您的支持，如有问题可以联系我们
			</view>
		</view>
		
		<!-- 待支付 -->
		<view v-if="status == 0" class="order-de-title pd-main">
			<view class="font22 fcor333">
				待支付
			</view>
			<view class="font16 fcor666 mart10">
				<text class="fcorred paddtright10" >{{countdownm}}:{{countdowns}}</text>后订单自动取消
			</view>
		</view>
		
		<view v-if="status == 2" class="order-de-title pd-main">
			<view class="font22 fcor333">
				订单已取消
			</view>
			<view class="font16 fcor666 mart10">
				您的订单已取消
			</view>
		</view>
		
		
		<!-- 待支付时支持修改地址 -->
		<view v-if="status == 0" class="marb20 pd-main backcolorfff border-8r">
			<view class="flex-center-sp pd-tb10">
				<view class="">
					<view class="fontwig6 font18">金科才能收到你看得出纳思达</view>
					<view class="mart5 fcor666">利<text class="paddleft10">15652365478</text></view>	
				</view>
				<view class="align-fs edit-msg " @click="editOrder">
					修改
				</view>
			</view>
		</view>
		
		<view class="marb20 pd-main backcolorfff border-8r">
			<!-- 商品信息 -->
			<view v-for="(item,index) in [1,2,3]" :key="index" class="marb10 flex-center-sp">
				<view class="">
					<image class="st-img" :src="images[0]" mode="aspectFill"></image>
				</view>
				<view class="flex-1 flex-center-sp">
					<view class="width60 paddleft10">
						<view class="marb10">单只甜玉米 单只/250-300g</view>
						<view class="marb5">单价: ¥ 3.99/个</view>	
						<view class="fcor666">数量: 1个</view>
					</view>
					<view class="font16 tr align-fs">
						<view class="fontwig6">实付: ¥ 3.42</view>
						<view class="fcor666">¥ 3.99</view>
					</view>
				</view>
			</view>
			
			<!-- 当商品超过3个的时候 -->
			<view v-if="!moreThanThree" class="goodsMore flex-center" @click="checkMore">
				还有{{3}}种商品<text class="icon-ymt to-down"></text>
			</view>
			<block v-if="moreThanThree">
				<view  v-for="(item,index) in [1,2,3]" :key="index" class="marb10 flex-center-sp">
					<view class="">
					<image class="st-img" :src="images[0]" mode="aspectFill"></image>
					</view>
					<view class="flex-1 flex-center-sp">
					<view class="width60 paddleft10">
						<view class="marb10">单只甜玉米 单只/250-300g</view>
						<view class="marb5">单价: ¥ 3.99/个</view>	
						<view class="fcor666">数量: 1个</view>
					</view>
					<view class="font16 tr align-fs">
						<view class="fontwig6">实付: ¥ 3.42</view>
						<view class="fcor666">¥ 3.99</view>
					</view>
					</view>
				</view>
			</block>
			<view v-if="moreThanThree" class="goodsMore flex-center" @click="checkMore">
				共{{6}}种商品<text class="icon-ymt to-up"></text>
			</view>
			
			<!-- 商品金额 -->
			<view class="flex-center-sp pd-tb10">
				<view class="">商品金额</view>
				<view class="fontwig6"><text class="paddtright5">¥</text>69.89</view>
			</view>
			<!-- 优惠券 -->
			<view class="flex-center-sp pd-tb10">
				<view class="">优惠券</view>
				<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>10</view>
			</view>
			
			<!-- 运费 -->
			<view class="flex-center-sp pd-tb10">
				<view class="">运费
				<!-- <text class="icon-ymt question fcor666 font16 paddleft5"></text> -->
				</view>
				<view class="fontwig6">
					<text class="fcor666 td-lt">¥6</text>
					<text class="paddleft10"><text class="paddtright5">¥</text>0</text>
				</view>
			</view>
			
			<!-- 积分 -->
			<view class="flex-center-sp pd-tb10">
				<view class="">积分</view>
				<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>2</view>
			</view>
			<!--支付优惠 -->
			<view class="flex-center-sp pd-tb10">
				<view class="">支付优惠</view>
				<view class="fontwig6 fcorred">-<text class="paddtright5">¥</text>0.01</view>
			</view>
			<!-- 价格总额 -->
			<view class="tr fontwig6 pd-tb10">
				<text class="paddtright10">已优惠<text class="fcorred">¥ 12.01</text></text>
				<text>实付¥<text class="font20 paddleft5">58.88</text></text>
			</view>
			
			<!-- 待支付时开始 -->
			<!-- 订单编号 -->
			<block v-if="status == 0">
			<view class="flex-center-sp pd-tb10 bordert">
				<view class="fcor666">订单编号</view>
				<view class=" flex-center-sp">
					<text class="tr flex-1">1209 2418 0001 0039</text>
					<text class=" margle10 font12 copy-num fcor666" @click="copyText('1209 2418 0001 0039')">复制</text>
				</view>
			</view>
			<!-- 下单时间 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fcor666">下单时间</view>
				<view class=" ">
					2023-03-04 17:05:27
				</view>
			</view>
			<!-- 待支付时结束 -->
			</block>
		</view>
		
		<!-- 物流信息 -->
		<view  v-if="status == 1 ||status == 2" class=" pd-main backcolorfff border-8r">
			<!-- 预约时间 -->
			<!-- <view class="flex-center-sp pd-tb10">
				<view class="fcor666">预约时间</view>
				<view class=" ">尽快送达(预计18:10前)</view>
			</view> -->
			<!-- 收货信息 -->
			<view class="flex-center-sp pd-tb10">
				<view class="fcor666 align-fs">收货信息</view>
				<view class=" tr">
					<view class=" ">重庆市出厂时都曾经常吃的后面2楼</view>
					<view class=" ">陈女士 175896546526</view>
				</view>
			</view>
			<!-- 物流信息 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fcor666">物流信息</view>
				<view class=" " @click="checkWuliu">
					查看物流信息<text class="icon-ymt to-right fcor666 font16 paddleft5"></text>
				</view>
			</view>
			<!-- 订单编号 -->
			<view class="flex-center-sp pd-tb10 bordert">
				<view class="fcor666">订单编号</view>
				<view class=" flex-center-sp">
					<text class="tr flex-1">{{orderID}}</text>
					<text class=" margle10 font12 copy-num fcor666" 
					 @click="copyText(orderID)"
					>复制</text>
				</view>
			</view>
			<!-- 下单时间 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fcor666">下单时间</view>
				<view class=" ">
					2023-03-04 17:05:27
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="flex-center-sp pd-tb10 ">
				<view class="fcor666">支付方式</view>
				<view class=" ">
					微信支付
				</view>
			</view>
		</view>
	
	
		<!-- 待支付时底部的按钮 -->
		<view v-if="status == 0" class="toPay font14  backcolorfff">
			<view class="btn" @click="cancelOrder">取消订单</view>
			<view class="btn" @click="editOrder">修改订单</view>
			<view class="btn bgred" @click="payOrder">立即支付{{countdownm}}:{{countdowns}}</view>
		</view>
		<!-- 订单取消时 -->
		<view v-if="status == 2" class="toPay font14  backcolorfff">
			<view class="btn oneMore" @click="oneMoreOrder">再来一单</view>
			<view class="btn" @click="deleteOrder">删除订单</view>
			
		</view>
		
		<wuliuPopup ref="wuliu"></wuliuPopup>
	</view>
</template>

<script>
	import wuliuPopup from '@/components/wuliuPupup/wuliuPupup.vue'
	const app =getApp()
	import {getDetailByOrderNo} from '@/Utils/Api.js'
	export default {
		data(){
			return{
				// 0:代表未支付，1代表已支付,2代表已取消
				status:0,
				orderID:'1209 2418 0001 0039',
				moreThanThree:false,
				images: ["https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"],
				countdownh: '', //倒计时时
				countdownm: '', // 倒计时分
				countdowns:'',//倒计时秒
				timers:null,
				// recinfo:{
				// 	createTime:1680744355375,
				// },
				//
				orderId:'',//订单id
				recinfo: [],
				
			}
		},
		components:{
			wuliuPopup
		},
		onLoad(option) {
			this.orderId = option.id
		},
		onUnload() {
			clearInterval(this.timers);
		},
		onShow(){
			// 待支付状态
			// if(this.status == 0){
			// 	this.timers = setInterval(() => {
			// 		this.showtime()
			// 	}, 1000)
			// }
			
			//页面显示时，加载订单信息
			this.getDetailByOrderNo();
			
		},
		methods:{
			//查询订单详情
			getDetailByOrderNo() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					orderNo: this.orderId,
				}
				getDetailByOrderNo(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.recinfo = res.return_data;
						// if (res.return_data.productType == 6) {
						// 	this.getOrderByOrderNo();
						// }
			
						if (res.return_data.orderStatus == 1) {
							this.timers = setInterval(() => {
								this.showtime()
							}, 1000)
						}
					}
				})
			},
			showtime() {
				var nowtime = (new Date()).getTime();//获取当前时间
				var	endtime = this.recinfo.createTime + 600000; //定义结束时间 600000是10分钟
				var lefttime = endtime - nowtime; //距离结束时间的毫秒数
				var	leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)); //计算天数
				var	lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24); //计算小时数
				var	leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60); //计算分钟数
				var	lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.countdownh = lefth; //返回倒计时的字符串
				this.countdownm = leftm; //返回倒计时的字符串
				this.countdowns = lefts; //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					clearInterval(this.timers);
					// this.getDetailByOrderNo();
					this.countdownh = this.countdownm = this.countdowns = "00";
				}
			},
			// 查看更多商品
			checkMore(){
				this.moreThanThree = !this.moreThanThree
			},
			// 查看物流
			checkWuliu(){
				this.$refs.wuliu.$refs.popup.show()
			},
			
			// 点击修改订单
			editOrder(){
				uni.navigateTo({
					url:'/pages/classify/order/editOrder'
				})
			},
			// 取消订单
			cancelOrder(){
				
					let that = this;
					uni.showModal({
						title: '取消订单',
						content: '确定取消此订单？',
						success: (res) => {
							// if (res.confirm) {
							// 	uni.showLoading({
							// 		title: '加载中...'
							// 	})
							// 	let params = {
							// 		orderNo: this.recinfo.orderNo
							// 	}
							// 	cancel(params).then(res => {
							// 		if (res.return_code == '000000') {
							// 			uni.hideLoading();
							// 			uni.showToast({
							// 				title: res.return_data,
							// 				icon: 'none',
							// 				duration: 2000
							// 			})
							// 			let pages = getCurrentPages() //页面栈
							// 			let prePage = pages[pages.length - 2] //上一页
							// 			prePage.$vm.reFresh = Math.random() //触发上一页监听器
							// 			uni.navigateBack() //返回上一页
							// 		} else {
							// 			uni.showToast({
							// 				title: res.return_msg,
							// 				icon: 'none',
							// 				duration: 2000
							// 			})
							// 			uni.hideLoading()
							// 		}
							// 	})
							// } else if (res.cancel) {
							// 	console.log('用户点击取消');
							// }
						}
					});
				
			},
			// 支付订单
			payOrder(){
				
			},
			
			// 订单取消时的再来一单
			oneMoreOrder(){
				
			},
			// 订单取消时的删除订单
			deleteOrder(){
				
			},
			// 复制的
			copyText(text){
				
				
				
				// #ifdef H5
				this.$copyText(text).then(
					res => {
						uni.showToast({
							title: '复制成功'
						})
					}
				)
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
				// #endif
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>

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

.align-fs{
	align-self: flex-start;
}
.tr{
	text-align: right;
}
.flex-1{
	flex:1;
}
.st-img{
	 width: 82px;
	 height: 82px;
 }
 
 
 .goodsMore{
	 padding: 10px 0;
	 text-align: center;
	 border-top: 1px solid #f6f6f6;
	 border-bottom:1px solid #f6f6f6;
 }

// 商品金额
.pd-tb10{
	padding: 10px 0;
}

.td-lt{
	text-decoration: line-through;
}

.bordert{
	border-top: 2px solid #f6f6f6;
}

// 复制按钮
.copy-num{
	padding: 0 5px;
	border: 1px solid #666666;
	border-radius: 5px;
	display: inline-block;
	vertical-align: middle;
	
}
// 修改按钮
.edit-msg{
	border: 1px solid #D7D3D0;
		width: 50px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 15px;
	}

.pdb50{
	padding-bottom: 50px;
}

// 底部待支付按钮
.toPay{
	height: 40px;
	padding: 0 15px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-top: 1px solid #f6f6f6;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	.btn{
		// height: 20px;
		padding:1px 5px;
		border-radius: 10px;
		margin-left: 15px;
		border:1px solid #666666;
		color: #666666;
		&.bgred{
			color: #ffffff;
			background-color: #FF2342;
			border:1px solid #FF2342;
		}
		&.oneMore{
			color: #FF2342;
			
			border:1px solid #FF2342;
		}
	}
	
}
</style>