<template>
	<view>
		<view class="navbar  ">
		 
				<view v-for="item in tabs"  class="item  "  :class="[tabCur==item.id?'on':'']" @click="selectTab(item.id)">
					{{item.name}}
				</view>  
			</view>
			
		<view class="card-list">
			<view class="order-box" v-for="item in list" :key="item.id" >
				<view class="order-header" @click="goDetail(item.id)">
					<view>{{item.type_name}}</view>
					<view >
						  {{item.status_name}}
					</view>
				</view>
				<view class="order-info" @click="goDetail(item.id)">
					<view class="order-li">
						<view class="fl">订单号：</view>{{item.order_no}}
					</view>
					<view class="order-li">
						<view class="" style="justify-content: space-between; display: flex;width:100%">
							<view><view class="fl">预约人：</view> {{item.accept_name}}</view>
							<view class="gongli" v-if="item.distance>=0">
								{{item.distance}}/km
							</view>
						</view>
					</view>
					<view class="order-li">
						<view>
							<view class="fl">手机号：</view><view v-if="item.person_id>0">{{item.accept_mobile}}</view>
							<view v-else>接单后可看</view></view> 
						
					</view>
					
					<view class="order-li">  
							<view class="fl">预约重量：</view>
							{{item.weight}} 
					</view>
					<view class="order-li">  
							<view class="fl">预约时间：</view>
							{{item.order_time}}
					</view>
					
					<view class="order-li"> 
						<view class="fl">预约地址：</view>
						{{item.accept_address}}
					</view>
				</view> 
				<view class="footer pb-32 " >
					  <view class="btn btn-default " @click="goDetail(item.id)"   >详情</view> 
					  <view class="btn btn-default " @click="setorder(item.id,2)" v-if="item.status==1 && jiedan_type ==1 ">接单</view>    
				 
					  <view class="btn btn-default" @click="setorder(item.id,1)"  v-if="item.status==2 ">转给他人</view>   
					  <view class="btn btn-default" @click="toshow(item.id)"  v-if="item.status==2 ">点击完成</view>    
				</view>
			</view>   
			<view class="zanwuimg" v-if="list.length == 0">
			  <image src="../../static/img/null.png" mode="widthFix"></image>
				<view>暂无相关订单</view>
			</view> 
		</view> 
		
		<lvv-popup position="bottom" ref="lvvpopref">
			<view style="width: 100%;height: 700upx;background: #F8F8F8;;position: absolute;left:0;bottom: 0;">
				<view class="pop-c"> 
					<view class="pop-t">
					    <view class='hs-row invoice'>
					        <view class='hs-row-hd'>
					            <view class='hs-hd-title'>完成订单</view>
					        </view>
					        <view class='hs-row-ft'
					        @click="toclose()">
					            <image class='fr icon' src='/static/img/close.png'></image>
					        </view>
					    </view>
					</view>   
					<view class="neirong">  
						<view class="content-top">
							<view class='hs-box'>
								<view class='hs-row'>
									<view class='hs-row-hd'>
										<view class='hs-hd-title' style="width: 100px;">订单金额：</view>
									</view>
									<view class='hs-row-bd' style="width: 95%;">
										<input type="text" class='hs-input' placeholder='请填写金额' v-model="money" ></input>
									</view>
								</view> 
							</view>
						</view>
						<view class="button-bottom">
							<button class="btn btn-success" @click="setorder(jiesuan_order_id,3)"   :disabled='submitStatus' :loading='submitStatus'>完成</button>
						</view>
					</view> 
				</view>
			</view>
		</lvv-popup>
	</view>
</template>

<script>  
import lvvPopup from '@/components/lvv-popup/lvv-popup.vue'; 
	export default { 
		components: { lvvPopup  },
		data() {
			return {
				jiesuan_order_id:0,
				jiedan_type:0,
				show:false, 
				tabs: [ 
					{
						id: 2,
						name: '已接单'
					},
					{
						id: 3,
						name: '已完成'
					},
					{
						id: 4,
						name: '已取消'
					}, 
				],
				tabCur: 2,
				list: [],
				page:1,
				money:'',
			};
		}, 
		onLoad(e) {  
		},
		
		onShow () {
			
			this.page = 1
			this.list = []
			
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			}  
			this.getList() 
		},
		onPullDownRefresh() { 
			this.page = 1
			this.list = []
			this.getList() 
		},
		onReachBottom() { 
			this.page++
			this.getList()
		},
		methods:{
			toshow(id) {
				this.jiesuan_order_id = id;
				this.$refs.lvvpopref.show();
			}, 
			toclose() { 
				this.jiesuan_order_id = 0;
				this.$refs.lvvpopref.close();
			},
			closePopup(){
				this.show = false
			},
			selectTab(id){
				this.page=1
				this.tabCur = id
				this.list = []
				this.getList()
			},
			setorder(id,status){
				var msg ='';
				if(status ==2){
					msg ='确认要接单吗？';
				}
				if(status ==1){
					msg ='确认要转给他人吗？';
				}
				if(status ==3){
					if (this.money == '' || this.money < 0 || isNaN(parseFloat(this.money))) {
						uni.showToast({ title: '请输入结算金额' , icon: 'none' })    
						return false;
					} 
					msg ='确认要结算完成吗？';
				}
				
				uni.showModal({
					title:'提示',
					content: msg,
					success:(ret)=>{ 
						if(ret.confirm){    
							this.$api.setorder({ 
								order_id:id  ,
								money:this.money  ,
								status:status  
							}, res => { 
								if (res.code == "1") {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									}) 
									setTimeout(()=>{
										this.page=1 
										this.list = []
										this.getList()
										this.money =''
										this.toclose();
									},1000)
								}else{ 
									uni.showToast({ title: res.msg , icon: 'none' }) 
								}
							})
						}
					}
				})
			},
			getList(){
				this.$api.orderlist({
					page:this.page, 
					status:this.tabCur
				}, res => {
				    
				    if (res.code == "1") {
				    	let list = res.data.list.data
				    	if(list.length>0){
				    		this.list = [
				    			...this.list,
				    			...list	
				    		]
				    		this.page++
				    	}else{
				    		uni.showLoading({
				    			title:'加载中...'
				    		})
				    		setTimeout(()=>{
				    			uni.hideLoading()
				    			return
				    		},500)
				    		this.zanwuflag = true
				    		this.flagjiazai = true
				    	} 
				    	
				    }
				}) 
			}, 
			goDetail(id){
				uni.navigateTo({
					url:'/pages/person/orderinfo?id=' + id
				})
			},   
		}
	}
</script>

<style lang="scss">
	page {
	    background: #eee;
	}
 

	.card-list {
		padding: 120rpx 14rpx 50px; 
	}
	.order-box {
		    background: #ffffff;
		    border-radius: 12rpx;
		    margin-bottom: 16rpx;
		.footer{
			display: flex;
			justify-content: flex-end;padding-bottom: 10px; 
		}
		.order-header {
			width: 100%;
			padding: 28rpx;
			justify-content: space-between;
			display: flex; 
		}
		.order-info {
			padding: 0 28rpx; 
			.order-li {
				color: #666666;
				font-size: 28rpx;
				padding-bottom: 28rpx;
				
				.fl{       width: 76px;
				text-align: right;
					display: inline-block;}
			}
		} 
	}	
	 .empty{text-align: center;} .navbar {
	 	/*  #ifdef  H5  */
	 	margin-top:44px;
	 	/*  #endif  */ 
	 }
</style>
