<template>
	<!-- 订单列表页面 -->
	<view class="content" style="overflow: hidden;">
		<view class="navbar">
			<scroll-view  :scroll-x="true" style="width: 100vw;" :scroll-left="scrleft" :scroll-with-animation="true" >
				<view class="ali-c">
					<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>
			</scroll-view>
		</view>
		
		
		<view class="orderlist">
			<orderItemss @reload="reload" @refuse="refuse" v-for="(item,index) in orderlist" :index='index' :status="status" :dataorder="item" :key="index" ></orderItemss>
		</view>
		
		<pageScrollTo v-if="isshowtop" ></pageScrollTo>
		
		
		<!-- 高级搜索弹窗 -->
		<unipopup :isnonehover="false"  type="top" :show="isshowsearch" @change="changepupse"  >
			<view class="Advancedsearch">
				<view class="searcell">
					<view class="celltit">收货人姓名</view>
					<view class="cellsinput">
						<input class="input" v-model="username" type="text"  placeholder="可通过收货人姓名查找" ></input>
					</view>
				</view>
				<view class="searcell">
					<view class="celltit">手机号</view>
					<view class="cellsinput">
						<input class="input" type="number" v-model="tel" maxlength="11"  placeholder="可通过收货人手机号查找" ></input>
					</view>
				</view>

				<view class="subsearbox flex ali-c jus-c">
					<view class="searbtn1" @tap="searchreset">重置</view>
					<view class="searbtn1 searbtn2" @tap="submitsear">确定</view>
				</view>
			</view>
		</unipopup>
		
		
		
		<!-- 拒绝接单 -->
		<unipopup :isnonehover="false"  type="bottom" :show="isshowremarks" @change="changepupse1"  >
			<view class="LeavingAmessage">
				<view class="addbeizhut">填写拒绝接单的理由</view>
				<view class="le_body">
					<textarea  class="cons" v-model="incount" placeholder="您可以填写拒绝接单的理由~" placeholder-class="plclass"  />
				</view>
				<view class="le_foot" @tap="complete">
					<button class="buttons">完成</button>
				</view>
			</view>
		</unipopup>
		
	</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";
	import unipopup from "@/components/uni-popup/uni-popup.vue";
	
	import {refuseOrder} from "@/utils/api/api.js";
	export default {
		components: {
			orderItemss,
			empty,
			pageScrollTo,
			unipopup
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navListTow:[],
				page:0,
				orderlist:[],
				status:"",//状态
				isshowtop:false,
				is_loading_done: false,
				action:'',
				isClick:true,//是否能点击
				scrleft:0,
				
				
				isshowsearch:false,//是否显示搜索
				username:"",
				tel:"",
				
				isshowremarks:false,
				
				incount:"",//拒绝接单的理由
				refusedata:{},//拒接单的源数据
			};
		},
		onLoad(options){
			this.tabCurrentIndex = 0;//先写死
			//获取全部的状态列表
			//方法请求
			this.page=0;
			this.orderlist=[];
			this.is_loading_done=false;
			this.eleOrderStatusfun();
		},
		//标题栏变点击
		onNavigationBarButtonTap(e){
			if(e.index==0){
				//显示高级搜索
				this.isshowsearch = !this.isshowsearch;
			}
		},
		onShow() {
			this.action='';
			uni.$on("isDelorder", res => {
				let index=uni.getStorageSync('obj').index;
				let orderlist=this.orderlist;
				this.action=res.action;
				if(res.action=="immediatelyOrder"||res.action=="refuseOrder"){ //接单  拒绝接单
					if(this.status!='all'){ //只有不是在全部订单下才删除这一项
						orderlist.splice(index,1);  //删除某项 可能有问题
						this.$set(this,'orderlist',orderlist);
					}else{
						this.listDeal();
					}   
				}
				uni.$off('isDelorder'); //取消监听
			})
			
			if(this.action==''){
				this.listDeal();
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.is_loading_done = false;
			this.page=0;
			this.orderlist=[];
			this.eleOrderListfun();
		},
		onPageScroll(e){
			uni.setStorageSync('scrollTop',e.scrollTop);
			//处理返回顶部
			if(e.scrollTop>300){
				this.isshowtop = true;
			}else{
				this.isshowtop = false;
			}
		},
		onReachBottom() {
			if (this.is_loading_done == false) { //还没加载完毕则继续加载
				uni.showLoading({
					title: '加载中',
					mask: false
				})
			    this.eleOrderListfun();
			} else {
				uni.showLoading({
					title: '已全部加载完毕',
					mask: false
				})
				setTimeout(function () {
					uni.hideLoading()
				}, 1000);
			}
		},
		onUnload(){  //页面卸载的时候
			uni.setStorageSync('obj',{order_id:'',index:-1});
			uni.$off('isDelorder'); //取消监听
			uni.setStorageSync('scrollTop',0);
		},
		methods: {
			//拒绝接单
			refuse(data){
				this.refusedata = data;
				this.incount = "";
				this.isshowremarks = true;
			},
			//完成
			async complete(){
				if(!this.incount){
					this.$api.msg("请填写拒绝接单的理由。");
					return false;
				}
				let res = await refuseOrder({
					order_id:this.refusedata.order_id,
					remark:this.incount,
					remarktwo:this.incount,//备用
				});
				this.isshowremarks = false;
				this.$api.msg(res.msg);
				if(res.code==0){
					this.reload({index:this.refusedata.index})
				}
				
			},
			//搜索弹窗
			changepupse1(e){
				this.isshowremarks = e.show;
			},
			//搜索弹窗
			changepupse(e){
				this.isshowsearch = e.show;
			},
			//重置搜索
			searchreset(){
				this.page=0;
				this.orderlist=[];
				this.is_loading_done=false;
				
				// //条件重置
				this.username = "";
				this.tel = "";
				this.isshowsearch = false;//关闭弹窗
				// this.getorderList();
				this.eleOrderListfun();//获取订单列表
			},
			//确认搜索
			submitsear(){
				this.page=0;
				this.orderlist=[];
				this.is_loading_done=false;
				
				this.isshowsearch = false;//关闭弹窗
				this.eleOrderListfun();
			},
			listDeal(){
				let order_id=uni.getStorageSync('obj').order_id;
				let index=uni.getStorageSync('obj').index;
				uni.showLoading({title:"请稍后..."});
				eleOrderList({
					page:Math.ceil((index+1)/10),
					status:this.status,
					is_dianping:"",//点评
					sale_status:""//售后状态
				}).then(res => {
					uni.hideLoading();
					for(let item of res.data){
						if(item.order_id==order_id){
							this.$set(this.orderlist,index,item);//可能有问题
							break;
						}
					}
				})
			},
			reload(e){//抢单成功后 
				let index=e.index;
				if(this.status=='all'){
					this.listDeal();
				}else{
					let orderlist=this.orderlist;
					orderlist.splice(index,1);  //删除某项
					this.$set(this,'orderlist',orderlist);//可能有问题
				}
			},
			//获取订单状态
			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.isClick=false;//不能点击tab了
				this.page++;
				uni.showLoading({title: '加载中...'});
				let res = await eleOrderList({
					page:this.page,
					status:this.status,
					is_dianping:"",//点评
					sale_status:"",//售后状态
					
					username:this.username,//收货人名字
					tel:this.tel,//收货人电话
				});
				console.info('res',res);
				uni.hideLoading();//结束加载
				this.isClick=true;//能点击tab了
				uni.stopPullDownRefresh();//结束下拉刷新
				if(res.code==0){
					
					if (res.data == null || res.data.length == 0) {
						this.is_loading_done = true;
					} else {
						this.orderlist = [...this.orderlist,...res.data];//可能有问题
					}	
				}else{
					this.$api.msg(res.msg);
				}
				
				uni.pageScrollTo({
				    scrollTop: uni.getStorageSync('scrollTop'),
				    duration: 0
				});
			},
			//发货功能
			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){
				
				if(this.isClick){
					this.tabCurrentIndex = index;
					this.page = 0;
					this.orderlist = [];
					this.is_loading_done= false,
					this.status = item.status;
					this.scrleft = index*45;
					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{
		width: 100vw;
		display: flex;
		line-height: 80upx;
		padding: 0 10upx;
		background: #fff;
		box-shadow: 0 1px 10upx rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			min-width: 160upx;
			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: 40upx 24upx 0 24upx;box-sizing: border-box;
	}
	
	
	// 拒绝的理由
	.lu-popup-content{
		border-radius: 14upx;
	}
	/*留言弹窗*/
	.LeavingAmessage{
		height: 600upx;
		padding: 24upx;
		padding-top: 0;
		overflow: hidden;
		background-color: #fff;
		.addbeizhut{
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			font-size:36upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			margin: 20upx 0;
		}
		
		.le_body .cons{
			width: 100%;
			height:241upx;
			background:rgba(255,255,255,1);
			border:1upx solid rgba(220,220,220,1);
			padding:31upx;
			color:#000000;
			font-size:30upx;
		}
		.plclass{
			color:#6B6B6B;
		}
		.le_foot{
			margin: 60upx 0;
			.buttons{
				
				background-color: #f64f15;
				color:#fff;
			}
		}
	}
</style>
