<template>
	<view class="content">
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" :class="1 ==TabCur?'text-yellow cur':''"  @tap="tabSelect" :data-id="1">
				{{__('新任务')}}
			</view>
			<view class="cu-item" :class="2 ==TabCur?'text-yellow cur':''"  @tap="tabSelect" :data-id="2">
				{{__('待取货')}}
			</view>
			<view class="cu-item" :class="3 ==TabCur?'text-yellow cur':''"  @tap="tabSelect" :data-id="3">
				{{__('配送中')}}
			</view>
			<view class="cu-item" :class="4 ==TabCur?'text-yellow cur':''"  @tap="tabSelect" :data-id="4">
				{{__('已完成')}}
			</view>
		</scroll-view>

		 <scroll-view class="m-product-all" scroll-y="true" @scrolltolower="scrollbottom" style="width:100%;height:100%;position: absolute;" v-if="(ptm_is_active)">
			<view v-if="(list.length>0)" >
			<view class="part"   v-for="(item,index) in list" :key="index" :data-state="item.po_state_id" :data-id="item.po_id"  @click.stop="jump_detail">
				<view class="par_scd qy-bg-red">{{item.expectedtime}}</view>
				<view class="part_01">
					<view class="pare_01_l ">
						<img class="pare_logo" :src="(item.store_logo)"></img>
						<view style="float:left;padding:20rpx 0 0 20rpx;">
							<view style="font-size: 24rpx;color: #333;">{{item.store_name}}</view>
							<view style="font-size: 24rpx;color: #333;">{{item.po_id}}</view>
						</view>
					</view>
					<view class="pare_01_r">{{item.po_distance}} KM</view>
				</view>
				<view class="time qy-bg-white margin-bottom-sm">
					<view class="time_l ">
						<view class="time_l_01 qy-text-red">{{__('￥')}} <span>{{item.po_freight}}</span></view>
						<view class="time_l_02">{{__('本单预计收入')}}</view>
					</view>
					<view class="time_m"></view>
					<view class="time_l ">
						<view class="time_r_01 qy-text-red"><span>{{item.po_expectedtime}}</span></view>
						<view class="time_r_02">{{__('预约送达时间')}}</view>
					</view>
				</view>
				<view style="border-top: 2rpx solid #FAFAFA;">
					<view class="Process padding-xs" >
					  <view class="process_01">
							<view class="process_01_l">
								<view class="process_01_l_01 qy-bg-yellow text-white">
									<view class="tex" style="line-height: 1.5;font-size: 24rpx;">{{__('取')}}</view>
								</view>
							</view>
							<view class="process_01_r">
								<view class="">{{__('地址')}}</view>
								<span>{{item.store_address}}</span>
							</view>
						</view>
						<view class="process_01">
							<view class="process_01_l">
								<view class="process_01_l_01 qy-bg-red text-white">
									<view class="tex" style="line-height: 1.5;font-size: 24rpx;">{{__('送')}}</view>
								</view>
							</view>
							<view class="process_01_r">
								<view class="process_01_r_01">{{__('地址')}}</view>
								<span>{{item.po_receive_address}}</span>
							</view>
						</view>
					</view>
				</view>
				<block v-if="(item.po_state_id == 1)">
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-yellow round " :data-id="item.po_id"  @click.stop="jump_grabbing">{{__('抢单')}}</button>
					</view>
				</block>
				<block v-if="(item.po_state_id == 2)">
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-yellow round " :data-id="item.po_id" @click.stop="jump_pickup">{{__('待取货')}}</button>
					</view>
				</block>
				
				<block v-if="(item.po_state_id == 3)">
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-yellow round " :data-id="item.po_id" @click.stop="jump_service">{{__('已送达')}}</button>
					</view>
				</block>
				
				<block v-if="(item.po_state_id == 4)">
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-yellow round " :data-id="item.po_id"  @click.stop="jump_cancel">{{__('删除')}}</button>
					</view>
				</block>
			
			</view>
			<view class="m-loading-box">
			    <block v-if="(ispage)">
			        <view class="u-loadmore">
			            <label class="u-loading"></label>
			            <text class="u-loadmore-tips">{{__('正在加载')}}</text>
			        </view>
			    </block>
			    <block v-else>
			        <view class="u-loadmore u-loadmore-line">
			            <text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
			        </view>
			    </block>
			</view>
		</view>
		<view redirect="true" class="m-nullpage" v-else style="top:20%">
		    <view class="m-nullpage-middle">
		        <view class="m-null-tip">
		            <text>{{__('亲~您还没有订单哦')}}</text>
		        </view>
		    </view>
		</view>
		</scroll-view>
		<view class="u-end" v-else>
			<image mode="aspectFit" lazy-load src="../images/user/sys.png"></image>
			<view class="u-end-title">{{__('快来开工吧')}}</view>
		</view>
		<view class="page-ball" @click="editActive">
			<view class="page-title">{{ptm_is_active?__('收工') : __('开工')}}</view>
		</view>
	
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';

	export default {
		data() {
			return {
				TabCur:1,
				list:[],
				page: 1, 
				ispage: false,
				flag: true,
				state_id: 1,
				ptm_is_active: 0,
				filterData:[],
				filterDropdownValue:[],
				scrollTop:0,
			}
		},
		components: {
			'HMfilterDropdown':HMfilterDropdown
		},
		
	
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options)  {
			var  that = this;
			uni.setNavigationBarTitle({
			    title:this.__('订单列表')
			});
			this.ptm_is_active = uni.getStorageSync('ptm_is_active');
			this.forceUserInfo(function(user) {
			
			});
			
			if(options.state)
			{
				this.setData({
					TabCur: options.state,
				})
			}
			
			that.$.request({
				url: this.Config.URL.productfilter_opt,
				data: {},
				dataType: 'json',
				success: function(data, status, msg, code) {
					if (status == 200) {
						that.filterData = data;
					} else {
					}
				}
			});
			if(this.ptm_is_active == 1)
			{
				this.getOrder()
			}
			
			

		},
		methods: {
			   ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			tabSelect(e) {
				
				if(this.ptm_is_active == 1)
				{
					this.TabCur = e.currentTarget.dataset.id;
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					this.setData({
						list:[],
						page: 1, 
						ispage: false,
						flag: true,
					})
					
					this.getOrder()
				}
			
			},
			jump_cancel(e){
				var that =  this;
				
				var params = {
					po_id: e.target.dataset.id
				};
				that.$.request({
					url: that.Config.URL.city.order_remove,
					data: params,
					success: function(data, status, msg, code) {
							
							that.$.showModal({
							    title: that.__("提示"),
							    content: msg,
							    success: function (res) {
							        if (res.confirm) {
										that.setData({
											list:[],
											page: 1, 
											ispage: false,
											flag: true,
										})
										
										that.getOrder()
									}
								},
							})
						
					}
				});
			},
			
			
			//修改接单员状态
			editActive: function() {
				var that = this;
				
				if(that.ptm_is_active == 1)
				{
					var is_active = 0
				}
				else
				{
					var is_active = 1
				}
				
				var params = {
					ptm_is_active: is_active
				}
				that.$.request({
					url: that.Config.URL.city.paotui_active,
					data: params,
					success: function(data, status, msg, code) {
							
							if(status == 200)
							{
									
								that.setData({
									ptm_is_active: data.ptm_is_active
								})
								uni.setStorageSync('ptm_is_active', data.ptm_is_active);
								that.setData({
									list:[],
									page: 1, 
									ispage: false,
									flag: true,
								})
								
								that.getOrder()
								that.$.alert(that.__('操作成功！'))
							}
								
						
							
							
						
					}
				});
				
			},
			
			
			//送达
			jump_service(e){
				var that =  this;
				
				that.$.gopage("/paotui/order/signinpic?po_id=" + e.target.dataset.id);
	
			},
			
			
			//取货
			jump_pickup(e){
				var that =  this;
				
				var params = {
					po_id: e.target.dataset.id
				};
				
				that.$.request({
					url: that.Config.URL.city.order_pickup,
					data: params,
					success: function(data, status, msg, code) {
							
							if(status == 200){
								that.$.alert('取货成功',function() {
									that.setData({
										list:[],
										page: 1, 
										ispage: false,
										flag: true,
									})
									
									that.getOrder()
								})
						
							}
							else
							{
								that.$.alert(msg)
							}
							
						
					}
				});
			},
			
			
			//抢单
			jump_grabbing(e){
				var that =  this;
				
				var params = {
					po_id: e.target.dataset.id
				};
				
				that.$.showModal({
				    title: that.__("提示"),
				    content: "确认抢单？",
				    success: function (res) {
				        if (res.confirm) {
							that.$.request({
								url: that.Config.URL.city.order_apply,
								data: params,
								success: function(data, status, msg, code) {
									if(status == 200){
										that.$.alert(that.__('抢单成功'))
										that.setData({
											list:[],
											page: 1, 
											ispage: false,
											flag: true,
										})
										
										that.getOrder()
									}
									else
									{
										that.$.alert(msg)
									}
									
								}
							});
					
						}
					},
				})
			
			},
			jump_deliver(){
				uni.navigateTo({
					url: '/horseman/deliver/deliver'
				});
			},
			jump_detail(e){
				var that = this;
				var po_id = e.currentTarget.dataset.id;
				var state = e.currentTarget.dataset.state;
			
				switch(parseInt(state)) {
					case 1:
						that.$.gopage("/paotui/order/navigation?po_id=" + po_id);
						break;
					case 2:
						that.$.gopage("/paotui/order/navigation?po_id=" + po_id);
						break;
					case 3:
						that.$.gopage("/paotui/order/navigation?po_id=" + po_id);
						break;
					case 4:
						that.$.gopage("/paotui/order/detail?po_id=" + po_id);
						break;			
					default:
						
						break;	
				}
			
			},
			jump_coupon(){
				uni.navigateTo({
					url: '/horseman/coupon/coupon'
				});
			},
			jump_fill(){
				uni.navigateTo({
					url: '/horseman/fill/fill'
				});
			},
			
			getOrder: function() {
				var that = this;
				var params = {
					po_state_id: that.TabCur
				};
				that.$.request({
					url: that.Config.URL.city.order_lists,
					data: params,
					success: function(data, status, msg, code) {
							if (200 == status) {
							    if (data.page >= data.total) {
							        that.setData({
							            flag: false,
							            ispage: false,
							            list: that.list.concat(data.items)
							        })
							    } else {
							        that.setData({
							            flag: true,
							            ispage: true,
							            list: that.list.concat(data.items)
							        })
							    }
							} else {
							    that.setData({
							        flag: false,
							        ispage: false
							    })
							}
						
					}
				});
				
			},
			scrollbottom: function () {
			    if (this.flag)
			    {
			        var that = this;
			        that.setData({flag: false}), clearTimeout(t);
			        var t = setTimeout(function () {
			            that.setData({page: that.page + 1}), that.getOrder()
			        }, 500)
			    }
			}
		}
	}
