<template>
	<view style="height: 90vh;">
		<u-navbar title-color="#fff" back-icon-color="#ffffff"
			:is-fixed="true" 
			:is-back="true" 
			:background="topBackground" 
			:back-text-style="{color: '#fff'}" 
			:title="title" 
			:back-icon-name="backIconName" 
			:back-text="backText"
		>
		</u-navbar>
		<view class="divison"></view>
		<view class="myData">
		<view class="datas">我的佣金：<text style="color: #ED1C24;font-size: 18px;margin: 5rpx;">￥{{ myMoney }}</text></view>
		<view class="datas">已配送单数：<text style="color: #ED1C24;font-size: 18px;margin: 5rpx;">{{ orderNum }}</text>单</view>
		</view>
		
		<view class="pageContent">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" ></u-tabs-swiper>
			</view>
			
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 待送达 -->
				
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="orderList" v-for="(item,index) in ongoinglist" :key="index">
							<view class="orderMassage">
								<view class="storePicture">
									<image :src="item.store_picture"  border-radius="20px" style="width: 90%;height: 90%;"></image>
								</view>
								<view class="details">
									<view class="orderText">
										<text >取货地址：{{ item.take_addr }}</text>
									</view>
									<view class="orderText">
										<text>配送地址：{{ item.go_addr }}</text>
									</view>
									<view class="orderText">
										<text style="color: #ffaa00;">配送预计时间：{{ item.predict_time }}分钟</text>
									</view>
									<view class="orderText">
										<view>佣金：<text style="color: #ff0000">￥</text><text style="font-size: 18px;color: #ff0000;">{{ item.earn_money }}</text></view>

									</view>

								</view>
							</view>
							<view class="giveUp">
								<u-button shape="square" type="success" size="mini" :plain="true">放弃订单</u-button>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已送达 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" >
						<view class="orderList2" v-for="(item,index) in completeorder" :key="index">
							<view class="orderMassage2">
								<view class="storePicture">
									<image :src="item.store_picture"  border-radius="20px" style="width: 90%;height: 80%;border-radius: 10rpx;"></image>
								</view>
								<view class="details">
									<view>
										<view class="orderText">
											<text>取货地址：{{ item.take_addr }}</text>
										</view>
										<view class="orderText">
											<text>配送地址：{{ item.go_addr }}</text>
										</view>
										
										<view class="orderText2">
											<view>佣金：<text style="color: #ff0000">￥</text><text style="font-size: 18px;color: #ff0000;">{{ item.earn_money }}</text></view>
										</view>
									</view>
									
									
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 顶部标题
				title: '我的配送',
				backText: '返回',
				backIconName: 'nav-back',
				isBack: true,
				topBackground: {
					backgroundImage: 'linear-gradient(to right, #146930 , #77b633)'
				},
				
				// 我的佣金和订单数
				myMoney:888,
				orderNum:55,
				
				
				
				orderList: [[], []],
				list:[
					{
						name:'待送达',
					},
					{
						name:'已送达',
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore','loadmore'],
				ongoinglist:[
					{
						store_id:1,
						store_picture:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F006CjT3ggy1gvbdntuo3fj60n40d0abv02.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638519744&t=f9c70870945fb51eb9f4aa93ef5a3390',
						take_addr:'北京天安门广场一号广场楼',
						go_addr:'清华大学',
						predict_time:18,
						earn_money:18,
					},
					{
						store_id:2,
						store_picture:'https://pic.rmb.bdstatic.com/bjh/news/f8510dd27a49a7d30befaef266d0a9a5.png',
						take_addr:'南宁市良庆区总部基地',
						go_addr:'广西大学',
						predict_time:18,
						earn_money:18,
					}
				],
				completeorder:[
					{
						store_id:1,
                        store_picture:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00555-2517.jpg',
						go_addr:'清华大学',
						predict_time:18,
						earn_money:18,
						take_addr:'南宁市良庆区总部基地',
					},
					{
						store_id:2,
						store_picture:'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00555-2517.jpg',
						take_addr:'南宁市良庆区总部基地',
						go_addr:'广西大学',
						predict_time:18,
						earn_money:18,
					}
				],
				
			}
		},
		methods: {
			
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.getOrderList(index);
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 页面数据		foodMaterialList
			getOrderList(idx) {
				
				if(idx==0){
					for(let i = 0; i < 5; i++) {
						let index = this.$u.random(0, this.ongoinglist.length - 1);
						let data = JSON.parse(JSON.stringify(this.ongoinglist[index]));
						data.id = this.$u.guid();
						this.orderList[idx].push(data);
					}
					this.loadStatus.splice(this.current,3,"loadmore")
					
				}else if(idx==1){
					for(let i = 0; i < 5; i++) {
						let index = this.$u.random(0, this.completeorder.length - 1);
						let data = JSON.parse(JSON.stringify(this.completeorder[index]));
						data.id = this.$u.guid();
						this.orderList[idx].push(data);
					}
					this.loadStatus.splice(this.current,3,"loadmore")
				}
			},
			reachBottom() {
				// 此tab为空数据
				if(this.current != 2) {
					this.loadStatus.splice(this.current,10,"loading")
					setTimeout(() => {
						this.getOrderList(this.current);
					}, 1200);
				}
			},
			
		}
	}

</script>

<style>
	.myData{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		margin-bottom: 5px;
	}
	.datas{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		height: 40px;
		font-size: 15px;
		
		border-radius: 10px;
		margin: 20rpx 10rpx;
	}
	.pageContent{
		height: 100%;
	}
	.swiper-box {
		height: 100%;
		
	}
	.swiper-item {
		height: 100%;
	}
	.orderList{
		margin-top: 20rpx;
		height: 140px;
	}
	.orderList2{
		margin-top: 20rpx;
		
	}
	.divison{
		width: 100%;
		height: 10rpx;
		background-color: #e3e3e5;
	}
	
	.orderMassage{
		display: flex;
		flex-direction: row;
		border: #f3f3f3 solid 1px;
		border-radius: 10px;
		height: 135px;
		align-items: center;
		background-color: #FFFFFF;
	}
	.orderMassage2{
		display: flex;
		flex-direction: row;
		border: #f3f3f3 solid 1px;
		border-radius: 10px;
		height: 120px;
		align-items: center;
		background-color: #FFFFFF;
	}
	.storePicture{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 45%;
		height: 260rpx;
		border-radius: 10rpx;
	}
	.details{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		width: 55%;
	}
	.orderText{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin-top: 10rpx;
		padding-left: 10rpx;
		
		
	}
	.orderText2{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		margin-top: 20rpx;
		padding-left: 10rpx;
		
		
	}
	.giveUp{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-end;
		position: relative;
		top: -70rpx;
		margin-right: 15rpx;
		color: #FFFFFF;

	}
</style>
