<style lang="scss" scoped>
.order{ height:100%; background:#f1f1f1;}
.swiper{ height:100%;}
.scroll{ height:100%; overflow:hidden auto;}
.list{ padding:0 30rpx; padding-top:90rpx;
  .item{ background:#fff; padding-bottom:30rpx; box-shadow:#eee 0 0 10rpx; border-radius:15rpx; overflow:hidden;margin-top:35rpx;
	  .ht{ display:flex; color:#666; padding:20rpx 30rpx; border-bottom:1px solid #f2f2f2; align-items:center; justify-content: space-between;
		  label{color:#999;}
		}
		.hm{padding:10rpx 30rpx; .tit{ color:#333; } view{ margin-top:12rpx;  color:#666; } .red{color:red;}}
		.btns{ margin-top:20rpx; margin-right:30rpx; float:right;
		 .btn.blue{ background:$main-color; color:#fff;}
		 .btn{ height:65rpx; width:auto; border:0; line-height:63rpx; padding:0 30rpx; float:left; margin-left:20rpx; font-size:28rpx; border-radius:60rpx; color:#999; background:#eee;}}
	}	
}
</style>
<template>
	<view class="order">
		<Tab :list="tab" ref="tab" v-on:change="tabChange"></Tab>
		<swiper @change="swiperChange" :current="tabIndex" class="swiper">
			<swiper-item v-for="(item,index) in tab" :key="index">
				<scroll-view class="scroll" @scrolltolower="scrolltolower" scroll-y>
				<view class="list">					
					 <view class="item" v-for="(itm,inx) in list" :key="inx">
						 <view class="ht" @tap="goDetail(itm.orderno)">
								  订单号：{{itm.orderno}} 
							   <label v-if="itm.status==4">已取消</label>
										<block v-else>
											  <label style="color:red;" v-if="itm.paystate===0">待支付</label>
													<block v-else>														
														<label style="color:red;" v-if="itm.status===0">待发货</label>
														<label style="color:#f6800d;" v-if="itm.status===1">待收货</label>
														<label style="color:#007AFF;" v-if="itm.status==2">已收货</label>
														<label style="color:#0cb688;" v-if="itm.status===3">已完成</label>
													</block>
										</block>
							</view>
						 <view class="hm" @tap="goDetail(itm.orderno)">
							 <view class="tit">{{itm.title}}</view>
							 <view class="price">支付金额：<label class="red">￥{{itm.paymoney||0.00}}元</label></view>					
							 <view class="time">时间：{{itm.datetime}}</view>
						 </view>
						 <view class="btns">
							 <view class="btn" @tap="goDetail(itm.orderno)">订单详情</view>
								<block v-if="itm.paystate===0 && itm.status===0">
										<view class="btn" @tap="cancelOrder(inx)">取消订单</view>
										<view class="btn blue" @tap="orderPay(inx)">立即支付</view>
								</block>
								<block v-if="itm.paystate===1">
									<view class="btn" v-if="cancel(itm.paytime) && itm.status===0"  @tap="cancelOrder(inx)">取消订单</view>	
									<!--view class="btn blue" v-if="itm.status==2 && itm.isevalute==0">评价订单</view-->
									<view class="btn blue" v-if="itm.status==1" @tap="confirmSH(inx)">确认收货</view>
								</block>
						 </view>
					 </view>
						<view v-if="list.length > 0 && !nomore" class="more">显示更多<image src="/static/loading.gif" /></view>
						<view v-if="list.length> 0 && nomore" class="more">没有更多数据啦!</view>
						<view class="nodata" v-if="nodata">
							  <image src="/static/noimg.png"></image>
									<view>暂无订单~</view>
						</view>
				</view>				
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {GetDateDiff,getCurrentTime} from '@/utils/util.js'
	import pay from '@/utils/pay.js'
	import Tab from '@/pages/comm/tab.vue'
	export default{
		 components:{Tab},
		 data(){
			 return{
				 tabIndex:0,
				 tab:[{txt:'全部订单'},{txt:'待付款'},{txt:'待收货'},{txt:'已完成'},{txt:'已取消'}],
				 list:[],
					nodata:false, //暂无数据
					nomore:false, //没有更多				
					query:{
						 current:1,   //当前页
							size:6,      //每页显示
							status:'',   //订单状态: 0待发货；1已发货；2已收货；3已完成; 4已取消
							paystate:'', //支付状态 0 未支付 1已支付 2已退款
					}
			 }
		 },
					
			onShow(e){
				 this.list = [];
				 this.query.current=1;
				 this.nodata = false;
				 this.nomore = false;
					this.getOrderList();
			},		
			
			onLoad(e){	
				 this.tabIndex = e.status;
					this.changeData();
			},		
			
		 methods:{
				
				swiperChange(e){
						this.tabIndex = e.detail.current;
						this.$refs.tab.swipertab(this.tabIndex);
						this.changeData();
				},
								
				tabChange(e){
						this.tabIndex = e;
						this.changeData();
				},
								
				//切换
				changeData(){
					  //订单状态: 0待发货；1待发货；2已收货；3已完成;  4已取消
					  if(this.tabIndex==0){
								  this.query.status = '';
										this.query.paystate = '';
							}else if(this.tabIndex==1){
								  this.query.status = 0;
								  this.query.paystate = 0;
							}else if(this.tabIndex==2){
								  this.query.status = 1;
								  this.query.paystate = 1;
							}else if(this.tabIndex==3){
								  this.query.status = 3;
								  this.query.paystate = 1;
							}else if(this.tabIndex==4){
								  this.query.status = 4;
								  this.query.paystate = "";
							}
							this.list = [];
							this.query.current=1;
							this.nodata = false;
							this.nomore = false;
							this.getOrderList();
				},
				
				//上拉加载更多
				scrolltolower(){					  
					  if(this.nodata || this.nodata){ return; }
					  this.query.current++;
					  this.getOrderList();
				},
				
				//获取订单列表
				async getOrderList(){
					  const json = await this.api.orderList({q:this.query});
							if(json.data.code==0){
								  let data = json.data.data;
										if(data.total==0){ this.nodata = true;  return; }
										let list = data.list;
										if(this.query.current==1){
											 this.list = list;
										}else{
											 this.list = this.list.concat(list);
										}
										if(this.list.length==data.total){
											 this.nomore = true;
										}
							}
				},
				
				//跳转订单详情
				goDetail(orderno){
					  this.api.go('/pages/my/order/detail?orderno='+orderno);
				},
				
				//判断5分钟之内可取消订单
				cancel(paytime){
					  var startTime = paytime;
					  var endTime = getCurrentTime();	
							if(startTime != null && startTime!=""){ 								 
									var minute = GetDateDiff(startTime,endTime,"minute");
									if(minute<=5){
											return true;
									}
							}
				},
				
				//取消订单
				cancelOrder(index){
				  var that = this;
				  uni.showModal({title:'温馨提示',	content:'确定要取消订单吗？',
					    success(res){
								 if(res.confirm){
									 that.doCancelOrder(index);
								 }
							}
					})				  
				},
				
				async doCancelOrder(index){
				 const json = await this.api.cancelOrder({q:{orderno:this.list[index].orderno}});
				 if(json.data.code==0){
				 	 uni.showToast({title:'取消订单成功'})
					 var that = this;
					 setTimeout(res=>{
						   that.list[index].status = 4;
					 },1000)
				 }
				},
				
				//确认收货
				confirmSH(index){
					 var that = this;
					  uni.showModal({title:'温馨提示',	content:'确定要收货吗？',
					     success(res){
					 			 if(res.confirm){
					 				 that.doConfirmSH(index);
					 			 }
					 		}
					 })		
				},
				
				async doConfirmSH(index){
				 const json = await this.api.confirmSh({q:{orderno:this.list[index].orderno}});
				 if(json.data.code==0){
				 	 uni.showToast({title:'收货成功'})
					 var that = this;
					 setTimeout(res=>{
						   that.list[index].status = 2;
					 },1000)
				 }
				},
				
				//订单支付
				async orderPay(index){
					  this.api.go('/pages/pay/index?orderno='+this.list[index].orderno+'&title='+this.list[index].title);					
				},									
								
		 }
	}
</script>