</script>

<style lang='scss'>
	@import "../../styles/colorui/main";
	@import "../../paotui/css/paotui";
	.content {
		.ad{
			img{width: 100%;height: 100px;}
		}
		.part{background-color: #fff;padding: 5px 0 0;margin-bottom: 6px;
			.par_scd{color: #fff;display: inline-block;font-size: 12px;padding: 1px 10px 1px 10px;
			border-radius:0 10px 10px 0 ;}
			.part_01{display: flex;margin: 5px 10px;justify-content: space-between;border-bottom: 1px solid #FAFAFA;padding: 5px 0;
				.pare_01_l{color: #FB303C;font-weight: 600;font-size: 18px;}
			}
			.pare_01_r{color: #3F3F3F;font-size: 14px;}
		}
		.bbtn{display: flex;justify-content: space-between;
			.bbtn_10{width: 48%;}
		}
		
		.qy-bg-yellow {
		    background-color: #FBBD08;
		}
		
		.round {
			color: #ffffff;
		}
		
		.pare_logo {
			width:100rpx;
			height:100rpx;
			float:left;
		}
	}
	
	.time{display: flex;padding: 10px 10px 5px;
		span{font-size: 22px;}
		.time_l{width: 50%;text-align: center;}
		.time_m{border-left: 1px solid #F2F2F2;margin-top: 10px;height: 20px;}
	}
	
	
	.Process{background-color: #fff;padding: 10px;
		.process_01{display: flex;padding: 10px 0;justify-content: space-between;border-bottom: 1px solid #FAFAFA;
			.process_01_l{width: 10%;display:flex;align-items: center;
				.process_01_l_01{width: 20px;height: 20px;text-align: center;line-height: 20px;font-size: 12px;
				border-radius:16px 16px 16px 0;
				-webkit-transform:rotate(-45deg);
				-moz-transform: ratate(-45deg);
				transform:rotate(-45deg);
					.tex{transform:rotate(45deg);}
				}
			}
			.process_01_r{width: 88%;font-size: 16px;font-weight: 600;
				.process_01_r_01{padding-bottom: 5px;}
				span{font-size: 12px;font-weight: 100;}
			}
		}
		.icon-map{
		
		}
		
	} 
	
	.qy-bg-yellow {
		background-color: #FBBD08;
	}
	
	.text-white {
		color: #ffffff;
	}
	
	.qy-bg-red {
		background-color: #FB303C;
	}
	
	.page-ball {
		display: block;
		padding-top: 15.625%;
		width: 15.625%;
		text-align: center;
		/* line-height: 50px; */
		border-radius: 50%;
		background: #6A4A23;
		color: #fff;
        font-size: 30rpx;
		position: fixed;
		bottom: 50rpx;
		right: 24rpx;
		z-index: 999;
	}
	
	.page-title {
		display: inline-block;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		/* transform: translate(-50%,-50%); */
		-webkit-transform: translate(-50%,-50%);
	}
	
	.u-end {
		padding-top: 100rpx;
	}
	
	.u-end-title {
		text-align: center;
	}
	
	.text-center {
		position: fixed;
		width: 100%;
		top: var(--window-top);
		left: 0;
		z-index: 6;
	}

	.m-product-all {
		top: 100rpx;
	}
</style>
