<template>
	<!-- 订单列表页面 -->
	<view class="content">
		<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">
			<vegetablesOrderItem @reload="reload" v-for="(item,index) in orderlist" :index='index' :status="status" :dataorder="item"
			 :key="index"></vegetablesOrderItem>
		</view>

		<pageScrollTo v-if="isshowtop"></pageScrollTo>

	</view>
</template>

<script>
	import {
		eleOrderStatus,
		eleOrderList
	} from "@/utils/api/api.js";
	import vegetablesOrderItem from "@/components/vegetablesOrderItem/vegetablesOrderItem.vue";
	import empty from "@/components/empty";
	import pageScrollTo from "@/components/pageScrollTo/pageScrollTo.vue"
	export default {
		components: {
			vegetablesOrderItem,
			empty,
			pageScrollTo
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navListTow: [],
				page: 0,
				orderlist: [],
				isshowall: true,
				status: "", //状态
				isshowtop: false,
				is_loading_done: false,
				action: '',
				isClick: true, //是否能点击
				scrleft: 0,
			};
		},
		onLoad(options) {
			this.tabCurrentIndex = 0; //先写死
			//获取全部的状态列表
			//方法请求
			this.page = 0;
			this.orderlist = [];
			this.isshowall = true;
			this.eleOrderStatusfun();
		},
		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.isshowall = true;
			// 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: {
			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 => {
				// 	console.log(res, order_id, '这里了')
				// 	uni.hideLoading();
				// 	for (let item of res.data) {
				// 		console.log(item, '这里了')
				// 		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.navListTow = [{
						status: "all",
						status_id: "all",
						status_name: "全部"
					}, {
						status: "1",
						status_id: "1",
						status_name: "未提货"
					}, {
						status: "1",
						status_id: "1",
						status_name: "已提货"
					}]
					// 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: "", //售后状态
				});
				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.isshowall = true;
					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;
	}
</style>
