<template>
	<!-- 订单列表页面 -->
	<view class="content">
		<view class="fl-fx">
		<view class="navbar">
			<view 
				v-for="(item, index) in navListTow" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index,item)"
			>
				{{item.status_name}}
			</view>
		</view>
		</view>
		
		<view class="orderlist">
			<orderItemss @reload="reload" v-for="(item,index) in orderlist" :dataorder="item" :key="index" ></orderItemss>
		</view>
		
		<pageScrollTo v-if="isshowtop" ></pageScrollTo>
		
	</view>
</template> 

<script>
	import {eleOrderStatus,eleOrderList} from "@/utils/api/api.js";
	import orderItemss from "@/components/orderItemss/orderItemss.vue";
	import empty from "@/components/empty";
	import pageScrollTo from "@/components/pageScrollTo/pageScrollTo.vue"
	export default {
		components: {
			orderItemss,
			empty,
			pageScrollTo
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navListTow:[],
				page:0,
				orderlist:[],
				isshowall:true,
				status:"",//状态
				isshowtop:false,
			};
		},
		onLoad(options){
			this.tabCurrentIndex = 0;//先写死
			//获取全部的状态列表
			
			//方法请求
			this.page=0;
			this.orderlist=[];
			this.isshowall=true;
			this.eleOrderStatusfun();
			
		},
		onShow() {
			//处理返回刷新
			// let isload = uni.getStorageSync("isload");
			// if(isload==1){
			// 	uni.setStorageSync("isload",0);
				
			// 	this.page=0;
			// 	this.orderlist=[];
			// 	this.isshowall=true;
			// 	this.eleOrderListfun();//获取订单列表
			// }
		},
		//下拉刷新
		onPullDownRefresh(){
			this.page=0;
			this.orderlist=[];
			this.isshowall=true;
			this.eleOrderListfun();
			// uni.stopPullDownRefresh();//结束下拉刷新
		},
		onPageScroll(e){
			//处理返回顶部
			if(e.scrollTop>300){
				this.isshowtop = true;
			}else{
				this.isshowtop = false;
			}
		},
		onReachBottom() {
			if(this.isshowall){
				this.eleOrderListfun();
			}
		},
		methods: {
			//抢单成功后 重新加载列表方法
			reload(){
				console.info("11");
				this.page=0;
				this.orderlist=[];
				this.isshowall=true;
				this.eleOrderListfun();
			},
			//获取订单状态
			async eleOrderStatusfun(){
				let res = await eleOrderStatus({
					
				});
				if(res.code==0){
					this.navListTow = res.data;
					this.status = "all";
					this.eleOrderListfun();//获取订单列表
				}else{
					this.$api.msg(res.msg);
				}
			},
			//获取订单列表
			async eleOrderListfun(){
				this.page++;
				let res = await eleOrderList({
					page:this.page,
					status:this.status,
					is_dianping:"",//点评
					sale_status:"",//售后状态
				});
				 uni.stopPullDownRefresh();//结束下拉刷新
				if(res.code==0){
					if(res.data){
						if(res.data.length!=0){
							this.orderlist = [...this.orderlist,...res.data];
						}else{
							this.$api.msg("没有更多了");
						}
					}else{
						this.$api.msg("没有更多了");
					}
				}else{
					this.$api.msg(res.msg);
				}
			},
			//发货功能
			todelivery(){
				uni.navigateTo({
					url:"/pages/order/delivery/delivery?id=1",
				})
			},
			//核销功能
			tocheckx(){
				//处理 传参 请求 提示核销成功
				this.$api.msg("核销成功(测试提示)");
			},
			jump_detail(){
				uni.navigateTo({
					url: '/pages/order/detail/detail'
				});
			},
			
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				
			},
			//顶部tab点击 切换数据
			tabClick(index,item){
				this.tabCurrentIndex = index;
				
				this.page = 0;
				this.orderlist = [];
				this.isshowall = true;
				this.status = item.status;
				this.eleOrderListfun();
			},
			//删除订单
			deleteOrder(index){
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(()=>{
					this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
					uni.hideLoading();
				}, 600)
			},
			//取消订单
			cancelOrder(item){
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(()=>{
					let {stateTip, stateTipColor} = this.orderStateExp(9);
					item = Object.assign(item, {
						state: 9,
						stateTip, 
						stateTipColor
					})
					
					//取消订单后删除待付款中该项
					let list = this.navList[1].orderList;
					let index = list.findIndex(val=>val.id === item.id);
					index !== -1 && list.splice(index, 1);
					
					uni.hideLoading();
				}, 600)
			},

			//订单状态文字和颜色
			orderStateExp(state){
				let stateTip = '',
					stateTipColor = '#fa436a';
				switch(+state){
					case 1:
						stateTip = '待付款'; break;
					case 2:
						stateTip = '待发货'; break;
					case 9:
						stateTip = '订单已关闭'; 
						stateTipColor = '#909399';
						break;
						
					//更多自定义
				}
				return {stateTip, stateTipColor};
			}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	.fl-fx{
		position: fixed;width: 100%;z-index: 999;
	}
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	
	.navbar{
		display: flex;
		height: 80upx;
		padding: 0 10upx;
		background: #fff;
		box-shadow: 0 1px 10upx rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 88upx;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.orderlist{
		padding: 100upx 24upx 0 24upx;box-sizing: border-box;
	}
</style>
