<template>
	<!-- 订单详情 -->
	<view class="r_detail">
		<view class="head">
			<view class="head_l">
				<!-- <view class="head_l_01">配送中...</view>
				<view class="head_l_02">服务专员正在为您配送中</view> -->
				
				<view class="head_l_01" v-if="detail.status==0 && detail.pay_way==0">等待付款</view>
				<view class="head_l_01" v-if="detail.status==1">等待商家接单</view>
				<view class="head_l_01" v-if="detail.status==2">商家已接单</view>
				<view class="head_l_01" v-if="detail.status==3 ">骑手已接单</view>
				<view class="head_l_01" v-if="detail.status==4">骑手正在送餐中</view>
				<view class="head_l_01" v-if="detail.status==8 && detail.is_dianping==0">待评价</view>
				<view class="head_l_01" v-if="detail.status==8 && detail.is_dianping==1">订单完成</view>
			</view>
			<view class="head_r">
				<image class="img" src="/static/icon/detail.jpg" mode=""></image>
			</view>
		</view>
		<view class="address" v-if="addr!=null">
			<view class="address_l">
				<image class="img" src="/static/icon/location.png" mode=""></image>
			</view>
			<view class="address_r">
				<view class="address_r_01">
					<view>收货人：{{addr.name}}</view>
					<view>{{addr.mobile}}</view>
				</view>
				<view class="address_r_02">收货地址：{{addr.addr}}</view>
			</view>
		</view>
		<view class="" v-if="products.length!=0">
			<view class='tag-e' v-if="products[0].productname!='快捷支付'">
				
				<view class="goods " v-for="(item,index) of products" :key="index">
					<image class="img" :src="staticUrl+item.photo" mode=""></image>
					<view class='goods_02'>
					  <view class='goods_title'>{{item.product_name}}</view>
					  <view class="goods_des">{{item.desc}}</view>
					  <view class='good_p'>
						<view class="good_price">¥{{item.fprice}}</view>
						<view class='i'>x {{item.num}}</view>
					  </view>
					</view>
				</view>
			</view>
			<view class='tag-e' v-else>
				<view class="goods ">
					<view class='goods_title'>快捷支付</view>
				</view>
			</view>
		</view>
		<view class="total">总计：¥ {{detail.total}}</view>
		<view class="mess">
			<view class="mess_01">订单信息</view>
			<view class="mess_02">
				<!-- <view class="mess_02_1">
					<view class="mess_02_l">订单编号:</view>
					<view class="mess_02_r">{{detail.order_num}}</view>
				</view> -->
				<view class="mess_02_1">
					<view class="mess_02_l">下单时间:</view>
					<view class="mess_02_r">{{detail.time}}</view>
				</view>
				<view class="mess_02_1">
					<view class="mess_02_l">备注:</view>
					<view class="mess_02_r">{{detail.remark}}</view>
				</view>
				
			</view>
		</view>
		<view class="foot" v-if="detail.status==1" >
			<button class="cu-btn round bg-red" @tap="immediatelyOrderfun" >立即接单</button>
			<button class="cu-btn round bg-red" @tap="refuseOrderfun" >拒绝接单</button>
		</view>
		
	</view>
</template>

<script>
	import {eleOrderDetails} from "@/utils/api/api.js";
	import {immediatelyOrder,refuseOrder} from "@/utils/api/api.js";
	export default {
		data() {
			return {
				order_detail:{
					
				},
				order_pro:[],
				order_id:"",
				
				delivery_info:{},//？
				delivery_rider:{},//？
				addr:{},//收获地址
				detail:{},//订单详情信息
				shop:{},//商家信息
				products:[],//购买的商品列表
			};
		},
		onLoad(opdata) {  
			this.order_id = opdata.id;
			this.eleOrderDetails()
		},
		computed: {
			staticUrl(){
				return this.$store.state.staticUrl;
			},
			
		},
		methods:{
			//获取订单详情
			async eleOrderDetails(){
				let res = await eleOrderDetails({
					order_id:this.order_id,
				});
				if(res.code==0){
					this.delivery_info=res.data.delivery_info;//？
					this.delivery_rider=res.data.delivery_rider;//？
					this.addr=res.data.addr;//收获地址
					this.detail=res.data.detail;//订单详情信息
					this.shop=res.data.shop;//商家信息
					this.products=res.data.products;//购买的商品列表
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			//立即接单 方法 外卖的
			async immediatelyOrderfun(){
				let res = await immediatelyOrder({
					order_id:this.detail.order_id,
				});
				if(res.code==0){
					this.$api.msg(res.msg);
				}else{
					this.$api.msg(res.msg);
				}
			},
			//商家拒绝接单的方法
			async refuseOrderfun(){
				let res = await refuseOrder({
					order_id:this.detail.order_id,
				});
				if(res.code==0){
					this.$api.msg(res.msg);
				}else{
					this.$api.msg(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss">
.r_detail{background-color:#F5F5F5;
	padding-bottom: 120upx;
	.head{display: flex;justify-content: space-between;background-color: #F85043;padding: 20upx 40upx 0;
		.head_l{padding: 40upx;color: #FDF1F0;
			.head_l_01{font-size: 32upx;padding-bottom: 12upx;}
			.head_l_02{font-size: 26upx;}
		}
		.head_r .img{height: 200upx;width: 240upx;}
	}
	.address{display: flex;padding:40upx 30upx;;background-color:#fff;margin-bottom: 20upx;
		.address_l{padding-right: 40upx;display: flex;flex-direction: column;justify-content: center;
			.img{width: 40upx;height: 40upx;}
		}
		.address_r{flex-grow: 1;
			.address_r_01{display: flex;justify-content: space-between;font-size: 30upx;font-weight: 600;padding-bottom: 16upx;}
			.address_r_02{line-height: 40upx;}
		}
	}
	.tag-e{background-color:#fff;margin-bottom: 20upx;
		.goods{display: flex;font-size: 28upx;width: 100%;background-color: #ffffff;padding: 20upx;box-sizing: border-box;
		border-bottom: 2upx solid #EEF0EF;
			img{width: 160upx; height: 160upx;}
			.img{
				width: 200upx;
				height: 200upx;
			}
			.goods_02{box-sizing: border-box;display: flex;flex-direction: column;height: 160upx;flex-grow: 1;
			justify-content: space-between;padding-top: 10upx;padding-left: 20upx;}
			.goods_title{max-height: 80upx;overflow: hidden;line-height: 40upx;font-weight: 600;font-size: 30upx;}
			.goods_des{color: #979797;}
			.good_p{display: flex;justify-content: space-between;
				.good_price{color: #F04E42;font-weight: 600;}
		}
		
		}
	} 
	.total{background-color: #fff;padding: 24upx 30upx;text-align: right;margin-bottom: 20upx;font-size: 30upx;}
	.mess{background-color: #fff;padding: 20upx;margin-bottom: 20upx;
		.mess_01{border-left: 4upx solid #FD5153;padding-left: 20upx;margin-bottom: 20upx;font-size: 30upx;font-weight: 600;}
		.mess_02{border-top: 2upx solid #F8F8F8;padding: 20upx;
			.mess_02_1{display: flex;line-height: 50upx;
				.mess_02_l{width: 200upx;}
			}
		}
	}
	.foot{position: fixed;bottom: 0px;left: 0px;z-index: 99;border-top: 1px solid #E4E4E4;width: 100%;background-color: #fff;
	justify-content: flex-end;padding: 20upx 30upx;display: flex;
	}
	
	.cu-btn{
		margin-right: 20upx;
	}
}
</style>
