<template>
	<view class="content">
		<view style="overflow: hidden;">
				
				<view class="news_title"> 
					<view class="fsz30 overflow2 title tag">
						{{orderInfo.status_name||''}}
					</view>
					<view class="time fsz26">
						订单号：{{orderInfo.order_no||''}}
					</view>
					<view class="time fsz26">
						下单时间：{{orderInfo.createtime||''}}
					</view>
					<view class="time fsz26" v-if="orderInfo.status ==3">
						完成时间：{{orderInfo.finish_time||''}}
					</view>
				</view>
				<view class="line"></view>
				<view class="xydd_main w">
					<view class="biaoti fsz30">
						 预约信息
					</view>
					<view class="main">
						<view class="li fsz30">
							<view class="ti">联系人 : </view>
							<view>{{orderInfo.accept_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">电话 : </view>
							<view v-if="orderInfo.person_id>0" @tap="call(orderInfo.accept_mobile)">{{orderInfo.accept_mobile||''}}</view>
							<view v-else>接单后可看</view>
						</view>
						<view class="li fsz30"  >
							<view class="ti">地址 : </view>
							<view>{{orderInfo.area_name||''}}</view>
						</view> 
						
						<view class="li fsz30"  >
							<view clas="ti"></view>
							<view style="    text-align: right;">{{orderInfo.accept_address||''}}</view>
						</view> 
					</view>
				</view> 
				<view class="line"></view>  
				<view class="xydd_main w">
					<view class="biaoti fsz30">
						 回收信息
					</view>
					<view class="main">
						<view class="li fsz30">
							<view class="ti">预约回收品类 : </view>
							<view>{{orderInfo.type_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">预约时间 : </view>
							<view>{{orderInfo.order_time||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">预约重量 : </view>
							<view>{{orderInfo.weight||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">备注 : </view>
							<view>{{orderInfo.remark||''}}</view>
						</view>
						<view class="li fsz30" v-if="orderInfo.status ==3">
							<view class="ti">订单金额 : </view>
							<view class="red-price">{{orderInfo.price||''}}元</view>
						</view> 
					</view>
				</view>   
				<view class="line"></view> 
				<view class="xydd_main w" v-if="orderInfo.status>=2">
					<view class="biaoti fsz30">
						 回收员
					</view>
					<view class="main">
						<view class="li fsz30">
							<view>姓名 : </view>
							<view>{{orderInfo.person_name||''}}</view>
						</view> 
					</view>
					<view class="main">
						<view class="li fsz30">
							<view>接单时间 : </view>
							<view>{{orderInfo.jiedan_time||''}}</view>
						</view> 
					</view>
				</view> 
			</view> 
				<view style="height:100px"></view>
			<view class="button-bottom" v-if="(orderInfo.status==1 && jiedan_type ==1) || orderInfo.status==2">
				<button class='btn btn-default'    @click="setorder(orderInfo.id,2)" v-if="orderInfo.status==1 && jiedan_type ==1 ">接单</button>
				<button class='btn btn-default'    @click="setorder(orderInfo.id,1)" v-if="orderInfo.status==2 ">转给他人</button>
				<button class='btn btn-default'    @click="toshow()" v-if="orderInfo.status==2 ">点击完成</button>
			 </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" style="width: 100%;margin: 0px; padding: 0px;">
							<button  style="width: 100%;margin: 0px; padding: 0px;" class="btn btn-default" @click="setorder(orderInfo.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 {
			money:'',
			jiedan_type:0,
			order_id: '',
			orderInfo: {},  
		};
	},
	onLoad(e) {
		this.order_id = e.id;
		this.getOrderDetail();
			this.config()
	},
	methods: {  
		toshow() { 
			this.$refs.lvvpopref.show();
		}, 
		toclose() {  
			this.$refs.lvvpopref.close();
		},
		getOrderDetail() {
			let _this = this
			let data = {
				id: _this.order_id
			}
			_this.$api.personorderdetail(data, function(res) {
				if (res.code ==1 ) {
					let data = res.data.info  
					_this.orderInfo = data;  
				} else {
					uni.showToast({ title: res.msg , icon: 'none' }) 
				}
			})  
		},  
		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  ,
							status:status  
						}, res => { 
							if (res.code == "1") {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								}) 
								setTimeout(()=>{ 
									 
									 this.money =''
									 this.toclose();
									this.getOrderDetail()
								},1000)
							}else{ 
								uni.showToast({ title: res.msg , icon: 'none' }) 
							}
						}) 
					}
				}
			})
		},
		call(phone){ 
				  uni.makePhoneCall({
					phoneNumber:phone,
					success:function(){
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
		},

			 config(){
				this.$api.config({}, res => { 
				    if (res.code == "1") { 
						this.jiedan_type = res.data.jiedan_type;
				    }else{ 
						 
					}
				}) 
			},
	}
};
</script>

<style lang="scss">
.container {
	/* padding: 22upx 14upx 100upx; */
}
 
.news_title{
	border-bottom: 1px solid #eee;
    padding: 20rpx 5%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    width: 100%; }
.news_title	.title{
		color: #333;
		line-height: 50rpx;
	}
.news_title	.time{
		color: #777;
		margin-top: 20rpx;
	}
.news_title	.tag{ 
			color: #e01f20;
	}
 
.xydd_main{ }
 	.biaoti{
		color: #777777;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx; }
	.biaoti	image{width: 35rpx;margin-right: 10rpx; margin-bottom: -6rpx;}
 .main{
 	line-height: 60rpx;}
  .main	.li{
 		display: flex;
 		justify-content: space-between;
 	}
 	.servicepic{
 		width: 180rpx;
 		height: 180rpx;
 		position: relative;
 		box-sizing: border-box;}
 	.servicepic	image{
 			width: 180rpx;
 			height: 180rpx;
 		}
 	.servicepic	uni-icons{
 			position: absolute;
 			right: 0;
 			top: 0;
 		}
  
 .line{border:solid 3px #eee}.button-bottom {
		padding: 15upx 26upx;
		text-align: right;
		display: block;
	}

	.button-bottom .btn {
		margin-left: 20upx;
	}
	.ti{width:115px}
</style>
